SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background graphic around photos

    Hi Folks,

    I have a number of photographs on my site, I'd like to surround them all with the attached graphic, like a photo frame.

    The photos are different sizes, so it would be good if the graphics were expandable.. Could I use a techique similar to spiffy corners, or is there another way I can do this using css?



    Many thanks
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could do it in the usual slicing way but it may be awkward to match the edges as they are not uniform.

    I wonder whether it may be easier to use a foreground image for the frame and make it stretch to fit the image. The image is basically black so the loss of quality shouldn't really be an issue.

    I'll have to try and make a demo and see if it will work

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The trick (or at least one way to do it) is to break that background image into three sections—a top, a middle section that can repeat, and a bottom. If the middle section can repeat seamlessly, then that container can expand to fit any photo size.

    So, assuming you take that approach, create three divs: one that holds the top part of the background; one that has the middle part of the background as a repeating background image, and which also contains the actual photo; and then a bottom div that holds the bottom part of the background image.

    Edit: sorry, posted over the top of Paul.

  4. #4
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You could do it in the usual slicing way but it may be awkward to match the edges as they are not uniform.

    I wonder whether it may be easier to use a foreground image for the frame and make it stretch to fit the image. The image is basically black so the loss of quality shouldn't really be an issue.

    I'll have to try and make a demo and see if it will work
    That sounds ideal, I'm not too fussed about the quality of the image like you say. Thankyou

  5. #5
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So far I have this:

    Test Page

    Its close, but I'd like the background image to scale to the size of the div. Not to bothered about quality of the background image, any pixelation would add to the effect anyway.

    Any help much appreciated.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is how I'd do it.

    The background will fit any image as required. It's pretty straight forward (apart from ie6 and 7) and just scales the image to fit the div with absolute positioning.

    (You could use percentage padding if you want the frame border width to get smaller or thicker depending on image size.)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Did you manage to get this working or do you need some more help

  8. #8
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI Paul,

    Thanks very much I've got it working now.

    Many thanks again your a star!


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
  •