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 Coder
    Join Date
    Jul 2009
    Location
    Odense, Denmark
    Posts
    72
    Thanks
    4
    Thanked 0 Times in 0 Posts

    div-background to stretch vertically

    Hey guys,


    I've got a <div> (which is in the middle of my site), and I've designed a nifty background-image for it in photoshop. In effect, it's the standard box-with-rounded-edges-and-drop-shadow, but it looks good.

    I've tried different approaches to get this background image to work. I want it to stretch the the full length of the div - no repeats of course.

    I've found that with:
    Code:
    .content_div{
    background-image:url('../path/to/file/image.png') no-repeat;
    background-size:100%;
    }
    ... I can stretch it horizontally, so that no matter the original size of the image, it now fits the width of the div... but not the height for some reason. This means that if in photoshop I create the image with a height of 200px, then this is the height it always has, and the text in the div overflows it.

    If I create the image with a height of 800px, then it is to tall for the div (or the text therein) and it doesn't show the nifty, smooth round edges in the bottom of the div.

    Anybody got any ideas of what to do?

    Thanks in advance,


    //deafdigit
    Last edited by deafdigit; 10-25-2010 at 05:44 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Posts
    149
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Give site URL

    Please give us to your site URL so we can check and look you image and size
    And give you better solution.

  • #3
    New Coder
    Join Date
    Jul 2009
    Location
    Odense, Denmark
    Posts
    72
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yes, of course.

    There's no direct access to the site, so you'll have to go to here and put something in the left search field. That will lead you to /search.php. The div in question is the white one in the middle.

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    850
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Although not fully support in all browsers, you could try CSS 3 to resize background image as you need it.

    http://www.css3.info/preview/background-size/
    ☠ ☠RON☠ ☠

  • #5
    New Coder
    Join Date
    Jul 2009
    Location
    Odense, Denmark
    Posts
    72
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks Major Payne, you led me to a solution.

    It seemt that
    Code:
    background-size:100%;
    only relates to width. To get it to relate to height as well, the simple fix is:

    Code:
    background-size:100% 100%;
    A simple solution as always.

    Thanks again.


    //deafdigit

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    850
    Thanks
    11
    Thanked 79 Times in 77 Posts
    You're welcome. Always more than one way to "skin a cat"!
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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