PDA

View Full Version : Constraining Background Images within the Div's bounds



nomaeswonk
Jun 22nd, 2010, 06: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
Jun 23rd, 2010, 11: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
Jun 23rd, 2010, 06: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
Jun 23rd, 2010, 11:44 PM
Instead of background-position:bottom right; try background-position:center bottom;

nomaeswonk
Jun 25th, 2010, 07: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
Jun 26th, 2010, 09: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