0

I am trying to set background-image on a table cell to 'contain' a png image. The image is about 1400 pixels wide. It's just showing a small portion of image. I thought it would re-size to proportion. Using IE9. Please advise. 

<head>
<style>
.yes
{
 background-image: url(fullfamily.png);
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-size: contain;
 -moz-background-size: contain;

 /* these two don't work */
 -webkit-background-size: contain;
 -o-background-size: contain;
  }
  </style>
  </head>

 <body><table width="500" height="500" ><tr><td class="yes"></td></tr></table>
 </body>
Matthew Somers
  • 27
  • 2
  • 9

1 Answers1

0

contain

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

The cover property may be what you're looking for - it will ensure that the entire image is visible, essentially cropping it if it's wider or taller than the available space:

cover

This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

https://developer.mozilla.org/en-US/docs/CSS/background-size

Community
  • 1
  • 1
Kelvin
  • 5,227
  • 1
  • 23
  • 36
  • But I don't think I want the image cropped. Maybe I'm missing the proper html doctype. – Matthew Somers Nov 08 '12 at 02:30
  • Ah, apologies - I misunderstood your question. The HTML5 doctype is very simple: ` `. If that doesn't solve the problem, can you add a screenshot and/or a jsfiddle.net demo to your question? – Kelvin Nov 08 '12 at 02:34
  • `contain` **should** work in IE9, but it might be worth trying the solutions mentioned in http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie – Kelvin Nov 08 '12 at 02:36
  • You can view source to see what I'm trying to do. Thanks. – Matthew Somers Nov 08 '12 at 03:34
  • `background-attachment:fixed` seems to break `background-size:cover` and `background-size:contain`, for me - I'm stumped as to why, though. I came across a couple of other people experiencing the same issue, but no sign of a solution... – Kelvin Nov 08 '12 at 03:45
  • Thanks. Re-updated w/ out fixed. Not sure if displaying properly. – Matthew Somers Nov 08 '12 at 04:05