what the CSS file looks like:
h1{
.....
}
body{
background-image: url(/img/back.png) ;
}
what the files hierarchy looks like:
img(file containing the images)
-back.png(the background image i want to keep as background)
.css
.html
i am not sure why the image is not loading even though i have used relative path to the css file as suggested by the asnwers in past questions similar to this. if anyone can help thank you.
The rest of CSS is working just a problem with this background-image issue
I have a problem which is my background image doesn't show up. I am sure that my url is correct (Because I have used this url in other aspects).
This is my css file:
body{
background : url(assets/image/main.jpg);
background-size: cover;
}
so what happened?
This is my folder's structure:
/assets/
css/
style.css
image/
main.jpg
/index.html
Remove the space between background : and add quotes to your URL string so it looks like background: url("assets/image/main.jpg");
Beyond that just ensure that the filepath from this css file still maps to that folder correctly, just because it works in one css file doesn't mean it works in another if the folder structure differs.
Your code is correct.
You should know that the path is relative to the location of the style (and not the html).
The fact of having used this code elsewhere does not mean that the path is correct here.
After that may be the image which is corrupt.
I currently have an image saved in a folder in the following location:
C:\xampp\htdocs\project1\image
where image.jpg is the name of the image.
and I have my CSS in a folder in the following location:
C:\xampp\htdocs\project1\css where stylesheet2 is the name of the style sheet.
I am trying to use relative pathing to insert a background image in my CSS. I am trying to use
background-image: url("../image/image.jpg");
but it's not working for some reason. I have also tried
background-image: url("../Image/image.jpg");
to no avail. What am I doing wrong?
Having trouble finding the relative path to my image in relation to my CSS folder. Folder structure for image, CSS, and html is below (absolute path shown).
CSS - C:\Users\user\mpi\personal\static\personal\css\home.css
Image location - C:\Users\user\mpi\personal\static\personal\img\ex.jpg
HTML - CSS - C:\Users\user\mpi\personal\templates\personal\home.html
body {
height: 100%;
margin: 0;
padding: 0;
background-image:url(img/Ex.jpg);
}
The above code will not produce my background image. What's the correct relative path to get the background image to populate? I can't even get the absolute file path to populate the image correctly. I've looked at other question and answers with no luck. Is the image location supposed to be relative to the CSS path, the HTML path, or both?
When you have CSS in an external file all paths within that CSS use the relative path of the external file.
So when you have...
background-image:url(img/Ex.jpg);
It is effectively looking in...
background-image:url(css/img/Ex.jpg);
Instead, use the following...
background-image:url(../img/Ex.jpg);
You have to write background image's path as if you are in the folder of the css file included, because it's like you are in C:\Users\user\mpi\personal\static\personal\css\ folder.
So in this case you have to write background:url(../img/ex.jpg);
Moreover i see that image name doesn't correspond; in your css class you have written Ex.jpg and in the complete image path you've written ex.jpg. Css detect uppercase and lowercase letters.
Just do this
Image
background-image:url(img/Ex.jpg);
Or
Starting with ../../ moves two directories
background-image:url(../../Ex.jpg);
Css
background-image:url(css/Ex.jpg);
Or
Starting with ../ moves one directory
background-image:url(../Ex.jpg);
I am trying to set my background image of the page via CSS using the following code, but no image shows up. The image will be tiled on the page and is only 10x10px big. Nonetheless, it still doesn't show up. Please can you tell me what I am doing wrong?
<body>
<div id="background"></div>
</body>
#background {
background-image: url("img/background.png");
}
Is the image in linkToCssFolder/img/background.png? The image path is relative to your CSS file.
Also, does your #background div have content in it? If not, it will probably have the default 0px height, and not show any background.
You need to give the element dimensions too...
#background {
width: 10px;
height: 10px;
}
Background images do not make their container stretch to fit.
Here is a list of all CSS keywords
Just tried this at http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple and it works.
I assume your image is not at right location or if the background property is being over written by style or another css rule.
such a no brainer thingy of css and html often forgotten even professional due lack of proper focus and just being tired.If you knew it just rest for a while.
here are some tips if you lost in the tree of web design.
Check the files if it is there, the file type and support for the file in your browsers
Check the directory if you are online you can put all the URL of the file OR use "../" if your css and the image file is in different level of directory.
Check your syntax.
rest, take a nap or have a coffee break.
Firstly check your CSS and image location
1) Both in same folder then try " background-image: url("background.jpg") " simply.
2) If you have img folder and image inside this folder then try " background-image: url("img/background.jpg"); "
3)If you have img folder and If you have CSS folder then you have to go one step back then goes to image folder and choose image it seem like this " background-image: url("../img/background.jpg"); " where '..'represent one step back
#background {background-image: url("img/background.png"); height:300px;}
add height element in css
Another source of error may come from image extension name, for instance in :
background-image: url("img/background.png")
Image name must be "background" and NOT "background.png"
Image "background" must be a PNG and not another image type like JPG
Hy,
to get your image you must imagine that you are in a terminal(or cmd prompt) and write as youuld do to get to the image.
So let us say that your css file is /css/ and you image is in /img/background.png.
To get to the image you must write this code background-image: url("../img/background.png");
This is because in terminal/cmd prompt to get to the image from your .css file you would first type cd .., then cd img, then background.png. Hope it will help you!
Cheers!