Lösung für das Hintergrundbild beim Herauszoomen

Question

Ich habe eine PSD-Vorlage, um es in HTML zu konvertieren. Wie gehe ich mit den Hintergrund-Food-Bildern um (die auf dem Bild rot hervorgehoben sind), wenn ich den Browser auszoomt? Die Gesamtbreite beträgt 1300px, Container ist 1000px. Was wäre der beste Ansatz? Wiederhole ich sie? Wie? Was würden Sie tun? Vielen Dank.

Answer 1

Bitte versuchen Sie dies:

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; 
} 

Answer 2

Grundsätzlich kann man durch zwei Ansätze gehen auf das getan ...

1. Verwenden 3 verschiedenen divs zu erarbeiten.

<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> 

2. Versuchen Sie, das Verfahren durch den Benutzer Satya gegeben zu verwenden, wie oben,

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