Dehnen und Skalieren eines CSS-Bildes im Hintergrund - nur mit CSS

Question

Dehnen und Skalieren eines CSS-Bildes im Hintergrund - nur mit CSS

Gefragt el 19 de Juli, 2009: Wann wurde die Frage gestellt
1852756 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich möchte, dass sich mein Hintergrundbild je nach Größe des Browserfensters ausdehnt und skaliert.

Ich habe einige Fragen auf Stack Overflow gesehen, die diese Aufgabe erfüllen, z. B. CSS-Hintergrund dehnen und skalieren zum Beispiel. Das funktioniert gut, aber ich möchte das Bild mit background , nicht mit einer img Tag.

Darin wird ein img Tag platziert wird, und dann mit CSS wir Tribut an die img Tag.

width:100%; height:100%;

Es funktioniert, aber diese Frage ist ein bisschen alt, und besagt, dass in CSS 3 die Größe eines Hintergrundbildes wird ziemlich gut funktionieren. Ich habe dies versucht Beispiel die erste aber das hat bei mir nicht geklappt.

Gibt es eine gute Methode, dies mit dem background-image Erklärung?

Gefragt el 19 de Juli, 2009 von Fábio Antunes

137 Stimmen

Hintergrundgröße: 100% 100%;

Kommentiert el 30 de August, 2014 von Andreas L.

9 Stimmen

Vielleicht kann diese Demo hilfreich sein: w3schools.com/cssref/

Kommentiert el 7 de Januar, 2015 von Davide

1 Stimmen

Mögliches Duplikat von CSS-Hintergrundbild an die Breite anpassen, Höhe sollte automatisch proportional skaliert werden

Kommentiert el 1 de Marsch, 2016 von Alex Angas

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

20voto

Rory Harvey Punkte 2469

Verwenden Sie dieses CSS:

background: url('img.png') no-repeat; 
background-size: 100%;

Beantwortet el 9 de Kann, 2011 von Rory Harvey (2469 Punkte )

Answer 3

15voto

Arunraj S Punkte 728

Sie können diese Klasse in Ihre CSS-Datei einfügen.

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Es funktioniert in:

Safari 3 oder höher
Chrome Was auch immer oder später
Internet Explorer 9 oder später
Oper 10 oder höher (Opera 9.5 wird unterstützt) background-size , aber nicht die Schlüsselwörter)
Firefox 3.6 oder höher (Firefox 4 unterstützt nicht vorangestellte Versionen)

Beantwortet el 17 de April, 2015 von Arunraj S (728 Punkte )

1 Stimmen

Dies ist eine funktionierende Antwort nach dem Prinzip "strecken und anpassen". Hinweis: Das Seitenverhältnis wird sich ändern.

Kommentiert el 17 de September, 2017 von devdrc

Answer 4

14voto

Aamer Shahzad Punkte 2267

Sie wird durch CSS-Tricks erklärt: Perfektes Ganzseiten-Hintergrundbild

Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Code:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Beantwortet el 28 de Juli, 2017 von Aamer Shahzad (2267 Punkte )

0 Stimmen

Basierend auf der obigen Antwort habe ich gesehen, dass die Korrektur von Hintergrundanhängen auf mobilen Geräten und Microsoft Edge nicht funktioniert. Die perfekte Lösung, um den Hintergrund zu strecken und auf allen Geräten und Browsern zu fixieren, empfehle ich jquery-backstretch.com

Kommentiert el 2 de November, 2018 von Aamer Shahzad

Answer 5

10voto

justinpees Punkte 382

Um Ihre Bilder entsprechend der Containergröße zu skalieren, gehen Sie wie folgt vor:

background-size: contain;
background-repeat: no-repeat;

Beantwortet el 7 de Januar, 2017 von justinpees (382 Punkte )

Answer 6

9voto

Mahdi jokar Punkte 1237

Ich verwende dieses Programm, und es funktioniert mit allen Browsern:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>

Beantwortet el 2 de Kann, 2012 von Mahdi jokar (1237 Punkte )

Dehnen und Skalieren eines CSS-Bildes im Hintergrund - nur mit CSS

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Dehnen und Skalieren eines CSS-Bildes im Hintergrund - nur mit CSS

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: