Задать вопрос
@Champer
html

Как создать слой с шириной больше контейнера?

Добрый день!

Какие свойства должен содержать div с фоновым изображением, чтобы занимать 100% ширины экрана, находясь внутри контейнера с жестко заданными размерами (допустим, пусть будет 1060px)?
Вариант с position:absolute не рассматривается, т.к. не может быть известно расстояние от верха/низа страницы.

Я думал использовать псевдоклассы ::after и ::before и запихивал в них те части фона, которые не помещались в ширину основного контейнера, но и тут появилась загвоздка: т.к. расстояние от основного контейнера, который находится по центру страницы, до края окна может меняться, использование фиксированного значения ширины псевдокласса, ровно как и width:100%, приводит к тому, что псевдокласс справа вылазит за пределы окна (появляется скролл).

Чтобы было понятнее, нужно реализовать что-то вроде того, что прикреплено в файле.
9db78ce69f5f4c0ca0099831fdebff2b.jpg
Как быть?
  • Вопрос задан
  • 2439 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
grealexti
@grealexti
Обязательно внутри контейнера? Что это будет? Карусель какая-то?

UPD: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.wrapper {
	width:800px;
	height:800px;
	margin:0 auto;
	border-left:1px #ccc solid;
	border-right:1px #ccc solid;
	background:white;
}
.wrapper .blue {
	background:blue;
	height:150px;
}
.wrapper .px300 {
	height:300px;
}
.wrapper .red {
	height:150px;
	width:100%;
	left:0;
	position:absolute;
	z-index:-1;
	background:red;
	margin-top:20px;
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="px300"></div>
  <div class="red"></div>
  <div class="blue"></div>
</div>
</body>
</html>
Ответ написан
8 комментариев
8 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Расшифровать требуемые параметры из CAN-шины авто Chery Tiggo 7 Pro
23 дек. 2024, в 00:27
20000 руб./за проект
Отправка команды на (раз)блокировку двигателя Chery Tiggo 7 Pro
23 дек. 2024, в 00:15
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы