statische Hintergrundbild in responsive Website - nicht in der Größe ändern

Question

Ich machte kleine repositive Website. Alles sieht gut aus, aber kein Hintergrund. Problem ist, dass dieser Hintergrund ein Bild ist und 2 Frauen auf den Seiten (links und rechts) zeigt. Ein Teil von ihnen muss immer an den Seiten sichtbar sein. Aber wenn ich die Auflösung ändere, ändert sich der Hintergrund auf:/Wie wird ein Hintergrund statisch gemacht? Hintergrund-Anhang: Fixes; nicht hilft mir

hier ist mein Code:

body{ 
    background:url(/images/bg.jpg) top; 
    background-repeat:no-repeat; 
    width:100%; 
    margin:0 auto; 
} 

Dank!

Answer 1

Es gibt ein paar Probleme mit Ihrem CSS:

• Sie sind nicht angibt, wie groß der Hintergrund
sein sollte
• Sie sind nicht spezifiziert, wie der Hintergrund
• angezeigt werden sollten Sie nicht sind Festlegen, wie der Hintergrund positioniert werden soll;
• Sie geben den Hintergrund falsch an.

Hier ist, was Sie verwenden sollten:

body { 
    background-image: url(http://travi-design.pl/klienci/rea_strefamarek/szablon/images/bg.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center; 
    width: 100%; 
    margin: 0 auto; 
} 

Answer 2

ich in zwei getrennte Bilder, das Bild geteilt würde und nutzen sie, wie ich in einem früheren Beitrag für eine ähnliche Situation einmal beschrieben (die Zeit mit ein Video in der Mitte): https://stackoverflow.com/a/34192574/5641669 und Fiddle bei http://jsfiddle.net/fusuhga6/2/

Das #Container Element hat eine prozentuale Breite (100%), sowie eine max-width in Pixel, die die gesamte Summe der Breite des Mittelelements entspricht plus die Breite der beiden Bilder. Es ist margin: 0 auto machen es horizontal in der Mitte des Browser-Fensters oder umgebenden Container. Die zwei Bilder sind als zwei Hintergrundbilder dieses Containers enthalten, von denen einer linksbündig und der andere rechts ausgerichtet ist (oben). Alle Elemente haben die gleiche Höhe. Die Größe des Videoelements ist fest (250px x 200px im Geigenbeispiel). Es hat auch margin: 0 auto, es innerhalb #Container horizontal zu zentrieren.

Answer 3

*, html{ margin: 0; 
 
    padding: 0;} 
 
body{ 
 
    background: #c4c4c4; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.content{ 
 
    position: relative; 
 
} 
 

 
.backgroundBox{ 
 
    height: 100%; 
 
    width: 100px; 
 
    position: absolute; 
 
    
 
} 
 

 
.leftSide{ 
 
    background: #a9a9a9; 
 
    left: 0px; 
 
} 
 

 
.rightSide{ 
 
    background: #bbbbbb; 
 
    right: 0px; 
 
}

<div class="leftSide backgroundBox"></div> 
 
<div class="rightSide backgroundBox"></div> 
 

 
<div class="content"> 
 
<h1>Page Content</h1> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </p> 
 
</div>