CSS3 фон случайно вырезал мои изображения

Question

CSS3 фон случайно вырезал мои изображения

0

У меня есть две html-страницы (index.html и about.html) с тем же фоном в теге body. Для создания фона я использую следующий CSS:

body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Однако браузеры (Firefox и Chrome) неправильно позиционируют изображение. Поскольку цвет фона белый, index.html имеет белую линию под фоновым изображением. Я предполагаю, что высота изображения слишком короткая.

Тем не менее, есть блок белого пространства под фоновым изображением about.html, отбеливающий более четверти страницы.

Как это происходит, когда я использую тот же CSS.

В то время как на этой теме, как лучше всего управлять фоновым изображением для разных разрешений экрана?

Marco Lau 11 дек. 2013, в 09:30

Источник

Теги:

html

css

css3

image

3 ответа

0

Пытаться:

background-size:contain;

contain свойство масштабирует изображение до наибольшего размера, так что его ширина и высота могут помещаться внутри области содержимого.

Hiral 11 дек. 2013, в 05:59

0

Я пробовал это раньше. Это просто сжало мое фоновое изображение. В about.html он еще меньше. Очень странно.
Marco Lau 11 дек. 2013, в 12:43

0

Я предпочитаю, чтобы вы сначала взяли небольшой кусочек изображения с помощью фотошопа и сохранили его для веб-сайтов и устройств или сделали небольшой размер, отрезая инструмент. Когда вы получите небольшое изображение с небольшим размером.

чем тип bellow code

 body {
   background-image: url('http://www.skrenta.com/images/stackoverflow.jpg');
   background-repeat: repeat;
 }

Alimon Karim 11 дек. 2013, в 05:22

0

По умолчанию изображение уже повторяется. Эта линия кажется излишней.
Marco Lau 11 дек. 2013, в 12:44
0

Я знаю, что эта строка избыточна, но эту строку описывают более конкретно.
Alimon Karim 11 дек. 2013, в 12:50

Ещё вопросы

Я пробовал это раньше. Это просто сжало мое фоновое изображение. В about.html он еще меньше. Очень странно.
По умолчанию изображение уже повторяется. Эта линия кажется излишней.
Я знаю, что эта строка избыточна, но эту строку описывают более конкретно.

Marco Lau · Accepted Answer · 2013-12-11T11-39-00.000Z

Лучшим решением, которое я могу придумать, было использование background-attachment: fixed; , Это заполнило весь фон моим изображением.

Я не понял, почему мой CSS отображает мой фон по-разному. Это то, на что можно смотреть.

body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}