...

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



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

nomaeswonk
06-25-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
06-26-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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum