SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Body Background Image

    My page's Body tag has a large background image. Is there a way to have the tag shrink to fit the page's content? The page expands to show all the background image. Any help would be great.

    Code CSS:
    background-image:  url(images/background.gif);
    background-repeat: no-repeat;
    background-position: left 81px;
    width: 750px;
    overflow: hidden;

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no way to do this with just CSS. The only way is to have different images for different sizes, then use javascript to detect the content size and choose the BG image accordingly. Of course, you can use a "repeating" BG image, but that depends on the type of image you're using.

    So in short, no, you can't stretch or resize a BG image in CSS.

    Louis

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Louistar View Post
    So in short, no, you can't stretch or resize a BG image in CSS.
    Thanks for your quick reply. I should clarify that I seek to clip the background image, not stretch or resize it.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you can't do that with the BODY tag. You would have to use a DIV tag that is containing your site, then ensure that it does not have a width or height set, so it will stretch according to content.

    Of course, this is a rudimentary way of explaining this, as there would be other factors involved depending on your layout.

    Louis

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Louistar View Post
    You would have to use a DIV tag that is containing your site, then ensure that it does not have a width or height set, so it will stretch according to content.
    That doesn't seem to work in Firefox when I use nesting DIVs - the background image is not visible. I tried deleting the image and using a color background on the container DIV and that has the same problem.

    Code CSS:
    #container {
    	background-image: url(images/background.gif);
    	background-repeat: no-repeat;
    	background-position: left top;
    	width: 750px;
    	position: relative;
    }
    #body {
    	width: auto;
    	clear: both;
    	background: blue;
    	position: relative;
    	display: block;
    }
    #bigmenu {
    	width: 50px;
    	float: left;
    	background: purple;
    	position: relative;
    	display: inline;
    }
    #info {
    	width: 50px;
    	float: left;
    	background: orange;
    	position: relative;
    	display: inline;
    }
    #side {
    	width: 50px;
    	background: green;
    	float: right;
    	display: inline;
    }

    Code HTML4Strict:
    <div id="container">
      <div id="body">that
        <div id="bigmenu">
          <p>this</p>
          <p>&nbsp;</p>
        </div>
        <div id="info">that
          <p>&nbsp;</p>
        </div>
        <div id="side" >other</div>
      </div>
    </div>

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox needs "overflow: hidden" on the container, and then it should work. You might want to do research on Firefox's collapsing container problem (which isn't really a problem, just a correct rendering compared to other browsers), for more info and to ensure you're using the right code. But "overflow: hidden" should resolve it.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - the overflow style fixed the problem. Would you explain why that is the correct rendering? Years ago I was fuming at Netscape Navigator 4's object model, even going so far as to produce separate IE/NN home pages for a site to make the dropdown menus work correctly. I would never have expected Mozilla to produce a highly regarded browser.

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't remember the technical reasons why FF's treatment of the conatainer is correct, but you can probably find the explanation on Sitepoint's CSS Reference. I have the hard copy and I'm pretty sure there's something in there about it. Or just google it.

    Louis

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Thanks - the overflow style fixed the problem. Would you explain why that is the correct rendering?
    Floats are removed from the flow.

    This means that if you place only floats inside a container then the container in fact contains nothing and therefore will have no height and will not show any background because it has no height.

    To ensure a background extends around a float you have to either clear the floats using the "clear" property on an element after the float, or change the containers behavior so that it recognizes its floated content.

    Using the property "overflow" (other than visible) makes the container take notice of its so called invisible content (like floats) and will then automatically encompass the floated children.

    You could also float the main container and then it would also contain its floated children automatically but of course that changes the behaviour of the container itself.

    Contrary to what most people believe IE6 doesn't automatically contain floats. A container in IE6 will only contain its floated children when the container has "layout". In most cases the container has a width and this is enough to force IE into "haslayout" mode and makes the container encompass its floated children.

    Also see the FAQ on floats for more info on clearing .


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
  •