фоновое изображение не отображается на весь экран на мобильный

Я пытаюсь установить изображение в качестве фона, но он не подходит на мобильные телефоны:фоновое изображение не отображается на весь экран на мобильный

Есть еще способ сделать это без изменения обоев с атрибутом @media?

Мой HTML и 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>

источник

2017-01-25 Flash

use body {height: 100vh;} –

это работает, но теперь я получаю полосу прокрутки на рабочем столе: | – Flash

Попробуйте использовать его в качестве полной ширины фона на HTML тег:

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

источник

2017-01-25 15:28:59 Michael

это не работает – Flash

Добавить высоту окна просмотра для вашего тела для мобильный как это:

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

источник

2017-01-25 15:47:18

тег тела только до 100x100px. Этот ярлык img, полный окна.

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>

источник

2017-01-25 15:47:43 Qh0stM4N

использование CSS:

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

CSS3 дает нам окно просмотра-относительных единицах:

В.Х. является по отношению к 1% от высоты окна просмотра, использование 100vh будет охватывать весь экран.
используя переполнение-у скрытые будет удалить горизонтальной прокрутки
границы окна указывает на то, что ширина и высота (и мин/макс свойства) включает в себя содержание, отступы и границы, но не запас

источник

2017-01-25 15:48:39

фоновое изображение не отображается на весь экран на мобильный

ответ

Смежные вопросы