Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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.

    CSS
    Code:
    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
    Code:
    <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?
    Last edited by nomaeswonk; 06-22-2010 at 05:29 AM. Reason: Additional code supplied

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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..
    Last edited by nomaeswonk; 06-23-2010 at 05:31 PM. Reason: notations

  • #4
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Instead of background-position:bottom right; try background-position:center bottom;
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • Users who have thanked mbaker for this post:

    nomaeswonk (06-25-2010)

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Solution found

    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.
    Code:
    /* 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;
    }
    Code:
    // HTML
    
    <div class="wrapper">
        <img src="image.jpg" alt="" />
    </div>

  • #6
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

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