Установка изображения фона сайта

@Tony_ Montana · Регистрация: 19.08.2012

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

Заранее прощу прощения, уверен эта тема уже поднималась. Но все таки помогите раз и навсегда разобрать как правильно устанавливать background так чтобы в разных браузерах, на разных мониторах картинка всегда одинаково была выровнена по краям и увеличивалась и уменьшалась бы в зависимости от разрешения... Пробовал самостоятельно это сделать как то так:

CSS
1
2
body{background: #000 url(main.png) no-repeat; width=100%; height=100%; 
position: absolute; z-index: -1000; }

пробовал еще в html писать через стиль ничего не выходит, картинка появляется либо в своем размере либо не появляется вообще.
Помогите пожалуйста, объясните как это правильно надо делать
заранее спасибо за помощь

@pavlinmavlin · 19.08.2012, 20:55

Сообщение от Tony_ Montana

Заранее прощу прощения, уверен эта тема уже поднималась. Но все таки помогите раз и навсегда разобрать как правильно устанавливать background так чтобы в разных браузерах, на разных мониторах картинка всегда одинаково была выровнена по краям и увеличивалась и уменьшалась бы в зависимости от разрешения... Пробовал самостоятельно это сделать как то так:
body{background: #000 url(main.png) no-repeat; width=100%; height=100%;
position: absolute; z-index: -1000; }
пробовал еще в html писать через стиль ничего не выходит, картинка появляется либо в своем размере либо не появляется вообще.
Помогите пожалуйста, объясните как это правильно надо делать
заранее спасибо за помощь

Попробуйте так

CSS
1
2
3
4
5
6
7
8
 body
{
background: #000 url(main.png) no-repeat; 
padding:0; margin:0;
background-size: 100% 100%; /* первые 100% - ширина, вторые 100% - высота */ 
-o-background-size: 100% 100%; /* Для браузера Opera */
-moz-background-size: 100% 100%; /* Для MozillaFireFox */
}

@Taatshi · 19.08.2012, 20:56

почитайте - тут все понятно и несколько способов

@Tony_ Montana · 19.08.2012, 21:11 **[ТС]**

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

Попробуйте так

CSS
1
2
3
4
5
6
7
8
 body
{
background: #000 url(main.png) no-repeat; 
padding:0; margin:0;
background-size: 100% 100%; /* первые 100% - ширина, вторые 100% - высота */ 
-o-background-size: 100% 100%; /* Для браузера Opera */
-moz-background-size: 100% 100%; /* Для MozillaFireFox */
}

спасибо помогло, только нормально растягивает только на главной странице, а на остальных только по ширине, высота остается неизменной... в чем может быть проблема?

Добавлено через 28 секунд

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

почитайте - тут все понятно и несколько способов

отличная статья, спасибо

@and_y87 · 20.08.2012, 10:29

Tony_ Montana, ты прописал <style></style> только в файле index.html(php) или ты добавил код в файл ***.css ?

@Tony_ Montana · 20.08.2012, 17:39 **[ТС]**

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

Tony_ Montana, ты прописал <style></style> только в файле index.html(php) или ты добавил код в файл ***.css ?

я конечно еще нуб в этих делах но не на столько, в html я писал стайл только не в индексном файле а в header.php индекс почему-то пустой совсем был а в хедере весь код главной страницы... наверно из за особенностей шаблона движка. Через html получалась лишь поставить картинку в таком размере как она есть и ничего с ней не происходило. Помог вот этот код в файле custom.css:

CSS
1
2
3
4
5
6
7
8
body
{
background: #000 url(main.png) no-repeat; 
padding:0; margin:0;
background-size: 100% 100%; /* первые 100% - ширина, вторые 100% - высота */ 
-o-background-size: 100% 100%; /* Для браузера Opera */
-moz-background-size: 100% 100%; /* Для MozillaFireFox */
}

но опять же он действует только на главную страницу, а на остальные нет...(

@and_y87 · 20.08.2012, 17:51

Tony_ Montana, Инспектируй код на Главной странице... найди место включения бэкграунда...
и исследуй это же место на страницах где фон не подгружается...

Есть ссылка на сайт?

@Tony_ Montana · 20.08.2012, 18:12 **[ТС]**

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

Tony_ Montana, Инспектируй код на Главной странице... найди место включения бэкграунда...
и исследуй это же место на страницах где фон не подгружается...

Есть ссылка на сайт?

slav-raduga.com.ua

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

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

Tony_ Montana, Инспектируй код на Главной странице... найди место включения бэкграунда...
и исследуй это же место на страницах где фон не подгружается...

Есть ссылка на сайт?

имеешь ввиду через просмотр кода страницы посмотреть где подключается фон? но я почему-то даже на главной не могу этого найти

@and_y87 · 20.08.2012, 18:55

Tony_ Montana, у меня на этом сайте зелёный фон подключён на каждой странице...
Crome, FireFox, Opera

@Tony_ Montana · 20.08.2012, 21:20 **[ТС]**

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

Tony_ Montana, у меня на этом сайте зелёный фон подключён на каждой странице...
Crome, FireFox, Opera

и что на всех страницах он растянут и заполняет все пространство?

@and_y87 · 21.08.2012, 00:15

Tony_ Montana, вам надо что бы у вас было

CSS
1
2
3
html {
    height: 100%;
}

тогда получите ваш результат, фоновая картинка растянется на всю высоту окна...

@Tony_ Montana · 23.08.2012, 16:47 **[ТС]**

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

Tony_ Montana, вам надо что бы у вас было

CSS
1
2
3
html {
    height: 100%;
}

тогда получите ваш результат, фоновая картинка растянется на всю высоту окна...

у меня так и было написано, наверное из за движка на пустых страницах фон не растягивался, при заполнении все становится нормально, спасибо

Новые блоги и статьи Все статьи Все блоги /
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 https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии 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 позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	19.08.2012, 20:56
	почитайте - тут все понятно и несколько способов 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 98
	20.08.2012, 10:29
	Tony_ Montana, ты прописал <style></style> только в файле index.html(php) или ты добавил код в файл ***.css ? 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 98
	20.08.2012, 17:51
	Tony_ Montana, Инспектируй код на Главной странице... найди место включения бэкграунда... и исследуй это же место на страницах где фон не подгружается... Есть ссылка на сайт? 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 98
	20.08.2012, 18:55
	Tony_ Montana, у меня на этом сайте зелёный фон подключён на каждой странице... Crome, FireFox, Opera 0