Hintergrundbild erscheint nicht Vollbild auf mobilen

Ich versuche, ein Bild als Hintergrund einstellen, aber es passt nicht an Handys:Hintergrundbild erscheint nicht Vollbild auf mobilen

Gibt es eine andere Möglichkeit, es zu ändern, ohne Hintergrundbilder mit einem @media-Attribut zu ändern?

Mein HTML und CSS:

body { 
 
/* Location of the image */ 
 
    background-image: url(../img/background.jpg); 
 
    
 
    /* Background image is centered vertically and horizontally at all times */ 
 
    background-position: center center; 
 
    
 
    /* Background image doesn't tile */ 
 
    background-repeat: no-repeat; 
 
    
 
    /* Background image is fixed in the viewport so that it doesn't move when 
 
    the content's height is greater than the image's height */ 
 
    background-attachment: fixed; 
 
    
 
    /* This is what makes the background image rescale based 
 
    on the container's size */ 
 
    background-size: cover; 
 
    
 
    /* Set a background color that will be displayed 
 
    while the background image is loading */ 
 
    background-color: #464646; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
<title>Title of the document</title> 
 
</head> 
 

 
<body> 
 
<h1>ALOOOU</h1> 
 
</body> 
 

 
</html>

Quelle

2017-01-25 Flash

Verwenden Sie Körper {Höhe: 100vh;} –

das funktioniert, aber jetzt erhalte ich Bildlaufleiste auf Desktop-Ansicht: | – Flash

Probieren Sie es als volle Breite Hintergrund auf dem HTML-Tag:

html { 
    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; 
}

Quelle

2017-01-25 15:28:59 Michael

das funktioniert nicht – Flash

ein Ansichtsfenster Höhe, um Ihren Körper hinzu Mobil wie folgt:

@media (max-width: 768px) { 
    body { 
     height:100vh; 
    } 
}

Quelle

2017-01-25 15:47:18

Body-Tag nur zu 100x100px .this Img-Tag voller Fenster.

body { 
 
    height: 100px; 
 
    width: 100px; 
 
/* normal body */ 
 
} 
 
.CanvasImg { 
 
     background-position: center center; 
 
     background-attachment: fixed; 
 
     position: absolute; 
 
     width: 100%; 
 
     height: 100%; 
 
     top: 0; 
 
     left: 0; 
 
     bottom: 0; 
 
     right: 0; 
 
     border: 0; 
 
     background: url("http://sendeyim.net/uploads/resim-galerisi/3d-masaustu-resimler_468650.jpg") no-repeat; 
 
     background-size: cover !important; 
 
     -webkit-background-size: cover !important; 
 
     -moz-background-size: cover !impoertant; 
 
     opacity: 0.7; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
<title>Title of the document</title> 
 
</head> 
 

 
<body> 
 
<img src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==' 
 
       class="CanvasImg"/> 
 
<h1>ALOOOU</h1> 
 
</body> 
 

 
</html>

Quelle

2017-01-25 15:47:43 Qh0stM4N

Verwendung CSS:

body{height:100vh; 
box-sizing:border-box; 
overflow-y:hidden;}

CSS3 uns Ansichtsfenster-relative Einheiten gibt:

vh bis 1% der Höhe des Ansichtsfensters relativ ist, mit 100vh wird den gesamten Bildschirm abdecken.
mittels Überlauf-y versteckt wird
border-box horizontales Scrollen entfernen zeigt an, dass die Breite und Höhe Eigenschaften (und min/max-Eigenschaften) umfassen Inhalt, Polsterung und Grenze, aber nicht den Rand

Quelle

2017-01-25 15:48:39

Hintergrundbild erscheint nicht Vollbild auf mobilen

Antwort

Verwandte Themen