CODEWITHSUNDEEP
htmlcssbackground
panthro
panthro

Reputation: 24099

Size a background image?

I have a div that is 200px by 200px.

It's background image is 500px x 500px.

Is there a way to make sure the entire background image fits into the div? I know you can size it with CSS3 but i'm looking for a solution for older browsers.

Thanks

Upvotes: 0

Views: 79

Answers (4)

Prasanth K C
Prasanth K C

Reputation: 7332

You can achieve the same by applying background-size:100% 100%; to your div

Hope it will help

Upvotes: 0

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93591

Suppose that your div has id equal to "myid" .

picture used has as size 500x500

Demo :http://jsfiddle.net/abdennour/rhPDx/

div#myid{
   width: 200px;
    height:200px;

  background: url('http://px6.streetfire.net/0001/72/25/1952752_600.jpg') 
                0% 0% 
                no-repeat;
  background-size: 200px 200px;


}

Upvotes: 0

csizmadialj
csizmadialj

Reputation: 9

You cant resize ur image in backgound image attribute.

There's an other, tricky way to do this. Just place your background image in your div and add absolute position to it. Ofc ur div need to have a relative postion attribute.

After this you can resize ur image, simply with css2.

Upvotes: -1

Quentin
Quentin

Reputation: 944530

Is there a way to make sure the entire background image fits into the div?

The background-size property.

I know you can size it with CSS3 but i'm looking for a solution for older browsers.

There is no other standard way to scale a background image.

Older versions of Internet Explorer can be supported via the non-standard filter property and AlphaImageLoader.

/* Untested */
background-image: url(images/someimage.png);
background-resize: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";

Alternatively, as a hack, you could use an <img> element, and absolutely position it behind the content. This would be a content image though, so it wouldn't be a clean hack.

Upvotes: 3

Related Questions