0

Хочу чтобы картинка на фоне у body была ограничена визуально размерами body. Но как-то оно себя подругому ведет, нежели я о нем думаю.


Даже overflow: hidden; не помогает.. А div'у он даже не требуется.


Пример: http://jsfiddle.net/tm8yhoz7/11/

3
  • 1) чтобы исправить - задайте фон для тега html (например, белый) 2) чтобы понять - прочитайте ответы здесь (и ответ дубликата)
    – BOPOH
    28 фев 2016 в 5:24
  • @BOPOH спасибо! буду разбираться!
    – Vitalik Z
    28 фев 2016 в 7:18
  • body {backgraund-image: url(); backgraund-position: center center; backgraund-size: cover}; картинка будет вписываться и подгоняться всегда по размерам блока.
    – pepel_xD
    28 фев 2016 в 8:10

1 ответ 1

1

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

* {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 0;
    outline: 0;
}
html {
    width: 100%;
    height: 100%;
}
body {
    min-width: 100%;
    min-height: 100%;
    background-image: url('http://kievpravda.com/media/images/10927/main/400.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid red;
}
.box {
    width: 200px;
    height: 200px;
    font-size: 16px;
    background-image: url('http://kievpravda.com/media/images/10927/main/400.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
<div class="box"></div>

Также можно задать свойство background-attachment:

Значения: fixed Делает фоновое изображение элемента неподвижным. scroll Позволяет перемещаться фону вместе с содержимым. inherit Наследует значение родителя. local Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.

*Я так понимаю вопрос стоял за body на всю ширину и высоту и отступами по умолчанию?

Ну а если нужно обрезать по границе контента в body, то вот:

* {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 0;
    outline: 0;
}
html {
    background: #fff;
}
body {
   
    background-image: url('http://kievpravda.com/media/images/10927/main/400.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid red;
}
.box {
    width: 200px;
    height: 200px;
    font-size: 16px;
    background-image: url('http://kievpravda.com/media/images/10927/main/400.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
 <div class="box"></div>

2
  • добавьте к body стиль border: 1px solid red. Все, что находится за красной линией - лишнее. В этом и вопрос автора. Добавьте к тегу html стиль background-color: white и вы увидите что действительно хотел получить автор
    – BOPOH
    28 фев 2016 в 9:01
  • @BOPOH, внес необходимые изменения.
    – pepel_xD
    28 фев 2016 в 10:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.