@JohnDoe116

Как выбить изображение за пределы блока?

задана жесткая ширина контейнера, но нужно псевдоэлемент с изображением выбить за пределы контейнера и прижать в левой стороне странички, есть ли способы сделать это на чистом css?
  • Вопрос задан
  • 3354 просмотра
Пригласить эксперта
Ответы на вопрос 2
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Если у контейнера не стоит overflow: hidden, можно. Обычно высчитывают через calc:
.elem::before {
    margin-left: calc(50vw - половина ширины контейнера); 
}
// или
.elem::before {
    transform: translateX(calc(50vw - половина ширины контейнера)); 
}
Ответ написан
@noeer
Нужно прижать к левой стороне страницы?
Или к левой стороне контейнера?
Если привязка нужна именно экрану, то псевдоэлемент нужно создавать для секции.
Примерно так
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.block{
			position: relative;
		}
		.block:before{
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100px;
			height: 100px;
			background: url('https://via.placeholder.com/100.png/09f/fff');
		}
		.container{
			width: 1200px;
			margin: 0 auto;
			position: relative;
			z-index: 2;
		}
	</style>
</head>
<body>
	<div class="block">
		<div class="container">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed temporibus, aliquam. Explicabo, unde eos officia dignissimos ducimus cum esse rem fugiat, dolorum odio non natus neque repellat asperiores! Fuga, dolores.</p>
		</div>
	</div>
</body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы