Как правильно сверстать фон?

@Блеф · Регистрация: 14.05.2014

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

Здравствуйте!
Решил заверстать один шаблон но наткнулся на проблему с фоном.
Структура очень простая но, не знаю как правильно реализовать.

Пробовал нарезать горизонтальными полосками, кружево стыкуется, а сам фон нет. Тогда подумал кружево использовать как рамку основного контейнера. Но этот проклятый ie =< 6 не поддерживает изображение как картинку.

Как бы вы сверстали данный фон?

Заранее спасибо.

@petlyakss · 22.07.2014, 21:02

Попробуйте исользовать это: http://htmlbook.ru/css/background-size

@Блеф · 22.07.2014, 21:11 **[ТС]**

поиграл с горизонтальными полосками вроде нормально получилось. Только вот как правильно центровать главный контейнер, а то в некоторых разращениях налазит на кружево.
|----|-----------|------|
|bg |content|bg...|
|left|...........|right|
|....|...........|......|
|----|----------|-------|

Если я реализую структуру выше где bg left фон с лева, а bg right фон с права и выполню все в div. Насколько правильно будет считаться такая реализация?

@MVS76 · 22.07.2014, 21:12

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

налазит на кружево.

используйте z-index

@Вова101 · 22.07.2014, 21:17

Нет! Делайте вот так! самый лучший вариант, попробуйте сначала так а потом пути поменяете на свои:

CSS
1
2
body{border-style: solid; border-width: 0px 102px 0px 103px; -moz-border-image: url([url]https://www.cyberforum.ru/attachments/421724d1406047218[/url]) 292 102 606 103 repeat; -webkit-border-image: url([url]https://www.cyberforum.ru/attachments/421724d1406047218[/url]) 292 102 606 103 repeat; -o-border-image: url([url]https://www.cyberforum.ru/attachments/421724d1406047218[/url]) 292 102 606 103 repeat; border-image: url([url]https://www.cyberforum.ru/attachments/421724d1406047218[/url]) 292 102 606 103 fill repeat;
}

Добавлено через 21 секунду
пропишите в стилях

Добавлено через 1 минуту
Я уже проверил, работает на ура, и когда сжимаете экран то картинка сужается тоже.

@BarbosLV · 22.07.2014, 21:24

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

|----|-----------|------|
|bg |content|bg...|
|left|...........|right|
|....|...........|......|
|----|----------|-------|

всё верно. только вырежи отдельно бахрому а мозайку основным фоном к боди.

@Вова101 · 22.07.2014, 21:35

То что вы хотели, не так ли?

@Вова101 · 22.07.2014, 21:39

Я советую так потому что этот код в будущем не будет вам мешать во время верстки сайта, присмотритесь в код, поймете в чем прикол)

@Блеф · 22.07.2014, 22:01 **[ТС]**

Пока ждал ответ, решил по экспериментировать сделал так.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
body
{
    background: url('img/bg.png') repeat;
}
 
#main
{
    width: 900px;
    margin: 0 auto;
    padding: 10px 48px;
    background: url('img/bg_content.png') repeat-y;
}

Фон вырезал отдельно, а кружево соединил с главным контейнером. Вроде нормально получилось.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Блеф > /dev/null 286 / 119 / 86 Регистрация: 14.05.2014 Сообщений: 767

	Как правильно сверстать фон? 22.07.2014, 20:44. Показов 1994. Ответов 8 Метки нет (Все метки) Здравствуйте! Решил заверстать один шаблон но наткнулся на проблему с фоном. Структура очень простая но, не знаю как правильно реализовать. Пробовал нарезать горизонтальными полосками, кружево стыкуется, а сам фон нет. Тогда подумал кружево использовать как рамку основного контейнера. Но этот проклятый ie =< 6 не поддерживает изображение как картинку. Как бы вы сверстали данный фон? Заранее спасибо. Миниатюры 0

@petlyakss 1 / 1 / 2 Регистрация: 13.07.2014 Сообщений: 10
	22.07.2014, 21:02
	Попробуйте исользовать это: http://htmlbook.ru/css/background-size 0

@Блеф > /dev/null 286 / 119 / 86 Регистрация: 14.05.2014 Сообщений: 767
	22.07.2014, 21:11 [ТС]
	поиграл с горизонтальными полосками вроде нормально получилось. Только вот как правильно центровать главный контейнер, а то в некоторых разращениях налазит на кружево. \|----\|-----------\|------\| \|bg \|content\|bg...\| \|left\|...........\|right\| \|....\|...........\|......\| \|----\|----------\|-------\| Если я реализую структуру выше где bg left фон с лева, а bg right фон с права и выполню все в div. Насколько правильно будет считаться такая реализация? 0

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	22.07.2014, 21:35
	То что вы хотели, не так ли? Миниатюры 0

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	22.07.2014, 21:39
	Я советую так потому что этот код в будущем не будет вам мешать во время верстки сайта, присмотритесь в код, поймете в чем прикол) 0