Frage

Gibt es eine Möglichkeit ein Hintergrundbild strecken anstatt wiederholen zu machen?

War es hilfreich?

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

Nur in CSS3

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.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top