CODEWITHSUNDEEP
htmlcss
kulan
kulan

Reputation: 1391

Solution for background image when zooming out

I've got a PSD template to convert it to HTML. How do I deal with the background food images (highlighted red on the image) when I zoom-out the browser? The total width is 1300px, container is 1000px. What would be the best approach? Do I repeat them? How? What would you do? Thank you.

enter image description here

Upvotes: 2

Views: 55

Answers (2)

Saurabh Sonawane
Saurabh Sonawane

Reputation: 951

Basically you can go through 2 approaches to get that done...

  1. Use 3 different div's to work out.
<div class="left-div"><img src="food_img1.ong"/></div>
<div class="inner-div">Here goes main container</div>
<div class="right-div"><img src="food_img2.ong"/></div>

  1. Try to use the method given by user Satya above as,

    html,body{
   background:#333333 url(../img/bg/bg3.jpg) no-repeat center center;
   background-size: cover;
}

Upvotes: 0

satya
satya

Reputation: 1185

Please try this:

html { 
  background: url(images/yourimage.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Upvotes: 1

Related Questions