Resizing Background Images with CSS

HTML & CSS
1

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! :slight_smile:

2

You need to use an inline image, background-size will be introduced in CSS3 however.

3

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