Ich will mein Hintergrundbild die gesamte div Bucht, sondern viel Leerraum gibt esWarum ist mein Hintergrund nicht img die gesamte Seite?
HTML
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
CSS
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
Bitte verwenden background-size:cover
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
background-size:cover;
}
.backgroundsecction{
height: 900px;
width: 100%;
}<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>Wenn der weiße Rand Sie rund um den Hintergrund stört, verwenden Sie so etwas wie dieses:
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction {
height: 900px;
width: 100%;
}
body {
margin: 0;
}<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>Wenn das Bild kleiner als der Bildschirm ist, als größeres Bild zu verwenden. Es ist im Allgemeinen eine gute Übung, sich darauf vorzubereiten, dass einige Leute sehr sehr große Auflösungsanzeigen haben könnten ...
Oder vergrößern Sie es, wie @ankitapatel erwähnte: mit background-size:cover;.
Verwenden Sie 2 Dinge wie vorgeschlagen
body {
margin : 0px; //add this
}
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: fixed; //change fixed to cover entire
}
.backgroundsecction{
height: 900px;
width: 100%;
}<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
Dank. Können Sie mir Tipps geben, wie Sie diesen Effekt erzielen können? Wenn Sie auf die Unterseite schauen, bewegt sich das Hintergrundbild nicht, aber die darüber liegende Ebene bewegt sich. http://dimassi.com/ –
In dimassi.com, was Sie tun möchten ..? –
Wenn Sie auf dem PC sind, gibt es einen Hintergrund img, wo das "Ansichtsmenü" unten auf der Seite ist und ich möchte lernen, wie der IMG auf mein Scrollen reagiert. –