CODEWITHSUNDEEP
htmlcss
user1464139
user1464139

Reputation:

Can I make my image expand to fit the boundaries of an HTML section?

I have the following HTML:

<section id="infopic" class="grid_5 prefix_1" style="height: 500px;">
   <div id="login-image"></div>
</section>

and this CSS:

#infopic {
   background-image: url("/Images/login.png");
}

I have a few different ways to make my image stretch to fit the boundaries of the #infopic but still cannot get this to work right. Right now it repeats in the code above the image (which is smaller than 500px square) just repeats.

Upvotes: 0

Views: 196

Answers (4)

Surinder ツ
Surinder ツ

Reputation: 1788

Use like this:

img {
  background-size: 100%;
  max-width: 100%;
}

Reference:

Fliud Images

Upvotes: 0

Kyle
Kyle

Reputation: 67244

You can use the CSS3 property background-size: 100%; to stretch your image over the entire element: 

#infopic {
  height: 500px;
  width: 1000px;
  background-image: url("http://placehold.it/250x250");
  background-repeat: no-repeat;
  background-size: 100%;
}

This is a CSS3 property so it's not supported in older browsers (I'm not even sure of IE support) but it's useful for modern browsers.

As an additional note, mixing external and inline CSS is a terrible idea, that's why I moved the height declaration to the external CSS.

:)

http://jsfiddle.net/x4w7V/

Upvotes: 0

Gareth Cornish
Gareth Cornish

Reputation: 4356

You could try the background-size declaration:

background-size: 100% 100%;

This will work in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+. I don't think it can be done in older browsers. Perhaps:

#infopic {
    background-image: url("/Images/login.png") 50% 50% no-repeat;
    background-size: 100% 100%;
}

for backwards compatibility?

Upvotes: 0

simoncereska
simoncereska

Reputation: 3043

try adding background-size property.

Some examples: http://www.css3.info/preview/background-size/

Upvotes: 1

Related Questions