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.
body instead? In the current state of your answer, you are only spreading one more myth without an explanation.
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 /.
