Forums

WordPress › Support » Themes and Templates

Using "100% x 100%" Background Image (6 posts)

  1. Anonymous
    Unregistered
    Posted 3 years 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...

  2. chaoskaizer
    Member
    Posted 3 years ago #

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

  3. drewactual
    Member
    Posted 3 years 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 250x250 */
    }

  4. Anonymous
    Unregistered
    Posted 3 years 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.

  5. bunsandchouchou
    Member
    Posted 3 years ago #

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

    Thanks!

  6. ikthius
    Member
    Posted 3 years 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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.