Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Hey everyone;

    I recently started to redesign my site using only css for layout, and I hit a problem with the background images I want to use.
    The site is going to be completely elastic, meaning it uses ems for all its size values so the entire site will rescale if the user changes his/her text size to something other than the default, instead of just the text.
    Problem is, when I set a background image to one of my divs, and site gets rescaled to something other than default, the image will jjust tile. Is there any way to get background images to resize with the div?

    And I cannot insert a <img> inside the div, because content is going to be going on top of the bgimage.

    Thanks!
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  2.  

  3. #2
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    well i did manage to find a workaround for my problem, although I would still like to learn how to do it with background-images.
    What i did was, I created an extra div with an <img> tag inside containing the background image. I then made both the new div and the div I am putting my content in absolutely positioned inside the container div with the content div having a z-order of 2 and the bgimage div a z-order of 1, so the content will show on top of the bg image.

    Only drawback is that now all the divs following these to have to also be absolutely positioned, instead of just following the normal flow of the document.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  4. #3
    Member Borior's Avatar
    Join Date
    Jul 2003
    Posts
    30
    Member #
    2253
    I'm not sure, but i imagine that if used something like this it might work.

    Code:
    /* -- ( XHTML ) ------------ */
    
    <div id="wrapper">
       <div id="mydiv">
         My content and stuff
       </div>
    </div>
    
    /* -- ( CSS ) ---------------- */
    
    #wrapper {
         width: 10em; /* or whatever you want */
         height: 3em; /* ditto */
    }
    
    #mydiv {
        width: 100%;
        height: 100%;/* this may not be needed ... try removing this if it doesn't work */
        background: #fff url(images/myimg.png) no-repeat top left;
    }
    What the background property says is the following:
    • #fff : base background color
    • url(images/myimg.png) : the image you want as the background
    • no-repeat : don't tile the image
    • top left : align the image with the top left of the container

    The width and height (both at 100%) should be read by standards-compliant browsers as 100% of the container (#wrapper).

    I hope this works ... I haven't tried it myself, but it should be what you're looking for.

    Borior

  5. #4
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Thanx for the reply Borior, put this is no good.

    Even though the div (#mydiv in your case) will scale to the size of its context box (#wrapper) and the background image is set not to repeat if its div is larger than the original image size, the background image will not rescale with the div (#mydiv), instead it will just stay in the top left corner of the div and your white background will appear underneath it and to its right, whenever the div is bigger than the image size. I know, i thought it might work too, but I tried it and it doesn't

    So, the only solution I found, as mentioned in my previous reply, is to insert a <img > tag in another div in the html with your background image, and absolutely position this UNDER your content div, using the z-order property. Of course, your content div cannot have a background color, or the div underneath will not show through.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  6. #5
    Member Borior's Avatar
    Join Date
    Jul 2003
    Posts
    30
    Member #
    2253
    Well i'm sorry this didn't work. It might be worth setting the background-color to transparent - [minicode]background-color: transparent;[/minicode]. Some browsers may not render it properly otherwise.

  7. #6
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    good idea, will do. At least this technique seems to render the same in the major browsers i checked it in (IE6, NS6, Mozilla, Opera, and FIrebird).

    Except for one thing, in opera, they is always a top-margin on all my pages, is there anyway to fix this with CSS? Does the containing div just need to be explicitly given a top-margin property of zero?

    Thanks
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  8. #7
    Member Borior's Avatar
    Join Date
    Jul 2003
    Posts
    30
    Member #
    2253
    If you don't want a top-margin ... always specify [minicode]margin-top: 0;[/minicode] or [minicode]margin: 0 0 0 0;[/minicode] just to ensure that the site does what you want it to do in all browsers.

    Borior


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:22 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com