I am trying to insert a background image but for some reason when I put this...

html{
    background-image: url('images/background.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
}

It doesn't seem to work, it stays blank. I know I have the path correct and the name correct I have only gone over it a million times, but when I put this...

html{
    background-image: url('http://i.imgur.com/GRqXyR1.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
}

The background comes up fine. I am confused I don't understand why the first method isn't working?

Recommended Answers

All 8 Replies

Likely due to your path... images/background.png

That path wouldn't be relevant unless you are on a page at the root directory and your images folder is off the root.

If you use your browsers dev tools (F12), any errors in the network tab or console?

Well I thought the path might have been the problem so instead of putting it in a seperate folder I just turned the path into

html{
    background-image: url('background.png');
}

But it still didn't work, the other strange thing is that I have another html page that uses the same background and the CSS is the same, so I don't know why it isn't working.

Do you have this online so I/we can take a look at the behavior?

Keep in mind that relative URLs in your stylesheet are based on the directory in which the stylesheet resides. If your stylesheet is in a subdirectory (like '/css' or '/styles'), then the rule should read something like:

    html{
    background-image: url('../images/background.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
    }
body{
    background-image: url('../images/background.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
    }

Here is the link to my website, I tried some of the solutions you all posted and they didn't seem to work :/
Click Here

The page you linked to uses "\" as a directory delimiter in the URL paths for stylesheets and images, which doesn't work on UNIX-based servers. You need to use a "/" for URLs - even on Windows systems. Fix that problem first and then let us know when it's ready.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.