CSS: Hintergrund verkleinern wenn größer als Fenster, auf 100% halten sonst

Ich möchte ein Hintergrundbild im Body meiner Website bereitstellen, das mit der Fensterauflösung skaliert, aber nicht über das Original hinaus skaliert Größe (1920x1080). Auf diese Weise können Benutzer mit kleineren Auflösungen immer noch das gesamte Bild sehen, aber die darüber hinaus haben keinen hässlichen hochskalierten Hintergrund.CSS: Hintergrund verkleinern wenn größer als Fenster, auf 100% halten sonst

Es sieht nicht aus wie Hintergrundbilder unterstützen Eigenschaften wie Max-Breite, die ich normalerweise für einen solchen Zweck verwenden würde.

Was könnte die Lösung sein? Ist das in CSS ohne zusätzliches Scripting möglich?

Quelle

2013-10-30 ividyon

Sie würden wahrscheinlich mehr brauchen dann einige jquery/javascript –

ich einen div als Wrapper mit einem max-width verwenden würde, und stellen Sie den Hintergrund zu diesem div.

HTML

<body> 
<div class="container">Content</div> 
</body>

CSS

.container { 
    width: 100%; 
    max-width: 1920px; /* YOUR BG MAX SIZE */ 
    background:url("bg.png") no-repeat; 
    background-size: 100%; 
}

Quelle

2013-10-30 13:29:50 jensborje

Sie könnten versuchen, einen HTML-<img> Tag mit einem bestimmten id

zum Beispiel der Schaffung

HTML

<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />

CSS

img#mybg { 
    position: fixed; //image will always be top: 0 left: 0 by default. 
    display: block; //make it a block for width to work. 
    width: 100%; //set default width 
    height: 100%; //set default height 
    max-width: 1920px; //set max width 
    max-height: 1080px; //set max height 
    z-index: -999999; //set z-index so it won't overlap any other element. 
}

Für dynamische Zentrierung Sie Javascript in Kombination mit einem window.onresize Ereignis verwenden würde.

Wenn Sie weitere Informationen benötigen, werde ich meinen Beitrag entsprechend bearbeiten.

Eine gute Alternative, die sehr einfach zu benutzen ist (aber Ihren Hintergrund streckt) wäre jquery backstretch plugin zu verwenden. Sie können einfach ein Vollbild-Hintergrundbild hinzufügen, das mit der Auflösung skaliert wird (was nicht gerade das ist, was Sie wollen, aber die beste Alternative, die ich mir vorstellen kann).

Quelle

2013-10-30 12:47:44 SidOfc

Sie können so versuchen. Jede mögliche Größe Bildauflösung wie reaktions arbeitet:

img#mybg { 
    position: fixed; //image will always be top: 0 left: 0 by default. 
    display: block; //make it a block for width to work. 
    width: 100%; //set default width 
    height: 100%; //set default height 
    max-width: 1920px; //set max width 
    max-height: 1080px; //set max height 
    z-index: -999999; //set z-index so it won't overlap any other element. 
    background-size:100% 100%; 
}

Quelle

2013-10-30 12:53:23 vadlamani

Nur ein wirklich kleiner/quick-Vorschlag:

Je nachdem, wie es aussieht, und alle zusammen fließen, background-size:contain; könnte sein, eine Option.

oder, auf Ihrem Körper, stellen Sie die maximale Breite auf 1920, stellen Sie die Ränder auf automatisch, und das könnte auch für Sie arbeiten.

Quelle

2013-10-30 13:36:04 ndugger

CSS: Hintergrund verkleinern wenn größer als Fenster, auf 100% halten sonst

Antwort

Verwandte Themen