Ich habe
body {
background: url(images/background.svg);
}
Der gewünschte Effekt ist, dass dieses Hintergrundbild die gleiche Breite wie die Seite hat und die Höhe sich ändert, um die Proportionen beizubehalten. z.B. wenn das Originalbild 100*200 (beliebige Einheiten) ist und der Körper 600px breit ist, sollte das Hintergrundbild am Ende 1200px hoch sein. Die Höhe sollte sich automatisch ändern, wenn die Größe des Fensters geändert wird. Ist dies möglich?
Im Moment sieht es so aus, als ob Firefox die Höhe anpasst und dann die Breite anpasst. Liegt das vielleicht daran, dass die Höhe die längste Abmessung ist und er versucht, ein Beschneiden zu vermeiden? Ich möchte vertikal beschneiden und dann scrollen: keine horizontale Wiederholung.
Außerdem platziert Chrome das Bild in der Mitte, ohne Wiederholung, selbst wenn background-repeat:repeat
explizit angegeben wird, was ohnehin die Standardeinstellung ist.
Dafür gibt es eine CSS3-Eigenschaft, nämlich background-size
(compatibility check). Während man Längenwerte festlegen kann, wird sie normalerweise mit den speziellen Werten contain
und cover
verwendet. In Ihrem speziellen Fall sollten Sie cover
verwenden:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
und cover
Entschuldigung für das schlechte Wortspiel, aber ich werde das [Bild des Tages von Biswarup Ganguly] (https://commons.wikimedia.org/wiki/File:Chicken_Egg_without_Eggshell_5859.jpg) zur Demonstration verwenden. Nehmen wir an, dies ist Ihr Bildschirm, und der graue Bereich liegt außerhalb Ihres sichtbaren Bildschirms. Zur Veranschaulichung gehe ich von einem Verhältnis von 16x9 aus.
Wir wollen das oben erwähnte Bild des Tages als Hintergrund verwenden. Allerdings haben wir das Bild aus irgendeinem Grund auf 4x3 beschnitten. Wir könnten die Eigenschaft background-size
auf eine feste Länge setzen, aber wir werden uns auf contain
und cover
konzentrieren. Beachten Sie, dass ich auch davon ausgehe, dass wir die Breite und/oder Höhe von body
nicht verändert haben.
contain
enthalten Skaliert das Bild unter Beibehaltung seines Seitenverhältnisses (falls vorhanden) auf die größte Größe, so dass sowohl seine Breite als auch seine Höhe in den Hintergrund-Positionierungsbereich passen.
Dies stellt sicher, dass das Hintergrundbild immer vollständig im Hintergrund-Positionierungsbereich enthalten ist, jedoch könnte in diesem Fall etwas leerer Raum mit Ihrer Hintergrundfarbe
gefüllt werden:
cover
cover Skaliert das Bild unter Beibehaltung seines Seitenverhältnisses (falls vorhanden) auf die kleinste Größe, so dass sowohl seine Breite als auch seine Höhe den Bereich der Hintergrundpositionierung vollständig abdecken kann.
Dadurch wird sichergestellt, dass das Hintergrundbild alles abdeckt. Es wird keine Hintergrundfarbe sichtbar sein, aber je nach Bildschirmverhältnis könnte ein großer Teil des Bildes abgeschnitten sein:
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
Auf der Grundlage von Tipps von https://developer.mozilla.org/en-US/docs/CSS/background-size habe ich das folgende Rezept gefunden, das für mich funktioniert hat
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
Ich bin mir nicht sicher, wonach Sie genau suchen, aber Sie sollten sich diese hervorragenden Blogbeiträge von Chris Coyier von CSS-Tricks ansehen:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Lesen Sie die Beschreibungen der einzelnen Artikel und prüfen Sie, ob sie das sind, was Sie suchen.
Der erste beantwortet die folgende Frage:
Gibt es eine Möglichkeit, ein Hintergrundbild in der Größe veränderbar zu machen? Das heißt, den Hintergrund einer Webseite von Rand zu Rand mit einem Bild zu füllen, unabhängig von der Größe des Browserfensters. Außerdem sollte die Größe des Bildes größer oder kleiner werden, wenn sich das Browserfenster ändert. Stellen Sie außerdem sicher, dass es sein Verhältnis beibehält (nicht seltsam gestreckt wird). Außerdem verursacht es keine Scrollbalken, sondern schneidet nur vertikal ab, wenn es nötig ist. Außerdem wird es auf der Seite als Inline Tag eingefügt.
Der zweite Beitrag's Ziel ist es, die folgenden, ein "Hintergrundbild auf einer Website, die das gesamte Browser-Fenster zu allen Zeiten abdeckt zu bekommen. "
Hoffentlich hilft das.