SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resizing Background Images with CSS

    Hi, allow me to try to explain what I'm trying to acheive.

    I want to dynamically pull in images as backgrounds to my template layout, however these images could be of any size. Using only CSS, I would like to resize these background images to ensure that:

    - The image never appears more than 200px wide
    - The image never appears more than 200px tall
    - Images smaller than 200x200 are not resized at all
    - Aspect ratio is always maintained

    Any ideas what the nescessary code would be?

    Thanks!
    Find first class made to measure blinds at Urbane Blinds!

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to use an inline image, background-size will be introduced in CSS3 however.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - I realise this is a bit of a bump but this was something that I'd left until the end of my site's development.

    As per Alle's post above, if I were to use an inline image, how would I go about acheiving my objectives?

    - The image never appears more than 200px wide
    - The image never appears more than 200px tall
    - Images smaller than 200x200 are not resized at all
    - Aspect ratio is always maintained
    Find first class made to measure blinds at Urbane Blinds!


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
  •