1

I want to stretch image when content of html is increase. And whenever content is increases then automatically background image stretch without repeating in css. In Html pages.

Mahi143
  • 15
  • 3

3 Answers3

0

Check this out!

Here is my CSS:

div {
    background-image: url(http://placekitten.com/200/300);
    background-repeat: no-repeat;
    min-width: 200px;
    min-height: 300px;
    background-size: 100% 100%;
}

background-size: cover; will also work, with a slightly different effect.

dezman
  • 18,087
  • 10
  • 53
  • 91
0

Here is my suggestion to avoid stretching:

div {
background-image: url(http://placekitten.com/200/300);
background-repeat: no-repeat;
height: auto;
width: 100%;
background-position: 50% 0;
background-size: 100%;
}

http://jsfiddle.net/Riskbreaker/mx8rr/1/

Riskbreaker
  • 4,621
  • 1
  • 23
  • 31
  • One question i have regarding background image, I want When menu text is increases that time background image is stretch i.e width of image should increases with out using repeat y. Because which image is i used that having the bullets on all 4 corners so it look so bad. So you have any solution please give me.. I try lots.. please help me ! – Mahi143 Apr 12 '13 at 15:50
-1

We can stretch background image when add large content without repeating image in css

please try next: 

background-size: cover;

or

background-size: contain;
lesyk
  • 3,979
  • 3
  • 25
  • 39
Thomas Mathew
  • 235
  • 2
  • 9