Constraining Background Images within the Div's bounds

nomaeswonk

06-22-2010, 05:10 AM

Hello,

I am trying to assign a background image to a div that stays in the bottom-right corner of the div whether you scroll down or resize the browser window (with browser resize priority).

The only problem I run into is when the browser window is wider than the width of the div. The background image, follows the constraints of the browser window and NOT the div I assigned it to. As a result, the background-image doesn't stay within the constraints of the div.

CSS

html{
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
}
.wrapper{
width:600px;
margin: 0 auto;
border:1px dashed #666;
background-image:url(image.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:fixed;
}
h1{
font-family:Georgia, serif;
font-size:4em;
color:#222;
}
p{
width:36em;
font-family:Georgia, serif;
font-size:.75em;
line-height:1.5em;
color:#222;
}

HTML

<body>
<div class="wrapper">
<h1>Header</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
</body>

Anyone have any suggestions?

mbaker

06-23-2010, 10:11 AM

Delete background-attachment:fixed;

It is causing your image to be fixed to the bottom right hand corner of your browser window rather than the bottom right hand corner of your div.

nomaeswonk

06-23-2010, 05:28 PM

True, but I want the background image to be "fixed" to the bottom of the browser window at all times.

I want to be able to do something like this:

background-position-x: right scroll; /* (scroll or inherit or some value that keeps it within the div) */
background-position-y: bottom fixed;

Am I asking too much from CSS? I hope I am making sense..:(

mbaker

06-23-2010, 10:44 PM

Instead of background-position:bottom right; try background-position:center bottom;

nomaeswonk

06-25-2010, 06:13 AM

mbaker, thank you for your help. I believe I've found a solution, feel free to comment..I'd be interested in hearing what you think of the code below.

/* CSS */

html{
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
}
.wrapper{
width:560px;
margin: 0 auto;
border:1px dashed #666;
}
.wrapper img{
position:fixed;
width:200px;
margin-right:-280px;
right:50%;
bottom:0;
}

// HTML

<div class="wrapper">
<img src="image.jpg" alt="" />
</div>

mbaker

06-26-2010, 08:34 PM

That seems to work, except I thought you wanted the image to be a background image.

If you do want your image in the background then you probably want to add something like: z-index:-1; to your CSS for .wrapper img