0

I have an image which is 250px wide by 100px high. I want to use this css rule:

background-size: 125px 50px;

How do I do it? I don't want to know how to make an image stretch to fill the div, or the browser window, or whatever else can be done with background:cover. I want the background image to be a specific size, irrespective of whether that may be larger or smaller or whatever compared to the containing div. Yes, it does (unfortunately) need to be a background image. It needs to work in IE7 and 8; background-size already covers all the other browsers.

Benubird
  • 18,551
  • 27
  • 90
  • 141
  • 3
    Resize your background image to the required dimensions and use `no-repeat`? – Jon Feb 11 '13 at 10:20
  • @Jon, that is what I'm going to do, in this case, but I feel like the question is still worth asking - e.g. if the target size is being dynamically generated by php, I can't by resizing the image all the time. – Benubird Feb 11 '13 at 10:24
  • 1
    When you keep piling on restrictions (must work in old IE, must be a `background-image`, target size not known in advance, etc) at some point you simply run out of solutions or the remaining solutions (e.g. using JS) start becoming questionable. You can't fight the "laws of physics". In any case, your comment introduces new information not included in the question. Please don't do that. – Jon Feb 11 '13 at 10:30

2 Answers2

0

Can't be done. Background-size is a css3 property, not suported in ie7 and ie8.

erik
  • 180
  • 2
  • wrong. While it's not supported, it can be done. http://stackoverflow.com/questions/2991623/how-do-i-make-background-size-work-in-ie – ProblemsOfSumit Dec 04 '13 at 13:54
0

This question got answered intensively here:

How do I make background-size work in IE?

The most popular fix is this background-size polyfill:

https://github.com/louisremi/background-size-polyfill

Community
  • 1
  • 1
ProblemsOfSumit
  • 19,543
  • 9
  • 50
  • 61