Background-image CSS

Question

I'm trying to set a background image to a html page, but the image is not appearing. The image is in the same folder as the html file.

<html>
<head>
<link rel="stylesheet" type="text/css" href="style/indexstyle.css" > 
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<heading>Overground Effective</heading>

<nav class="nav">

        <ul>
            <li><a href="index.html" style="color: black;">Home</a></li>
            <li><a >About me</a>
                <ul>
                    <li><a href="aboutme/whoami.html">Who am I</a></li>
                    <li><a href="aboutme/whatido.html">What I do</a></li>
                    <li><a href="aboutme/whatilike.html">What I like</a></li>
                </ul></li>
            <li><a href="aboutme/myskills.html">My skills</a></li>
            <li><a href="gallery/gallery.html" style="color: black;">Gallery</a></li>
        </ul>
    </div>
</nav>
</div>

and the CSS file:

body{
background-image: url("/treewithroots.jpg");
background-size: cover;
min-height: 100%;
background-position: right;
}

When I upload the image to Dropbox for instance, it is working just fine. How can I fix this?

@Sam1604 — That won't work. It isn't in the same directory as the stylesheet. — Quentin, Sep 19 '14 at 12:11
Same thing happens, image is still not appearing. I tried changing the folder but it doesn't work too. — user3798144, Sep 19 '14 at 12:11
Open your browser's developer tools. Look at the net tab. Find where it tries to load the image. Look at the URL it is actually requesting. Is that correct? What response is it getting? — Quentin, Sep 19 '14 at 12:11
@Quentin But in question `The image is in the same folder as the html file.` as he/she mentioned — Sam1604, Sep 19 '14 at 12:12
@Sam1604 — And the code shows that the stylesheet is *not* in the same directory as the HTML document. — Quentin, Sep 19 '14 at 12:13
_“The image is in the same folder as the html file”_ – but the stylesheet itself isn’t. And – very basic knowledge – relative paths to background images are resolved against the URL of the stylesheet, not the HTML document. (Quite crappy question title btw.) — CBroe, Sep 19 '14 at 12:14
@user3798144 is the `indexstyle.css` file is in FOLDER `style` only ah? — Sam1604, Sep 19 '14 at 12:14
Yes it is, by the way in firebug the background-image property is not shown at all — user3798144, Sep 19 '14 at 12:15
@user3798144 — That suggests an error elsewhere. Use a [validator](http://jigsaw.w3.org/css-validator/). — Quentin, Sep 19 '14 at 12:16
possible duplicate of [When to use IMG vs. CSS background-image?](http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) — Bud Damyanov, Sep 19 '14 at 12:31
The working fiddle http://jsfiddle.net/0syp7qxj/ the problem with your image path — navinspm, Sep 19 '14 at 12:38

score 0 · Answer 1 · answered Sep 19 '14 at 12:12

0

Replace your style with below: because your css file is in style folder and your image is same folder as the html file.

body{
  background-image: url("../treewithroots.jpg"); // change this
  background-size: cover;
  min-height: 100%;
  background-position: right;
}

Suppose your folder structure as below:

index.html
treewithroots.jpg
style/indexstyle.css

answered Sep 19 '14 at 12:12

Butani Vijay

3,840
2
26
55

This worked thank you, although I don't understand why i have to use "../" when the image is in the same folder as the html file – user3798144 Sep 19 '14 at 12:18
@user3798144 — Because URLs are resolved from the stylesheet, not the HTML document. – Quentin Sep 19 '14 at 12:18
because your image is not in same folder where your css is. – Butani Vijay Sep 19 '14 at 12:19
You need to give relative path of your image – Butani Vijay Sep 19 '14 at 12:20

score 0 · Answer 2 · answered Sep 19 '14 at 12:20

i think you have to give proper path for this image. try like this

body{
background-image: url("http://xsights.files.wordpress.com/2014/06/branding-logo.jpg?w=624");
background-size: cover;
min-height: 100%;
background-position: right;
}

<heading>Overground Effective</heading>

<nav class="nav">

        <ul>
            <li><a href="index.html" style="color: black;">Home</a></li>
            <li><a >About me</a>
                <ul>
                    <li><a href="aboutme/whoami.html">Who am I</a></li>
                    <li><a href="aboutme/whatido.html">What I do</a></li>
                    <li><a href="aboutme/whatilike.html">What I like</a></li>
                </ul></li>
            <li><a href="aboutme/myskills.html">My skills</a></li>
            <li><a href="gallery/gallery.html" style="color: black;">Gallery</a></li>
        </ul>
    </div>
</nav>

score -1 · Answer 3 · answered Sep 19 '14 at 12:16

-1

background-image: url("../treewithroots.jpg");

use as above

answered Sep 19 '14 at 12:16

ajay rao

1

score -2 · Answer 4 · answered Sep 19 '14 at 12:15

-2

You'd better use the full image url. That way you won't have to be carefull about directory structure when you place your css.

background-image: url("http://www.yoursite.com/treewithroots.jpg");

answered Sep 19 '14 at 12:15

Krogertek

1
1

Background-image CSS

4 Answers4