How can I use an element as a background image with z-index?

Question

I am using an image (in an <img> tag) as a background. I want it to always be the furthest back object. But my paragraph isn't showing up because it is covered up by the image.

I know it has something to do with the z-index, but I can't get it working.

HTML

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>

    <head>
    <title>2013 YourFantasyFootball</title>
<link rel="stylesheet" type="text/css" href="css/css_reset.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
</head>

<body>
<img src="images/final2.gif" class="stretch" alt="" />
<p>This is the first paragraph in the body of your new HTML file!</p>
asdfas
</body>
</html>

CSS

body {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
    z-index:-1;
}

p {
    color:red;
}

because I won't be able to get it to stretch in all browsers — stack over, Oct 11 '13 at 15:01
I guess `background-size` isn't in old IEs. Still - why do you want to stretch it? That usually looks awful. — alex, Oct 11 '13 at 15:02
`z-index` only works on positioned elements (position:absolute, position:relative, or position:fixed). — , Oct 11 '13 at 15:02
I'd recommend using backstretch.js to take care of that background image for you. It'll preserve the aspect ratio! — ediblecode, Oct 11 '13 at 15:04
Do you want the image (background) to have the same width as the viewport (screen) or some other block level parent container? — Marc Audet, Oct 11 '13 at 15:06

score 2 · Accepted Answer · answered Oct 11 '13 at 15:07

2

It seems like the image should be fixed, not the body.

body,html {
    height: 100%; 
}

.stretch {
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    z-index:-1;
}

http://jsfiddle.net/xYqsT/

answered Oct 11 '13 at 15:07

James Montagne

77,516
14
110
130

`position: absolute` would also work, depends on the desired effect, in this case the OP wants a fixed background. – Marc Audet Oct 11 '13 at 15:10

score 1 · Answer 2 · answered Oct 11 '13 at 15:02

1

The paragraph or content in front if it needs to have position: relative, otherwise anything with a z-index takes precedence.

answered Oct 11 '13 at 15:02

shshaw

3,123
2
23
33

I want to just fix it for the background image so I don't have to keep applying position relative to all future elements – stack over Oct 11 '13 at 15:06
1

@stackover The `z-index` property is meaningless unless you set it's `position` property. – ediblecode Oct 11 '13 at 15:07
so how would I set the background image to always be the furthest back? – stack over Oct 11 '13 at 15:08
@stackover: you can't, without setting other things to be further forward than the background image. As I suggest in my answer, your best bet (aside from just not worrying about `background-size` in IE 8) is to wrap all your other page content in an element with a z-index higher than your background `` tag. – Paul D. Waite Oct 11 '13 at 15:17
If you insist on using an `img` or another element in place of a `background-image` on the body, then you should also wrap your content in a `div` or another container so you only need to set `position: relative` on that container and all of the children show up correctly. Obviously a `background-image` on the body would be the best option here. – shshaw Oct 11 '13 at 15:38

score 1 · Answer 3 · edited May 23 '17 at 10:28

You can do this in pure CSS, yes even for ancient browsers. This should cover IE5.5+:

body {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    background-image:url('images/final2.gif');
    background-size:cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/final2.gif',sizingMethod='scale');
}

The filter is for IE8-. Taken from here, and original spec found here.

EDIT

Aspect ratio not preserved using the filter ... very true, it does not scale preserving ratio the same way that background-size:cover; does. This is a very good article, though, about different methods to use:

http://css-tricks.com/perfect-full-page-background-image/

They provide multiple CSS-only, as well as jQuery, methods. One is bound to provide what you want.

The problem is the `filter` scales the image horribly and doesn't preserver the aspect ratio — ediblecode, Oct 11 '13 at 15:10
very true. updated my answer with a link to an article that describes multiple methods, hopefully one will be the answer he wants. :) — PlantTheIdea, Oct 11 '13 at 15:16

score 1 · Answer 4 · answered Oct 11 '13 at 15:17

I can't recommend highly enough using backstretch.js. I've used it for a lot of projects as there is no real solution to preserving aspect ratio of an image in CSS. If you're only supporting IE9+ then by all means, PlantTheIdea's answer is the best. But for anyone that is coming here and needs to preserve aspect ration for IE8- and if they need to use an <img> instead of background-image then use this great little plugin.

You can use it as a total background with just one line:

$.backstretch('https://img.jpg');

Or you can set it as the background on any element:

$("#demo").backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

You can also pass multiple images into the function and other parameters to create slideshows etc.

DEMO

score 0 · Answer 5 · answered Oct 11 '13 at 15:02

0

you need to set the image as a background-image

body {
    width: 100%; 
    height: 100%; 
    background: url('images/final2.gif') repeat;
}

you can use background-size to size the image appropriately (stretching it to 100%)

answered Oct 11 '13 at 15:02

user934902

1,184
3
15
33

score 0 · Answer 6 · answered Oct 11 '13 at 15:14

You might want to pop all your page content inside an element (or several elements), and give them a z-index higher than your background <img>.

E.g.

HTML

<body>
<img src="images/final2.gif" class="stretch" alt="" />
<main>
    <p>This is the first paragraph in the body of your new HTML file!</p>
    <!-- All page content goes in here. -->
</main>
</body>
</html>

CSS

main {
    position:relative;/* So that it behaves as if it were position:static, but still gets a z-index */
    z-index: 1;
}

How can I use an element as a background image with z-index?

HTML

CSS

6 Answers6

HTML

CSS