Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Responsive web design : "How to resize a background image according to browser window size using CSS"?

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.

like image 573
Jamna Avatar asked Oct 05 '11 11:10

Jamna


People also ask

How do I make the background image fit my screen size in CSS?

Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.

How do I stop a browser window from resizing after a specific size?

You can not control the size of the window. You can use CSS to set min-width and min-height properties to ensure your page layout stays sane. using 'window. open' I can open a page with a fixed height width.

How do I stretch a background image to fit the screen in HTML?

When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.


1 Answers

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

like image 182
sandeep Avatar answered Oct 11 '22 15:10

sandeep