Как сделать фоновое изображение адаптивным в CSS

Ранее я задавал вопрос о размещении 2 div внутри другого контейнера начальной загрузки div (1 вверху слева и 1 внизу справа), который теперь решен.

Моя следующая проблема заключается в том, что в основном блоке (с двумя блоками внутри) мне нужно большое фоновое изображение, которое является отзывчивым, поэтому нижний правый блок перемещается вверх и внутрь, поскольку браузер становится меньше.

Вот что у меня есть до сих пор:

<style>
#header {
background-image: url(/images/background-image.jpg);
position: relative;
}

#header .container {
height: 893px;
position: relative;
}

#header .div1 {
position: absolute;
top: 20px;
}

#header .div2 {
position: absolute;
bottom: 20px;
right: 20px;
}

<div id="header">
<div class="container">
    <div class="div1">
        Top left content
    </div>
    <div class="div2">
        Bottom right content
    </div>
</div>

Adding the background image to the CSS like how I have done above, does not make the image responsive, but if I add it to the HTML as an image I cannot get the divs to sit on top of the image.

Каков правильный способ сделать это?


html css twitter-bootstrap responsive responsive-images
person user3642210    schedule 15.08.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

С несколькими кроссбраузерными префиксами поставщиков.

#header {
    display: block;
    position: relative;
    background: url('/images/background-image.jpg') 50% 0 no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
person Steven Ventimiglia    schedule 15.08.2016
comment
Спасибо за это... близко, но не совсем то, что мне нужно. В идеале я хочу, чтобы контент подтягивался, когда фоновое изображение уменьшается. Здоровья однако :) - person user3642210; 16.08.2016
comment
Код отредактирован выше. Сделано фоновое положение 50%/0, а не 50%/50%. (Слева или справа/сверху или снизу – где 50% будет сокращением как для центрирования, так и для середины.) - person Steven Ventimiglia; 17.08.2016

arrow_upward
1
arrow_downward

Это может решить или, по крайней мере, направить вас в правильном направлении. Измените стили заголовка на следующие, и фоновое изображение будет перемещено в верхний левый угол и заполнит 100% div. Может быть сложно иметь «идеально» отзывчивые фоновые изображения.

#header {
background-image: url(/images/background-image.jpg);
background-repeat:no-repeat;
background-size: 100%;
background-position:top left;
position: relative;
}

http://codepen.io/adamfollett/pen/OXdKyG

person Adam F    schedule 15.08.2016
comment
Спасибо. Проблема с этим способом: содержимое в правом нижнем углу теряется, когда браузер сжимается. - person user3642210; 16.08.2016