Bereits responsive div container, wie man ein responsives Hintergrundbild mit perfektem Maßstab erstellt

Question

Wie kann ich eine perfekte Skala background image haben, wenn die div-Box bereits mit width : 100% skaliert ist? Wenn ich background-image : 100% 100% versuche, ist das Hintergrundbild zu ausgedehnt.

Hier ist meine CSS-Code für den Header, die das Hintergrundbild ist in:

.header-main-bar { 
    float: left; 
    width: 100%; 
    background: url(BerlinFrontpage.png); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

Answer 1

Ich denke, Sie werden atleast die Höhe geben: auto; weil es sonst nicht richtig skaliert.

(Am Besten wäre es Wenn Du dein beispiel mal mit Codepen.io posten würdest. Dann Könnte man dir noch eher helfen.)

Answer 2

Sie haben soeben background-size:cover;

Answer 3

Dank für Ihre Informationen verwenden können.

hier ist der Link zu meinem Problem: https://urban-garden24.webshopapp.com/

das Hintergrundbild im Header ..

i Hintergrund-size versucht haben: Cover und Hintergrund-size: 100% 100%

der div container ist zu klein ich denke

Answer 4

ich habe herausgefunden, dass der div container, der das hintergrundbild enthält nur größe: 100%, also vielleicht wenn ich die größe des containers ändere, aber ich will, dass der container ist verantwortlich Ich auch ... hmm jemand eine Idee?

hier Bilder, wo der Behälter mit Breite: 100% und ohne enter image description here

without and with width: 100%