Фон слева от контейнера

@Desent · Регистрация: 07.06.2014

Author24 — интернет-сервис помощи студентам

В дизайне у секции есть фон, который идет с левого края экрана и до примерно 60% ширины контейнера, как это можно сделать на верстке? Сайт адаптивный, верстается с помощью bootstrap. Плюс в контейнере есть изображение, правый край которого должен всегда совпадать с правым краем этого фона (там где он заканчивается), и одновременно с этим не должен быть частью этого фона, так как должен помещаться в контейнер и не должен выходить за его рамки. На картинке схематически изобразил, как это выглядит.

@SiarheiSiarhei · 22.02.2018, 16:56

во дает... изложения -вопроса как сам

Сообщение от Desent

bootstrap

.... сжато - "все до кучи"...

@AlexZaw · 22.02.2018, 18:11

Можно попробовать поизвращаться и обернуть все это дело в еще один контейнер и задать оффсеты, можно поизвращаться с js, но, скорее всего, проще всего это делается с помощью гридов

@Desent · 22.02.2018, 19:27 **[ТС]**

Крч, сделал с помощью box-shadow, чтоб не пришлось кучу новых оберток создавать. Ничего лучше я придумать не смог.
Примерно так:

HTML5

<section class="section">
    <div class="container">
        <div class="row">
            <div class="section-bg"></div>
        </div>
    </div>
</section>

CSS

.section {
    height: 500px;
    overflow: hidden;
}
 
.section-bg {
    height: 500px;
    box-shadow: -1600px 0 0 1000px #2b30ca;
}

Новые блоги и статьи
Это работает. Скорость асинхронной логики велика. Вопрос видимо останется в стабильности. Плата - огонь! Hrethgir 13.01.2025 По прошлому проекту в Logisim Evolution https:/ / www. cyberforum. ru/ blogs/ 223907/ blog8781. html прилагаю файл архива проекта Gowin Eda и снимок. Восьмибитный счётчик из сумматора+ генератор сигнала. . .	UserScript для подсветки кнопок языков программирования в зависимости от текущего раздела volvo 13.01.2025 В результате работы этого скрипта подсвечиваются нужные кнопки не только в форме быстрого ответа, но и при редактировании сообщения: / / ==UserScript== / / @name CF_DefaultLangSelect / / . . .	Введение в модели и алгоритмы машинного обучения InfoMaster 12.01.2025 Машинное обучение представляет собой одну из наиболее динамично развивающихся областей искусственного интеллекта, которая фокусируется на разработке алгоритмов и методов, позволяющих компьютерам. . .	Как на Python создать нейросеть для решения задач InfoMaster 12.01.2025 В контексте стремительного развития современных технологий особое внимание уделяется таким инструментам, как нейросети. Эти структуры, вдохновленные биологическими нейронными сетями, используются для. . .	Как создать нейросеть для генерации картинок на Python InfoMaster 12.01.2025 Генерация изображений с помощью искусственных нейронных сетей стала одним из наиболее захватывающих направлений в области компьютерного зрения и машинного обучения. В этой статье мы рассмотрим. . .	Создание нейросети для генерации текста на Python InfoMaster 12.01.2025 Нейросети, или искусственные нейронные сети, представляют собой модели машинного обучения, вдохновленные работой человеческого мозга. Они состоят из множества взаимосвязанных узлов, или "нейронов",. . .
Как создать нейросеть распознавания изображений на Python InfoMaster 12.01.2025 Введение в распознавание изображений с помощью нейросетей Распознавание изображений с помощью нейронных сетей стало одним из самых впечатляющих достижений в области искусственного интеллекта. Эта. . .	Основы искуственного интеллекта InfoMaster 12.01.2025 Искусственный интеллект (ИИ) представляет собой одну из наиболее динамично развивающихся областей современной науки и технологий. В широком смысле под искусственным интеллектом понимается способность. . .	Python и нейросети InfoMaster 12.01.2025 Искусственные нейронные сети стали неотъемлемой частью современных технологий, революционизировав множество областей - от медицинской диагностики до автономных транспортных средств. Python, благодаря. . .	Python в машинном обучении InfoMaster 12.01.2025 Python стал неотъемлемой частью современного машинного обучения, завоевав позицию ведущего языка программирования в этой области. Его популярность обусловлена несколькими ключевыми факторами, которые. . .	Создание UI на Python с TKinter InfoMaster 12.01.2025 TKinter — это одна из наиболее популярных библиотек для создания графических интерфейсов пользователей (GUI) в языке программирования Python. TKinter входит в стандартную библиотеку Python, что. . .	HTML5 в разработке мобильных приложений InfoMaster 12.01.2025 Введение: Обзор роли HTML5 в мобильной разработке В современном мире мобильных технологий HTML5 стал ключевым инструментом для разработки кроссплатформенных приложений. Эта технология произвела. . .

@Desent 3 / 3 / 1 Регистрация: 07.06.2014 Сообщений: 58
		1
	Фон слева от контейнера 21.02.2018, 18:10. Показов 1098. Ответов 3 Метки нет (Все метки) В дизайне у секции есть фон, который идет с левого края экрана и до примерно 60% ширины контейнера, как это можно сделать на верстке? Сайт адаптивный, верстается с помощью bootstrap. Плюс в контейнере есть изображение, правый край которого должен всегда совпадать с правым краем этого фона (там где он заканчивается), и одновременно с этим не должен быть частью этого фона, так как должен помещаться в контейнер и не должен выходить за его рамки. На картинке схематически изобразил, как это выглядит. Миниатюры 0

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	22.02.2018, 16:56	2
	во дает... изложения -вопроса как сам Сообщение от Desent bootstrap .... сжато - "все до кучи"... 0

@AlexZaw Модератор 2352 / 1720 / 668 Регистрация: 07.08.2016 Сообщений: 4,050
	22.02.2018, 18:11	3
	Можно попробовать поизвращаться и обернуть все это дело в еще один контейнер и задать оффсеты, можно поизвращаться с js, но, скорее всего, проще всего это делается с помощью гридов 0

	22.02.2018, 19:27