Адаптивный веб-дизайн: "Как изменить размер фонового изображения в соответствии с размером окна браузера с помощью CSS"?

Question

Я создаю сайт, на котором изображения всех моих продуктов будут изменены в соответствии с размером окна браузера, поэтому я написал несколько медиа-запросов, в которых я использовал одно большое изображение и изменил его размер в другом размере окна, но у меня есть одно изображение, которое я использовал в фон, как я могу изменить его размер? Я хочу поддерживать его во всех браузерах, а также в IE7 и 8.

HTML

<div></div>

CSS

div{ 
background: url("http://canadianneighborpharmacy.net/images/cnp/discount_20.png") 
no-repeat scroll 0 0 transparent;
position:absolute;
width:45px; 
height: 45px; }

Мой живой код здесь: - http://jsfiddle.net/jamna/DdxbQ/19/ здесь у меня есть основное "изображение продукта", которое теперь изменяется в соответствии с размером окна браузера (в моей скрипке я не писал код для пока изменяю размер изображения продукта, я только показываю, какое изображение я хочу изменить сейчас), но у меня есть другое изображение "метка экономии денег", которое находится на фоне "промежутка", который я хочу изменить одновременно с изображением продукта.

Answer 1

Для этого вы можете использовать background-size имущество

Подобно:

body{
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}

Есть и другие свойства, такие как contain & 100% 100%

проверьте эту ссылку http://css-tricks.com/3458-perfect-full-page-background-image/

для IE вы можете использовать filter

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

РЕДАКТИРОВАТЬ: вы живите код правильно, но вы определяете ширину и высоту в процентах, как это

http://jsfiddle.net/sandeep/ayUKz/3/

& ты можешь использовать img отметьте также как это http://jsfiddle.net/sandeep/RMGnM/

img{
position:absolute;
width:100%;
height: 100%}

РЕДАКТИРОВАТЬ:

может быть, что вы хотите http://jsfiddle.net/sandeep/DdxbQ/20/

проверьте эту ссылку также http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html