I have the code bellow in the html file and the problem is the background picture is not showing, nor when I try doing it from the css file. Can somebody help me out what am I doing wrong? Thanks in advance!
<head>
<style>
body{
background-image: url("trees.jpg");
}
</style>
</head>
try using !important
<head>
<style>
body{
background-image: url("trees.jpg") !important;
}
</style>
</head>
First of all you need to set height of your body if their is no-content in the body then the image will not show
secondly, this code will only work if your html file and image are both in same folder
<head>
<style>
body{
background-image: url("trees.jpg");
}
</style>
</head>
if the image is in say img folder then you need to do this
body{
background-image: url("img/trees.jpg");
}
but if the img folder is not in the same directory as html but is in it's parent directory. you need to do this
body{
background-image: url("../img/trees.jpg");
}
Most likely it can't find the file destination, try to check if you typed the file name right, even the file extension. Sometimes is the file extension in uppercase, like ".JPG".
Related
This question already has answers here:
background-image css not working
(5 answers)
CSS Background Image Not Displaying
(20 answers)
Closed 3 years ago.
I've been trying to put an image as background, but for some reason, it doesn't work.
Below you will find my HTML and CSS. The name of the image is Background and its size is 1280*720.
The HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body >
<header>
</header>
<footer></footer>
</body>
</html>
The CSS:
body {
background: url("C:\Users\pro tech\Desktop\site web\Nouveau dossier: background.jpeg") no-repeat;
background-size: cover;
}
The image url should be relative to your css file and not your desktop. Or in your case relative to the html file because you have inline css.
The url is way off.
It should be something like...
background: url("/images/background.jpeg")
The url of the background image needs to begin where that CSS file is located. If you need to go back a folder, you use ../, which leads me to my next thing: make sure you are using forward slashes and not back slashes.
Example: If you have your CSS file on your desktop right now, your path would look like this:
url("site%20web/Nouveau%20dossier/background.jpeg");
maybe because there is blank space on the url link?
try to replace the blank url with %20
body {
background: url("C:\Users\pro%20tech\Desktop\site%20web\Nouveau dossier\background.jpeg") no-repeat;
background-size: cover;
}
or just remove the detail URL, and just use image file name if the image is in the same folder as html and css
body {
background: url("background.jpeg") no-repeat;
background-size: cover;
}
Put the image in the same folder where you have your index and Css and then add the css with the new location of the file:
for exemple:
body {
background : URL("./image.jpeg") no-repeat;
}
You need to add some height or content to the body. for now height is 0px so background image is not showing
I want to set my background styling in a css stylesheet, but want to select the background image in the html file. Whilst the style is going to be same across the website, the image needs to be different on each page.
Example of code:
==== CSS ====
body {
backgound-position: center;
background-repeat: no-repeat;
background-size:1200px 800px;
background-position-x: center;
background-position-y: 50px;
}
==== HTML ====
<html>
<head>
<link href="../css/custom.css" rel="stylesheet">
</head>
<body style="background:url('../img/Car.jpg');">
</body>
</html>
This does not seem to work. The styling in CSS is being ignored. Please note that the paths are correct, as all other elements work...
Also, I'm using a Bootstrap template.
Please help!
Thank you
D.
You wrote background:url('../img/Car.jpg'); using only background: will set EVERY background property. Simply change background:url(); with background-image:url(); :)
I would like to use stylesheet to set background image in my DIV on html page.
My css file:
#MyDiv {
background-image: url('Images/prechod.png');
background-repeat: repeat-x;
height: 400px;
}
And my page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="Css/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div id="MyDiv">
</div>
</body>
</html>
I tried also this and it works.
<body>
<div style="height: 400px; background-image: url('Images/prechod.png'); background-repeat: repeat-x">
</div>
</body>
But I would like to have everything in the css file. I hope it's simple and somebody will help me.
Paths in your css file are relative to the location of the CSS file, not the HTML file.
You probably just need to change your CSS accordingly - for example if your css file is in Css/StyleSheet1.css relative to the HTML file, just change it to this:
#MyDiv {
background-image: url('../Images/prechod.png');
background-repeat: repeat-x;
height: 400px;
}
If it isn't a path issue, most likely you have some other style of higher specificity overriding the #myDiv declaration in your CSS file (for example something like body #myDiv { background: none } or similar). That would explain why it works as an inline style (as these are of the highest specificity) but not in your stylesheet. However based on the fact that your path was incorrect to begin with I would suspect that is the culprit.
background-image: url('../Images/prechod.png');
The Path has to be set relative to the css
Relative paths in the CSS and then adding those in there:
/** CSS **/
#MyDiv { url('../Images/prechod.png') repeat-x; height: 400px; }
When I put this code in my html file, it is working without issue:
<style type="text/css" media="screen">
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
but when I move it to my css file as this:
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
This is my html:
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg" />
I am assuming it's due to the image location but I'm not sure since I've tried variations of the path and never got it to work.
Any suggestions?
EDIT
Sorry, you can't read my mind, I know.
When I place the css in the html file, the image displays fine. When I move it to the css file (site.css) it is not displaying at all. I've tried several different paths and it isn't being displayed no matter what I put in there.
UPDATE #2
When I change my html to this:
<div class="page">
<div id="header">
<div id="headerimg">test</div>
I am getting the image behind the text as 1 line that says test but not the full size of the image.
So it is apparently not displaying the image due to the size of the div? I changed the css to this:
height:130px;
but that did not change the height at all.
The two bits of CSS are not equivalent.
In one, you have #headerimg (id selector) which is a very different selector to .headerimg (class selector).
#imgplacement is also missing from the second sample.
As for the image issue - you need to ensure the correct path to the image directory.
This will be relative to where the CSS is - if in a CSS file, the image needs to be relative to the CSS file. If it is embedded in the HTML, it needs to be relative to the HTML file.
Since the path is rooted (starts with /), it should work everywhere. Use the developer tools to determine where it is looking for the image.
Include your css like this on the home page:
<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />
And then be careful on routes for your image.
include the CSS file between the <head></head> section of your HTML like this:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />
Okay here's my file structure:
+WWW
index.html
style.css
map.jpg
CSS:
body {
background: #000 url('map.jpg') repeat/repeat-x/repeat-y/no-repeat scroll/fixed top/center/bottom/x-%/x-pos left/center/right/y-%/y-pos;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
</body>
</html>
PROBLEM: map.jpg does not display in any browser (Firefox, Safari) Or TextMate Preview!
You have two issues here, first is your CSS being off, it shouldn't have that laundry list of options for each argument left in there:
body {
background: #000 url('map.jpg');
}
Then your <body> doesn't have any content, so it has no dimensions, you'll need to put something in there to see much if any of the image, otherwise the <body> element's height is going to be very small if not 0, depending on the browser.
Try adding overflow:hidden;. This worked for me.
body {
background: #000 url('map.jpg') no-repeat top left;
}
The example you used showed all possible option values.
That doesn't look like valid CSS, did you forget to remove the sections you didn't need?
Try something like this:
body {
background:#000 url('map.jpg');
}
I was working on wamp... and it works fine with relative url.
body{
background:url(../image/circle.png) no-repeat;
}
This should definitely work.
Try getting rid of all the extra junk in your css:
body {
background: #000 url('map.jpg');
}
Make sure the image is in the same folder that your css file is in.