8

I am creating a site where my all products images will be re-size according to browser window size so i wrote some media queries where i used one big image and re-sized it in different window size but i have one image which i used in background , how i can re-size it? I want support it in all browser also in IE7 and 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; }

My live code is here :- http://jsfiddle.net/jamna/DdxbQ/19/ here i have a main "product image" which is now resizing according to browser window size(in my fiddle i didn't write code for resizing product image yet,i am only showing which image i want to resize now ) but i have a another "save-money label" image which is in background of a "span" i want to re-size simultaneously with product image.

Andy Giesler
  • 351
  • 5
  • 13
Jamna
  • 2,561
  • 7
  • 28
  • 22

1 Answers1

21

for this you can use background-size property

Like :

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

there other properties like contain & 100% 100%

check this link http://css-tricks.com/3458-perfect-full-page-background-image/

for IE you can use filter

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

EDIT: you live code is right but you have you define width & height in percentage like this

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

& you can use img tag also like this http://jsfiddle.net/sandeep/RMGnM/

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

EDIT:

may be that's you want http://jsfiddle.net/sandeep/DdxbQ/20/

check this link also http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • I want support it in all browser in IE7 and 8 too – Jamna Oct 05 '11 at 12:05
  • 1
    @jitendra; it's support all browser accept IE for IE you can use filter – sandeep Oct 05 '11 at 12:07
  • Just a small note: I noticed that Google Chrome has issues when using the `background-size: cover` attribute: It makes scrolling very jumpy. When using a jQuery plugin (for instance http://srobbin.com/blog/jquery-plugins/jquery-backstretch/) this problem dissapears and scrolling is smooth again. – r0skar Oct 05 '11 at 12:26
  • @andrej; there no issue in chrome for using background-cover property check this link http://ringvemedia.com/ they use background-cover property – sandeep Oct 05 '11 at 12:29
  • @sandeep thx for link i saw it , it is really nice ...sorry if you didn't get me right ..i have a div and there is a image i want both realizable simultaneously, according to browser width or size see here http://jsfiddle.net/jamna/DdxbQ/19/ – Jamna Oct 05 '11 at 12:37
  • @sandeep: Well i did have issues that scrolling was jumpy when using a real big and high quality background images (talking about ~2200x1700px).Probably the problem lies somewhere else, but from what I can see on the web, I am not the only one having issues (see http://www.google.com/support/forum/p/Chrome/thread?tid=1242c84a137fda30&hl=en). Also, i dont think the website you linked does really use the background method described on css-tricks. (i see they have background images in a table at the bottom of the site and not in the css and they also use a js script to make it cover). – r0skar Oct 05 '11 at 12:54
  • @sandeep can you please tell me where i am going wrong in my this example http://jsfiddle.net/jamna/3Zs2u/22/ because when browser window size reach at 1025 "save-money label" image is not resizing smoothly it's directly showing in its max-width – Jamna Oct 10 '11 at 10:02