Репозиция фонового изображения

Question

Репозиция фонового изображения

0

Изображение, которое я использую для фона веб-сайта, находится в центре страницы.

Снимок экрана, который я объясняю, выглядит следующим образом:

Почему черное пространство справа и слева от изображения присутствует?

CSS для следующего:

body {
background: black url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg')no-repeat 50% 100%;
}

Newtt 02 окт. 2013, в 10:42

Источник

Теги:

html

css

4 ответа

2

Прежде всего, он черный, потому что в вашем CSS вы указываете черный цвет фона. Но я предполагаю, что вы имеете в виду, почему там вообще пустое место...

В этом случае простой ответ - размер вашего изображения не соответствует размеру окна. Более конкретно, разрешение и, следовательно, отношение ширины к высоте не совпадают с окном. Таким образом, браузер будет центрировать изображение в соответствии с вашими инструкциями css и заполнить остальную часть пространства твердым базовым цветом (черный).

У вас в основном есть 3 варианта.

Вы находите цвет фона, который подходит для пустого пространства, подходящего вашему дизайну (многие люди добавляют границу или уменьшают границы изображения до прозрачности, поэтому они выглядят целеустремленными).
Вы используете воспроизводимое изображение (это наиболее распространенный шаг, поскольку обычно рекомендуется использовать очень маленькое повторяемое изображение, а не одно большое изображение. Например, у вас может быть градиент изображения 2000px, идущий от одного цвета к другому, что может повторяться (ака черепица) по горизонтали.
Используйте свойство background-size: cover чтобы перед фоновым изображением полностью покрыть тег вашего тела. Это свойство может быть настроено на несколько параметров, но каждый из них имеет свои собственные предостережения (т.е. Странные проблемы растяжения или обрезка важных частей на определенных экранах). Поэтому вам нужно google для действительных значений и протестировать их. Вам также потребуется загрузить прокладку/полипол для этого свойства, чтобы поддерживать старые браузеры (IE?).

Lee 02 окт. 2013, в 05:14

0

Да, я имел в виду пустое пространство. Я знал, что это я уже указал черный ...
Newtt 02 окт. 2013, в 08:02
0

Хорошее, твердое объяснение ...
Chris Kempen 02 окт. 2013, в 08:04

0

В вашем css используйте следующее свойство:

body {
background-size:cover;
}

или

body {
background-size:100%(for width) 100%(for height);
}

Надеюсь, это поможет.

Sumit Raghav 02 окт. 2013, в 05:35

0

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

В качестве решения вам следует рассмотреть возможность добавления оберточного div для центрирования страницы при установке фона на теле.

Пример HTML

<html>
  <body>
    <div class="page"> ... </div>
  </body>
</html>

Пример CSS

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: black url(...) no-repeat center top;
}

.page {
  width: 90%;
  margin: 0 auto;
}

MildlySerious 02 окт. 2013, в 05:04

Ещё вопросы

Да, я имел в виду пустое пространство. Я знал, что это я уже указал черный ...

Chris Kempen · Accepted Answer · 2013-10-02T05-37-00.000Z

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

У меня возникло бы желание попробовать следующее:

body {
    background-image: url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg');
    background-position: center;
    background-size: cover;
}

Это обеспечит, чтобы ваше фоновое изображение покрывало body вашего HTML. Более подробную информацию можно найти здесь.