У меня есть простая веб-страница с полноразмерным фоном изображения. Что мне сделать, чтобы сделать его мобильным? CSS выглядит так:

html{
  background: url(images/grindif1.jpg) 50% no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: green;
  min-height:100%;
  background-size:cover;
}

On a computer, it looks like this (as i want).

And on the phone, it looks like this

-2
Rikard Abrahamsson 21 Апр 2016 в 00:13

3 ответа

Лучший ответ

Во-первых, как сказал Дэни Код, не помещайте фоновое изображение в тег «html», а в тело.

Если вам не нравится результат background-size: cover; в определенных точках останова размера области просмотра вы всегда можете создать разные правила CSS для этих конкретных медиа-запросов.

Если вы хотите, чтобы изображение на телефонах выглядело иначе, чем на рабочем столе, вы можете использовать «@media screen и (max-width: 480px) {здесь код CSS для конкретного iphone}»

1
Ebelanger 20 Апр 2016 в 22:42

Вопрос очень непонятный, но, поскольку вы спрашивали о совместимости с мобильными устройствами, я бы предложил bootstrap

Bootstrap имеет классы для мобильных и настольных сайтов и прост в использовании. Он следует за сеткой. И имеет разные классы для поддержки разных окон просмотра:

  • col-xs- ~ Очень маленькие устройства
  • col-sm- ~ Маленькие устройства
  • col-md- ~ Средние устройства
  • col-lg- ~ Большие устройства
1
Ani Menon 20 Апр 2016 в 21:36

Хорошо, вы ищете что-то подобное?

И, кстати, попробуйте ничего не помещать в html в вашем CSS, если затем используйте body и поместите margin:0px;

body{
	margin: 0px;
  background: url(http://lorempixel.com/800/600) 50% no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  background-color: green;
  height:100vh;
}
<body>


</body>
1
CodeWeis 20 Апр 2016 в 21:47