Background по правой стороне

@Samsagriz · Регистрация: 23.09.2012

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

Весь сайт смещен немного на левую сторону (так задумано). Чтобы не оставлять просто пустое место справа, сделал для него фон. Получается два блока - левый с контентом и правый с фоном. При этом фон не растягивается по вертикали, хотя выставлены repeat-y, пробовал и min-height, и просто height. Вообще странная картина, потому что сам фон по высоте очень большой. Вот что я написал:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#content {
    float: left;
    width: 50%;
    height: auto;
    margin-top: 0;
    margin-left: 10%;
}
 
#background {
    float: right;
    width: 40%;
    min-height: 100%;
    background: url(images/background.png) repeat-y;
    margin-top: 0;
}

Что можно сделать чтобы он нормально отображался?

@perfectdim · 26.12.2013, 19:43

CSS
1
background-size: cover;

Доктор Зойдберг · 26.12.2013, 19:56

А чем плохо подложить фон под всю страницу(в body)?
И под контент и рядом.

@Samsagriz · 26.12.2013, 20:25 **[ТС]**

Доктор Зойдберг Очень большой получится тогда фон. Я же расчитываю на различные разрешения экрана. Помимо самого фона справа есть еще текстура под всей страницей.

perfectdim
не работает команда. Вообще никакого эффекта.

@perfectdim · 26.12.2013, 21:51

CSS
1
2
3
4
#background {
    background: url(images/background.png);
    background-size: cover
}

вот так вот нет никакого эффекта???

@Samsagriz · 26.12.2013, 22:37 **[ТС]**

perfectdim нет

Я сам не могу понять в чем дело, как так может быть что в обычном диве не отображается обычное изображение. Проблема в том что в нем нет никакого контента, он пустой. Если что-нибудь вписать или сделать пару отступов вниз, то его видно. А так просто пустой блок в одну строку.

@Academik · 26.12.2013, 22:43

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

#background {
* * float: right;
* * width: 40%;
* * min-height: 100%;
* * background: url(images/background.png) repeat-y;
* * margin-top: 0;
}

Потому что свойство float: right; схлопывает элемент, поэтому фона не видно. А min-height: 100%; не работает, потому что у родителя наверно высота не указана.

@Samsagriz · 26.12.2013, 23:01 **[ТС]**

35cm задал сейчас высоту в 100 в body, до этого была не указана. Фон появился даже несмотря на float, но: при попытке поменять ширину блока чем больше задаешь, тем больше увеличивается фон, как под лупой. И не повторяется по вертикали, хотя я указал repeat-y. На данный момент блок выглядит так:

CSS
1
2
3
4
5
6
7
{
    float: right;
    background: url(images/background.png) repeat-y;
    background-size: cover;
    width: 30%;
    height: 100%;
}

Если убираю у дива высоту на 100%, он вообще пропадает.

Добавлено через 8 минут
Убрал background-size, теперь все лежит как надо. Не могу только сообразить как заставить его повторяться по высоте.

@Academik · 26.12.2013, 23:05

CSS
1
background-size: cover;

Уберите

Добавлено через 2 минуты

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

Не могу только сообразить как заставить его повторяться по высоте.

Если высота изображения выше чем высота блока, то он никак не будет повторяться.

@Samsagriz · 26.12.2013, 23:11 **[ТС]**

Сообщение от 35cm

Если высота изображения выше чем высота блока, то он никак не будет повторяться.

Не понял смысла фразы. То есть. если изображение в высоту скажем, 900 px, как определяется выше он блока или нет? Для эксперимента сейчас поменял на маленькое изображение - то же самое, фон повторяется ровно до той же точки. в body и в блоке указаны 100%, может что-то другое нужно?

@Samsagriz · 28.12.2013, 03:48 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

Доктор Зойдберг 104 / 88 / 21 Регистрация: 19.05.2012 Сообщений: 458
	26.12.2013, 19:56
	А чем плохо подложить фон под всю страницу(в body)? И под контент и рядом. 0

@Samsagriz 2 / 2 / 0 Регистрация: 23.09.2012 Сообщений: 98
	26.12.2013, 20:25 [ТС]
	Доктор Зойдберг Очень большой получится тогда фон. Я же расчитываю на различные разрешения экрана. Помимо самого фона справа есть еще текстура под всей страницей. perfectdim не работает команда. Вообще никакого эффекта. 0

@Samsagriz 2 / 2 / 0 Регистрация: 23.09.2012 Сообщений: 98
	26.12.2013, 22:37 [ТС]
	perfectdim нет Я сам не могу понять в чем дело, как так может быть что в обычном диве не отображается обычное изображение. Проблема в том что в нем нет никакого контента, он пустой. Если что-нибудь вписать или сделать пару отступов вниз, то его видно. А так просто пустой блок в одну строку. 0

@Samsagriz 2 / 2 / 0 Регистрация: 23.09.2012 Сообщений: 98
	28.12.2013, 03:48 [ТС]
	Ну так как быть, кто может помочь? Нужно чтобы пустой, без контента див по правой стороне и с фоном (разумеется повторяющимся по вертикали), растягивался автоматически до самого низа страницы, независимо от объема контента находящегося в левом диве. Никак не соображу как это сделать. Суть именно в том что див пустой, потому не хочет растягиваться и повторяться. 0