Wie setze ich eine minimale Breite mit Hintergrund-Größe

Question

Ich habe ein Bild, das 1000px X 600px ist. Ich möchte es als einen reaktionsfähigen Hintergrund für ein div verwenden, aber möchte eine Mindestbreite von 1000px festlegen, trotz wie klein das Browserfenster ist.

Dies ist frustrierend, da es scheint nicht eine einfache Möglichkeit zu geben, ein min zu definieren. Breite.

Wenn ich Hintergrundgröße verwenden: Abdeckung - aus irgendeinem Grund ist das Bild standardmäßig viel größer als 1000px.

bitte

Answer 1

helfen Wenn Medienanfragen eine Option sind, können Sie für Browser eine Medienabfrage Setup Ansichtsfenster kleiner als 1000px breit.

Vorausgesetzt, dass Ihre HTML-Ansichtsfenster gesetzt:

<meta name="viewport" content="width=device-width"> 

Und Ihre div namens 'bg':

<div class="bg"></div> 

In Ihrem CSS:

.bg { 
    width: auto; /* Scale the div to the parent width */ 
    height: 900px; /* The div needs some height to be visible */ 
    background-image: url(bg.png); /* This is your background image */ 
    background-size: 100%; /* Always size the image to the width of the div */ 
    background-position: top; /* Position the image to the top center of the div */ 
} 

/* For any viewports less than 1000px wide */ 
@media (max-width: 1000px) { 

    .bg { 
     background-size: 1000px 600px; /* Force the image to its minimum width */ 
    } 

} 

Answer 2

Ich hatte das gleiche Problem . Der folgende Code funktionierte für mich. Ich musste nur eine minimale Breite im selben Element hinzufügen. Hier habe ich nur das HTML-Element, würde ich davon ausgehen, dass es konventionelleren wäre das Körperelement zu verwenden

 /* CSS Style Sheet */ 

html { background-image:url(example.JPG); 
        background-size:cover; 
        min-width:1000px;} 

Ich hoffe, das hilft,

Answer 3

Es gibt jetzt eine Option für background-size-nur Skala der Bild, bis das Bild seine tatsächliche Höhe/Breite erreicht hat. Auf diese Weise müssen Sie keine Mindestbreite oder so einstellen.

In Ihrem CSS:

body { 
    background-size: cover; 
} 

Referenz: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values