Using “100% x 100%” Background Image

733686
17 years, 11 months ago
Hi,
I’m attempting to edit the kubrick template to display a background image that fits the browser no matter what the screen resolution is.
I’ve attempted to edit style.css in this fashion, adding:
```
#bg-im {
	position: absolute;
	z-index:1;
	width:100%;
	height:100%;
}

#bg {
	margin-left: -100%;

}
```
And then I dropped a div tag into the header.php file:
```
<body>
<div id="bg">
<img id="bg-im" src="<?php bloginfo('stylesheet_directory'); ?>/images/lbbyhaba.jpg">
</div>

<div id="page">
.........
```
And then updating the z-index of every other style id I could find to try to make the content appear in front of the background image.

I didn’t really like using the margin-left: -100%…I honestly have no idea what is going on here. I just used that because it put the image where I wanted it.

My real problem is that no matter what I use for z indices, my “background image” displays in front of the wordpress content.

Thanks for any help…complete newb here…

Viewing 5 replies - 1 through 5 (of 5 total)

chaoskaizer
(@chaoskaizer)

17 years, 11 months ago

its kind of confusing what you trying to do. do you have any example links or something.

drewactual
(@drewactual)

17 years, 11 months ago

going about it a little wrong imHo….

this will work based on the limited info:

add to css:

#bg {
position: absolute;
top: 0; /*or the vertical coordinate you need*/
left: 0; /*or the horizontal coordinate you need*/
width: 25%; /*or the width of the container, this is important!*/
height: 25%; /*same reason as above*/
}

#bg img {
width: 50%;
height:50%;
/*this will scale any html images to the page in %’s
or reduce a pic- say 500px x 500px to 250×250 */
}

Thread Starter 733686

17 years, 11 months ago

Hi,
I appreciate the help. Sorry if I was unclear.

I’m trying to do something similar to what this guy has done:
http://www.cssplay.co.uk/layouts/background.html

Using z-index and a div container to place an image at 100% by 100% behind the wordpress blog so that it will fill a user’s browser (without repeat) no matter what their resolution is.

Does that help clarify?

Thanks.

bunsandchouchou
(@bunsandchouchou)

17 years, 9 months ago

Hi, did you ever get an answer for this? We want to do the same thing here: http://www.quixotebroadcasting.com/blog/

Thanks!

ikthius
(@ikthius)

17 years, 9 months ago

why dont you make your css for the body background???

this will make the image cover the qhole screen on background, then if you want see through divs, either make transparent images, or, by checking out the cssplay site, tell a div to go opaque.

hope this helps