webentwicklung-frage-antwort-db.com.de

Hintergrundbild mit HTML5 zur Anpassung an die Seite

Ich möchte ein Bild zum vollständigen Hintergrund einer Website machen! Ich weiß, es hört sich ziemlich einfach an, aber es hat mich verrückt gemacht, es passt nicht auf die Seite, dies ist der letzte Versuch, den ich erreicht habe!

CSS:

body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

Ich benutze auch Twitter Bootstrap, aber die Sache ist auch ohne dass ich es nicht richtig machen kann!

Jede Hilfe wäre dankbar.

EDIT: Ich habe keine exakten Pixel verwendet, weil ich versuche, ein responsives + mobiles Design zu erstellen.

Ich weiß nicht, warum sie die Frage abgelehnt haben! Aber so habe ich es gelöst!

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


#mybody {
background:  url('images/bodybg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myheader {
background:  url('images/headerbg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
9
0bserver07

BEARBEITEN: Ich habe ein DEMO erstellt, wobei einige unnötige Dinge entfernt wurden. Dies hat den Vorteil, dass das Hintergrundbild nicht angezeigt wird. Das DEMO funktioniert, wurde aber nicht so ausführlich getestet wie der unten angegebene Code.

Ich habe kürzlich an einem Projekt gearbeitet, bei dem wir genau das brauchten. Ich poste aus meinen Projektdateien, daher ist möglicherweise ein Teil davon unnötig, da dies ein Teammitglied war, das dies geschrieben hat.

Beginnen Sie mit dem Festlegen der Eigenschaften von HTML und Körper ..__ Dann habe ich eine Wurzel div innerhalb des Körpers, die als Hintergrund bezeichnet wird.

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    background: #000000 url(urlHere) no-repeat bottom left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    height: auto !important;
    min-height:100%;
}

Ich bin mir sicher, dass einige davon nicht notwendig sind, aber ich hoffe, es hilft.

13
Corey Horn

Sie können dies tun, indem Sie die Eigenschaft background-attachment: fixed; hinzufügen.

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

DEMO

Sie müssen jedoch wissen, dass das Bild im Fenster ausgeschnitten werden kann, wenn das Verhältnis von Seitengröße und Bildgröße unterschiedlich ist.

BEARBEITEN

Wenn für Sie die Höhe wichtiger ist, ändern Sie den Parameter backround-size in containt:

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
  background-attachment: fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
}

Demo enthalten

6
WooCaSh

Warum importieren Sie nicht die img-Dateien in Flash (Microsoft-Programm) und konvertieren die img-Dateien in Vektor-IMGs (Vektor: Bilder, deren Qualität nicht beeinflusst wird, wenn Sie die Höhe und Breite ändern.) Nachdem Sie den Vektor img angepasst haben (Ändern der .g img zur Auflösung Ihrer aktuellen Plattform) Speichern Sie es und wenden Sie es auf Ihren HTML-Code an. Ich würde empfehlen, eine Sicherungskopie anzufertigen, insbesondere wenn Sie HTML für unterschiedliche Auflösungen plattformübergreifend einsetzen. 

0
StudenProg

Sie müssen die Höhe für das erste Element der Seite festlegen.

html, body { margin:0; height: 100%;}

Sehen Sie hier mehr:

http://imasters.com.br/front-end/css/por-que-height-100-nao-funciona/

0
monteirobrena