Can you add an image to the HTML element using CSS?

Question

I am using the following code, but it is having no effect!! Can this be done?

    html {
          background: #d9dbdc url('images/repeat-x.png') repeat-x;
    }

You'll want to add that image to body{} I believe... Other than that, just make sure the path is valid. — acm
– acm, Commented Apr 6, 2011 at 13:27

Pekka · Accepted Answer · 2011-04-06 13:45:09Z

2

This will work if you actually have an image at the specified location, although it's usually applied to the body element. It could be that the body element has a background colour that is covering the image.

Note that paths are relative to the style sheet file, not the HTML file embedding it, so a path pointing to images/repeat-x.png in /css/styles.css would result in /css/images/repeat-x.png.

edited Apr 6, 2011 at 13:45

answered Apr 6, 2011 at 13:28

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SLaks · Accepted Answer · 2011-04-06 13:28:03Z

2

Yes, it can be done, but it needs to be on the <body> tag.

Your image might not exist, or you might have a different background covering it.

answered Apr 6, 2011 at 13:28

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Mark · Accepted Answer · 2011-04-06 13:35:44Z

1

If you are trying to set the background of the entire page I'd recommend:

body { background: #d9dbdc url('images/repeat-x.png') repeat-x; }

edited Apr 6, 2011 at 13:35

answered Apr 6, 2011 at 13:29

Mark

3,7773 gold badges35 silver badges49 bronze badges

Comments

Ryan W · Accepted Answer · 2011-04-06 13:28:22Z

0

make sure the url is correct, you can use browser debug tool like Firebug in firefox to inspect the html

answered Apr 6, 2011 at 13:28

Ryan W

6,2132 gold badges39 silver badges47 bronze badges

2 Comments

Mark Over a year ago

If you're using Chrome you can do a right click on page, click "Inspect Element" and on the Resources tab you can find the resource and see if its missing.

Ryan W Over a year ago

short cut is ctrl +shift + J :)

Collectives™ on Stack Overflow

Can you add an image to the HTML element using CSS?

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related