[RESOLVED] Constraining Background Images within the Div's bounds

**nomaeswonk** · 06-21-2010, 11:34 PM

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.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Background Position Test</title>

<style type="text/css">
html{
    height:100%;
}
body{
    margin:0;
    padding:0;
    height:100%;
}
.wrapper{
    width:600px;
    height:100%;
    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;
    color:#333;
    font-family:Georgia, sans-serif;
    font-size:.75em;
    line-height:1.5em;
}
</style>
</head>

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

Anyone have any suggestions?

**Fang** · 06-22-2010, 12:53 AM

Remove background-attachment:fixed;
http://www.w3.org/TR/2010/WD-css3-ba...und-attachment

**nomaeswonk** · 06-22-2010, 01:12 AM

Thank you for the reply Fang.

If I remove background-attachment:fixed, then the background image doesn't stay flush with the bottom of the browser window.

I want it to stay flush with the bottom of the browser window and flush with the right side of the div I'm applying it to (or I'd settle for if the browser width was less than the div width, flush to right side of the browser window).

Is there a way to assign the background-image's y-value to the bottom of the browser and it's x-value to the right side of the div? I think that's basically what I am looking for.

**Fang** · 06-22-2010, 01:32 AM

Not as a background image. Use a positioned image.

Code:

    <div class="wrapper" style="position:relative;">
        <h1>Header</h1>
        <div>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
            <p>Paragraph 3</p>
            <p>Paragraph 4</p>
            <p>Paragraph 5</p>
            <p>Paragraph 6</p>
        </div>
        <img style="position:absolute;bottom:0;right:-100px" alt="image" src="image.jpg" height="50" width="100" />
    </div>

**nomaeswonk** · 06-22-2010, 01:39 AM

Ahh, okay. I'll give this a shot and let you know how I make out.

**nomaeswonk** · 06-22-2010, 01:51 AM

Okay, now it is aligning to the right side of the div properly, but how do I get the bottom of the image to align to the bottom of the browser window?

**Fang** · 06-22-2010, 04:33 AM

The example does that.

**nomaeswonk** · 06-22-2010, 02:26 PM

Okay, I must be doing something wrong, because the bottom of the image only stays aligned to the bottom of the browser window if I scroll to the bottom of the page and then expand the browser window. If I try to shrink it, it doesn't move at all along the y-axis.

Here's my code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Image Position Test</title>
	<style type="text/css">
	html{
		height:100%;
	}
	body{
		margin:0;
		padding:0;
		height:100%;
	}
	.wrapper{
		width:560px;
		margin: 0 auto;
	/*	padding:0 0 0 3.125em; */
		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;
		font-style:italic;
		color:#222;
	}
	p{
		width:36em;
		color:#333;
		font-family:Arial, sans-serif;
		font-size:.75em;
		line-height:1.5em;
	}
	</style>
</head>

<body>
	<div class="wrapper" style="position:relative;">

			<h1>Header</h1>
			<div>
				<p>Paragraph 1</p>
				<p>Paragraph 2</p>
				<p>Paragraph 3</p>
				<p>Paragraph 4</p>
				<p>Paragraph 6</p>
				<p>Paragraph 7</p>
				<p>Paragraph 8</p>
			</div>
			<img src="image.jpg" style="position:absolute; bottom:0; right:-500px" alt="image" width="500" height="500" />
	</div>
</body>
</html>

I've tested it on IE8, FF, Chrome on PC and FF, Safari on Mac with all the same results. Is there something I am missing?

**Fang** · 06-24-2010, 09:43 AM

The height and position has been left-out:

Code:

	.wrapper{
        height:100&#37;;
        position:relative;

**nomaeswonk** · 06-25-2010, 12:04 AM

Here is my code:

Code:

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 Code:

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

Fang, thanks for take the time to help me figure this out!!

Thread: [RESOLVED] Constraining Background Images within the Div's bounds

Thread Tools

Display

[RESOLVED] Constraining Background Images within the Div's bounds

Got it figured out

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions