www.webdeveloper.com
Results 1 to 10 of 10

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

  1. #1
    Join Date
    Mar 2006
    Posts
    11

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

    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?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Remove background-attachment:fixed;
    http://www.w3.org/TR/2010/WD-css3-ba...und-attachment
    Last edited by Fang; 06-22-2010 at 12:59 AM.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Mar 2006
    Posts
    11
    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.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    Last edited by Fang; 06-22-2010 at 01:40 AM.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Mar 2006
    Posts
    11
    Ahh, okay. I'll give this a shot and let you know how I make out.

  6. #6
    Join Date
    Mar 2006
    Posts
    11
    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?

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The example does that.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  8. #8
    Join Date
    Mar 2006
    Posts
    11
    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?

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The height and position has been left-out:
    Code:
    	.wrapper{
            height:100&#37;;
            position:relative;
    At least 98% of internet users' DNA is identical to that of chimpanzees

  10. #10
    Join Date
    Mar 2006
    Posts
    11

    resolved Got it figured out

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles