Results 1 to 9 of 9

Thread: CSS Division Background Image Positioning

  1. #1
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Division Background Image Positioning

    Ok. I have a web site I am working on and it is done in a two-column layout with a header across both columns at the top, a lefthand menu sidebar and a righthand division for the main content. I have a background image that I would like to show behind the main content only. I would like it to be fixed (not scroll with the content).

    The problem is - when I do not fix the background, it centers on the correct division. When I do add the "fixed" code to the CSS, it jumps to positioning on the body. I would like the background to remain centered (horizontally) with the content division and allow the content to scroll over it... I would like it to remain centered (horizontally) when a user resizes their browser and not move out from under the content division.

    I have tried center top, percentages and absolute positions for the background-position.

    In other words - I want a background for a specific division only, but I would like it "fixed" and it won't work.

    My code looks like this:

    #middle_column { float:left; width:75%; margin:0px 20px; color:#660000; font-size:16px; text-align:justify; }

    .post { background:url(../images/dove_25.gif) no-repeat center top fixed; margin-bottom:35px; line-height:18px; }

    .post_body { padding:5px 15px; }

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    A link the a live demo would be much appreciated - there's nothing like a fully-working, visual reference to kick-start the troubleshooting.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    http://csc.deamaree.com/

    Thank you to anyone who can help figure this out.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Sorry, I'm still finding your explanation a little hard to get my head around.

    Can you try taking a few screen caps of the different effects youre getting please?

    Or, create 2 versions of the page so we can easily see the difference?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok. Let's see if this helps.

    http://csc.deamaree.com

    This site has the background "fixed" for the division class "post."

    http://csc2.deamaree.com

    This site has the background not "fixed" for the division class "post."

    Both of them have "center top" for the position. The first one allows the image to remain stationary while you scroll the division content over it, but it doesn't center the background under the division like I'd like it to. The second one, centers the background, but the content does not scroll over it like I'd like it to.

    If I place the background with an absolute position and "fixed" it will scroll over, but the background will not be in the right position if the browser window is resized by the user.

    I just want it to center horizontally under the division (the actual content of the page) AND remained fixed so the content scrolls AND remain part of that division when the window is resized....

    Thanks again.

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I think I understand - try looking at things slightly differently and changing your image dimensions like this one; http://i52.tinypic.com/119rt6e.gif
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. #7
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm not really sure what you mean. I tried resizing the image and moving to the background my "everything" division, but I still have the issue that when the image is "fixed" it moves when the browser window is resized... it does not stay put... it will not stay underneath the division I want it to stay underneath.

  8. #8
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I figured out how to (mostly) do what I wanted. Thanks for all the help.

  9. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    You misunderstand - I already prepared an image with revised dimensions. Basically its the same image you used but with the dove pushed into the bottom right corner and extra background width and height added to the top and left. This puts the dove back centrally underneath the .post div without needing to change the CSS.

    So, used in conjuction with your fixed background CSS at http://csc.deamaree.com you just need to replace your own dove image with the one I made for you: http://i52.tinypic.com/119rt6e.gif and everything is fine. It stays underneath the div that you want it to be under, its centered and doesnt move when the window is resized.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Bookmarks

Posting Permissions

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