SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background image in div stretches.

    Hi everyone,

    I've created a "brushed metal" look background in photoshop and would like this to be the background for a div. The problem is that the div will contain text of varying amounts and so therefore the height of the div will change according to how much text it contains. This would mean that the background image would stretch and become distorted as the container div stretches.

    It seems that it's not possible to achieve this background image effect due to the variable height div, but if there is actually some workaround can anyone tell me what the solution might be?

    Appreciate any advice offered.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    background-images applied with CSS don't stretch, they only tile.
    This may help you understand the limitation and possibilities of background images and CSS..
    http://www.yellowshoe.com.au/tips/ro...sign-elements/

  3. #3
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply,

    I don't think that the brushed metal image I created would work as a tile so does this mean that it's not possible for me to achieve the desired effect?

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it won't tile, then you can make the image larger than you would expect the div to be - it then just gets cropped to the required size.

    Alternately, as getting an image to tile seamlessly in both directions is not easy, maybe the graphic can be made wide and squat to tile vertically.

  5. #5
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So would the image be in an img tag within the div as opposed to a css background-image? If this is the case then wouldn't I need to set the containing div's height to auto or 100%, and if I do this won't the div automatically stretch to the height of the image and therefore not be cropped?

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Post the image and we'll be able to see what you are wanting.
    http://www.imageshack.us/

  7. #7
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've uploaded the image if you can take a look?


  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    OK, I would make a similar image that can tile horizontally, and I would make it much taller than that - depending on the amount of text you are wanting it to cover.
    I would align this image to the bottom of the div and make it tile horizontally.
    So at the bottom of the div would be the darkest part of the image.

  9. #9
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess that's the problem - I don't know how to make an image like this tile. I just made a selection of the image (the entire length and a small width) then duplicated it horizontally but it didn't tile very well. Is there some sort of technique I need to know to make it tile correctly?

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As the image is quite large (which you should try and optimise a bit more to get the file size down, even if it means sacrificing the quality a little), it can be applied as a background image with background-position: right bottom; style - this will position the background to get the most out of the gradient, and the div will crop it depending on size.

  11. #11
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - I'll give this a try, but also can you tell me what the difference is between background-image and background-position in CSS?

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    background-image is the url of the image.
    background-position says where abouts within the element you want to position that image.


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
  •