CSS Hintergrund wiederholen
-
16-09-2019 - |
Frage
Gibt es eine Möglichkeit ein Hintergrundbild strecken anstatt wiederholen zu machen?
Lösung
mit Nicht jede Art von Cross-Browser kompatibel CSS (gibt es die background-size
Eigenschaft jedoch.)
Wenn dies bei jedem Browser insbesondere gerichtet ist, könnte es möglich sein. Andernfalls müssen Sie eine <img>
verwenden und dass dehnen.
Hier ist, wie Sie es in neueren Browsern tun:
body {
background-image: url(bg.jpg);
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-khtml-background-size: 100% 100%; /* Konqueror 3.5.4 */
}
Ansonsten mit einem <img>
:
img#background {
/* height: 100%; Note: to keep ratio, don't use height */
left: 0;
position: fixed; /* or absolute, if you like */
top: 0;
z-index: -1;
width: 100%;
}
Andere Tipps
Sie können ein Bild verwenden und es ist Breite und Höhe bis 100%, Z-Index auf absolute Position -1. Das könnte funktionieren.
Hintergrund-Größe ist CSS3 und noch nicht unterstützt. Sie könnten einen Blick auf diesen Artikel nehmen: Wie Sie ein Hintergrundbild in ein Dehnen Sie Webseite
Hope, das hilft.
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
http://www.w3schools.com/css/css_background.asp
Dies wird Ihr Bild nicht streach, aber es wird das Bild macht nicht zu wiederholen.