0
Это макет я пытаюсь достичь: 
Отзывчивый макет с DIVS + Image Позиционирование
Вот мой текущий HTML + CSS (я только учусь очень жаль, если это повторяющееся и выключаться :))
<div class="collection clearfix">
<div class="image-left1"> </div>
<div class="icon-left1">
<img src="images/mainLP-chair-icon.png" alt="Chair Collection">
<p>Chair Collection</p>
</div>
</div>
<div class="collection clearfix">
<div class="icon-right1">
<img src="images/mainLP-lamp-icon.png" height="48" width="34" alt="Lamp Collection">
<p>Lamp Collection</p>
</div>
<div class="image-right1"> </div>
</div>
... чередуется в общей сложности 5 дивы сложены.
и CSS является:
/* =================== Main Section =================== */
.collection {
padding-top: 25px;
}
/*=================== CHAIRS ===================*/
.image-left1 {
background: url(../images/mainLP-chairs.jpg) center;
height: 570px;
width: 70%;
display: inline-block;
}
.icon-left1 {
float: right;
width: 30%;
background-color: #c7db9c;
padding: 10px;
border-left: 25px solid white;
height: 570px;
}
.icon-left1 p {
text-transform: uppercase;
font-family: 'Roboto Slab', serif;
color: #fff;
font-weight: 400;
font-size: 14px;
position: relative;
top: 220px;
left: 36px;
}
.icon-left1 img {
border: 0;
position: relative;
top: 222px;
left: 76px;
}
/*=================== LAMPS ===================*/
.image-right1 {
background: url(../images/mainLP-lamps.jpg) center;
height: 570px;
width: 70%;
display: inline-block;
}
.icon-right1 {
float: left;
width: 30%;
background-color: #f4dc86;
padding: 10px;
border-right: 25px solid white;
height: 570px;
}
.icon-right1 p {
text-transform: uppercase;
font-family: 'Roboto Slab', serif;
color: #fff;
font-weight: 400;
font-size: 14px;
position: relative;
top: 220px;
left: 36px;
}
.icon-right1 img {
border: 0;
position: relative;
top: 222px;
left: 93px;
}
.wrapper {
width: 70%;
margin: 0 auto;
} (This is around everything)
Я не озабочен еще о отзывчивым, но я должен быть вниз по дороге. Несколько вопросов, которые я вижу.
Фоновое изображение для каждого из контейнеров не соответствует правильному размеру - оно обрезается. Как я могу это исправить?
Должен быть лучший способ поплавать иконкой и текстом в div рядом с изображением ../ прямо сейчас он неустойчив и позиционирован относительно, который, как я считаю, не верен. ИЛИ, если это правильно, я думаю, что это неправильно.
Вы можете использовать 'background-size: cover' на фоне изображения –
Я пробовал это, и он, похоже, не изменил ситуацию. Спасибо за предложение. – user5371630
Что вы подразумеваете под словом «он обрезается»? Разве он не расширяется, чтобы соответствовать ширине? или он растет слишком много, а некоторые части скрыты? Как он терпит неудачу? –