Добрый день!
Подскажите, как правильно сверстать изображение (и аналогичные случаи в принципе) указанное стрелкой на картинке. Особенность, которая не видна на экране - это то, что эта картинка начинается не по середине экрана, а правее середины на 15px.
Уточню моменты, которые мне не понятны:
1. Делать через img или background.
2. Как реализовать выход из основного блока с контентом.
3. Как правильно организовать поведение картинки при изменении разрешений экрана.
4. И как учесть расположение начала картинки на 15 px правее центра.
Вот код, имитирующий ситуацию с тем, что я самостоятельно смог сделать:<!DOCTYPE HTML>
<html>
<head>
<title>Изображение в край</title>
<style type="text/css">
.column {
width: 1134px;
height: 300px;
border: 3px solid black;
margin: 0 auto;
font-size: 30px;
text-align: center;
}
.your-design {
min-width: 1140px;
height: 560px;
background-image: url("http://i.yapx.ru/9kWB.png");
background-repeat: no-repeat;
background-position: calc(50% + 621px) 0;
}
.text-design {
width: 1140px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="column">Имитация основного блока с контентом</div>
<div class="your-design">
<div class="text-design">
<p>Текст слева от картинки</p>
</div>
</div>
</body>
</html>
Средний
Средний