I have this in an external css file, but its not working at all. I would assume I'd written it wrong, but when placed internally, it works fine. Any ideas as to what might be going on?
html
{
background-image:url(images/background-grid.jpg);
background-repeat:repeat;
}
I assume your CSS file is in a folder like this.
/
css/
yourcss.css
images/
background-grid.jpg
index.html
The paths given in your CSS file are relative to the path of the CSS file (in the example I given, the css folder). So you should use ..:
background-image: url(../images/background-grid.jpg);
I think you didn't write it completely wrong
But it's better to use body instead of html.
Explanation why to use body
It allows you to use an overlay on top of that body tag. Like a grid-ish background on the body and a shade on the side. But both are correct. Depending on what you are trying to do ofc.
If you don't repeat your background there is a possibility that your picture doesn't use the whole page and then you should use the html tag. But in this case it gives the same solution because of that repeat.
SO replay: tnx to attronics
Explanation of your 'error'
If your images are in a different folder than your html page (which should be the case).
You should use .. as relative path to your css file.
Without the .. it would mean that you are going to look for that image in the same folder as your html page.
body{
background-image:url(../images/background-grid.jpg);
background-repeat:repeat;
}
Here is a site that gives some Basics of CSS. Didn't check the source though.
It may be your folder structure, try
html
{
background-image:url(../images/background-grid.jpg);
background-repeat:repeat;
}
When we have these folders
css
img
and index.html
when we write css in style tag in index page which is called internal css then it works right but when we right css in styles.css in css folder then background img does not work.
because you move with in folder and path of background img does not work. so you have to write like this:
background-image: url('../img/bg.jpg');
then it will work properly
.. this mean go one level up.
So, if your folder structure is like this:
image/
background.png
css/
stylesheet.css
then your css rule should be like this:
html {
background-image: url('../image/background.png');
}
If your folder structure is like this:
style/
image/
bgr/
background.png
css/
deeper/
stylesheet.css
then, go up two levels to the image directory like below:
html {
background-image: url('../../image/bgr/background.png');
}
And so on. Just add up the .. followed by trailing slash /.
Related
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.
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);
Keeping multiline svg code in main index page is very inelegant. I'm looking for solution which let me move that code to another file and just link this file in my page, in place when it should be. Something like:
<svg><use href="linkedfile.svg"></use></svg>
but the sollution above doesn't work properly - an image is formatting very frank and cannot be modify by css. I need good-working method.
Have you tried a background image in your CSS file?
.image{
background: url(linkedfile.svg);
}
I designed my own 404 error which you can find here:
http://www.ianbauters.be/errors/404.html (this one works)
But when I trigger a 404 by going to http://www.ianbauters.be/qsdfhj everything is there except for the orange background image I use.
Anyone has any ideas how I can fix this?
Using a relative path to the URL in your CSS is the problem. For example...
url('assets/images/opacity.png')
Try making it absolute...
url('/errors/assets/images/opacity.png')
Edit - something else to be aware of...
When using url in CSS via the <style> tag, relative paths will always be relative to the current page location. When using url in CSS via the <link> tag and .css files, the path will be relative to the location of the .css file.
Because you have added a relative path for the background image turn it into absolute and you will have no more problems
.oh {
...
background-image: url('/assets/images/opacity.png');
...
}
If you view the both pages using firebug, you will notice the error on the second page, it's loading image from http://www.ianbauters.be/assets/images/opacity.png
but the correct url is http://www.ianbauters.be/errors/assets/images/opacity.png, just use the whole url
use
background-image: url('/errors/assets/images/opacity.png');
instead of
background-image: url('assets/images/opacity.png');
Change the url in css for .oh
from
url("assets/images/opacity.png")
to
url("/errors/assets/images/opacity.png");