SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    background image covering half the width of my divs

    The background image is covering half the width of the red/blue divs and I can't separate them. How do I do that?

    Link:
    http://www.lincolnsrealdeals.com/test_120621.php

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    What are you actually trying to do there? It's not clear what layout you are aiming for.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm just trying to get the red/blue divs to float against the div with the repeating background image. I thought floating everything to the left would work but no go. How do I get the red/blue divs completely to the left of the div with the repeating background image?

    I'd like to completely use float. Is that possible?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    How do I get the red/blue divs completely to the left of the div with the repeating background image?
    To the left or to the right? I assumed you wanted the div with the bg image to the left.

    Quote Originally Posted by nichemtktg View Post
    I thought floating everything to the left would work but no go.
    Indeed, that's the way to do it. At the moment, the div with bg is position:absolute, which takes it out of the document flow. If you remove that and set all divs to float: left, they won't overlap. The div with the bg will sit left and the other two divs will sit to the right of that. You'll also have to set a height on the div with the bg image.

    Hoever, in general, this is not a good method for layout. If you are going to have columns, wrap each column in a div so that everything in the column stays together.

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I understand.

    When I float everything to the left, #left_bg disappears. Firebug says it's not there.

    at least position:absolute; makes #left_bg appear.

    I guess I could use margin: 0px 0px 0px 200px; but that seems like cheating, but maybe it's the point of this exercise.

    As in :
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #wrapper {width:650px; min-height: 400px; float left;}
    #left_bg {width:200px; position:absolute; left:0; top:0; height:100%; background: url(lincoln-nebraska-street.jpg) repeat-y left top;}
    
    </style>
    </head>
    
    <body>
    
    <div id="wrapper">
    <div id="left_bg"></div>
    
    <div style="height:200px;width:400px;background:red;margin: 0px 0px 0px 200px;"></div>
    <div style="height:200px;width:400px;background:blue;float left;"></div>
    <div style="height:200px;width:400px;background:red;float left;"></div>
    <div style="height:200px;width:400px;background:blue;float left;"></div>
    
    
    
    
    <!-- all other html in here -->
    
    </div>
    
    
    
    </body>
    </html>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    When I float everything to the left, #left_bg disappears.
    I mentioned above that you'll need to give left_bg a height, as otherwise it has not height as it has no actual content. I don't really like having empty divs just for a bg image, personally. There is probably a better way, depending on the overall design. for example, a wrapper div for the whole lot might have left padding for the background image to sit in.

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Agreed.

    I'm just investigating why some declarations work the way they do.

    Back on point, doesn't height:100% in #left_bg mean #left_bg 's height is inherited from #wrapper ?

    My objective is to get a background repeat in #left_bg equal to the height of #wrapper.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    doesn't height:100% in #left_bg mean #left_bg 's height is inherited from #wrapper ?
    No, unfortunately height: 100% is a misleading concept. It only works if the container (in this case the wrapper) has a defined height (such as in pixels) which isn't very practical. You would have to set a height on the left_bg div of something like 800px. But that's not a very nice thing to have to do. that's why I'd think differently about constructing the layout. Don't have a div just for a background image.

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Then my I'm back where I started.

    How do I get an image in the div that uses #left_bg to repeat to a height equal to the height of the div that uses #wrapper?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    Then my I'm back where I started.

    How do I get an image in the div that uses #left_bg to repeat to a height equal to the height of the div that uses #wrapper?
    If I'm understanding rightly, I would suggest you place the background on the wrapper itself, give the wrapper a left padding of 200px, set the background image to repeat-y and crop the background image to a width of 200px. (I don't see the point of having the image wider than 200px if you only want to see the left site of it.

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Almost there except no repeat.

    Why do you think it's not repeating?

    Current code:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #wrapper {width:200px; position:absolute; left:0; top:0; height:100%; background: url(lincoln-nebraska-street.jpg) repeat-y left top;padding-left:200px;}
    </style>
    </head>
    <body>
    
    <div id="wrapper">
        <div style="height:200px;width:400px;background:red;"></div>
        <div style="height:200px;width:400px;background:blue;"></div>
        <div style="height:200px;width:400px;background:red;"></div>
        <div style="height:200px;width:400px;background:blue;"></div>
    </div>
    
    </body>
    </html>

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    Almost there except no repeat.

    Why do you think it's not repeating?
    Looks like it should repeat, but it's hard to tell. Would you mind updating the page you linked to above so we can see this live? Then it's easy to tell what's going on.

  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank-you for helping me.

    Here's the link:
    http://www.lincolnsrealdeals.com/test_120621b.php

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    OK, cool. The image is repeating, though, so are you happy with it now, or is there still an issue?

  15. #15
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's the image that's not repeating.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    It's the image that's not repeating.
    It is repeating, though. It's just going down the side, because of repeat-y. If you want it to repeat across the whole page, you'll have to remove the repeat-y, the width and the position: absolute;

    Edit:

    Hm, you may not see that the image is repeating if your screen is not very tall, but on my large screen, the image repeats at least twice, as it is quite tall. But on a small screen, 100% height is not all that tall.

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,505
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)

    Try this out for size.

    Is this what you are seeking?
    SandBoxPage.txt

  18. #18
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    i think I see the problem.

    The image IS repeating, but you don't see ti because the container is not tall enough.




    try this:
    html, body{height:100%;}
    #wrapper{min-height:100%}

  19. #19
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank-you.

    Any idea why it's not repeating to the bottom of the last blue div?

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    Thank-you.

    Any idea why it's not repeating to the bottom of the last blue div?
    It's repeating to the bottom of the page for me. Do you want it only to go as far as the last blue div? You need to be really clear about what you want to see here, as it's still not very clear. If we know exactly what you want to see on the page, we can just tell you how to do it.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    Thank-you.

    Any idea why it's not repeating to the bottom of the last blue div?
    Because of the reasons already mentioned twice above (see the solution in post #18)

    You have given the container a height of 100% and therefore it can never grow any more than 100% which in the case of your absolute element is one viewport height. As Ralph mentioned height:100% is not something that you will ever need to apply apart from on html and body when you want a min-height:100% wrapper.

    I would remove the absolute positioning also as you don't need it and will preclude you from adding any content underneath (such as a footer if required).


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
  •