Задать вопрос
@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 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать чат-бота telegram для миникурса
20 апр. 2024, в 18:09
70000 руб./за проект
Настроить доступ к Netflix
20 апр. 2024, в 18:04
3000 руб./за проект
Помочь настроить GeoIp у nginx для docker nginx:alpine
20 апр. 2024, в 17:55
3000 руб./за проект
Ещё заказы