CSS - центрированное изображение над DIV с отзывчивым фоном и отображением изображения в полный рост

Если вы внимательно прочитаете этот вопрос, вы заметите, что ЭТО НЕ ДУБЛИРОВАННЫЙ ВОПРОС. Речь идет об изображении на адаптивном фоне с отображением изображения в полный рост. Ответы на другие вопросы здесь бесполезны. Спасибо Джейкобу за его простое решение.

Проблема:

У меня есть DIV с отзывчивым фоном. Я пытаюсь разместить логотип png по центру DIV (или фон, если хотите). Вот что у меня есть:

.divWithBG {
    background-image: url(...);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 45.45%; /* (h/w) x 100 */
    margin-bottom: 30px;
}
.divWithBG img{
    display: block;
    margin: 0 auto;
}

¿Что мне нужно сделать, чтобы поместить изображение в div? Центрируется как по вертикали, так и по горизонтали.

Спасибо заранее.


image html css centering
person Sergio    schedule 13.08.2015    source источник
comment
Вы можете использовать flex-box? Это делает это чрезвычайно легко.   -  person Jacob Gray    schedule 14.08.2015
comment
Это не повторяющийся вопрос, Кевин. У него есть отличие: отзывчивый фон (с отображением полной высоты изображения)   -  person Sergio    schedule 14.08.2015
comment
почему бы вам просто не добавить логотип в качестве второго фонового изображения?   -  person Jacob Gray    schedule 14.08.2015
comment
Я проверю флексбокс, Джейкоб. Это выглядит красиво и просто. Спасибо!   -  person Sergio    schedule 14.08.2015
comment
В качестве второго фонового изображения? Что ты имеешь в виду, Джейкоб? Думаю, второй фон унаследует те же свойства...   -  person Sergio    schedule 14.08.2015
comment
@Sergio здесь, я отправлю ответ для фонового изображения, это будет трудно объяснить в комментариях: D   -  person Jacob Gray    schedule 14.08.2015

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете просто сделать его проще и использовать 2 фоновых изображения. Несколько фоновых изображений в CSS:

    .divWithBG {
        background-image: url("http://lorempizza.com/380/240") , url("http://lorempizza.com/2000/2000");
        background-size: 50%, contain;
        background-repeat: no-repeat, no-repeat;
        background-position:center;
        width: 100%;
        padding-top: 45.45%; /* (h/w) x 100 */
        margin-bottom: 30px;
    }
<div class="divWithBG"></div>

Фоновое изображение, которое вы хотите разместить сверху, стоит первым в свойстве background.

person Jacob Gray    schedule 14.08.2015
comment
Работает как шарм, Джейкоб. Спасибо большое! - person Sergio; 14.08.2015
comment
@Sergio Нет проблем, рад, что смог помочь! - person Jacob Gray; 14.08.2015