как оптимизировать фон сайта

@tok-80 · Регистрация: 24.04.2010

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

Решил сделать фон у сайта нашел вот такоей код

HTML5
1
2
3
4
5
ody {padding: 0;
margin: 0px;
background: #227fce url(img/vv2.jpg) no-repeat center top;
width: 100%;
display: table;}

все вроде работает но если картинка мала ее не хватает на экран, это получается если сейчас используют разрешение уже на 1920 то картинку что делать такой же ширины, попробовал.Я даже в фотошопе качество картинки поставил 30% но все равно размер аж 150 кб. Может кто знает лучше способ подскажите ниже скрин скинул с алавар

@Alorian · 13.07.2010, 12:30

tok-80, ну так картинка и у алавара тоже 170 килобайт весит.
alawar.ru/bitrix/templates/alawar6/lang_tpl/ru/promo_tpl/fishdom-2/promo_images/promo_bg.jpg
Как еще уменьшить картинку с таким количеством цветов и расчитанную на огромное разрешение я не знаю. Можно подумать над всякими специфичными решениями, но сильно много они тоже не убавят.

@GalaX · 13.07.2010, 13:20

если фон идет одной картинкой, то можешь даже не париться насчет того, чтоб сделать ее под разные разрешения (тем более 150 кило нафиг никому не нужны)
вот если остался исходник дизайна, то можно сохранить картинки по-отдельности (черепаху отдельно, рыбу отдельно, дом справа отдельно, дно отдельно) короче нужные элементы диза отделить (ну немного наверное еще дорисовывать придется), и вот только потом можно будет сделать нормальную резиновую верстку под разные разрешения

@Hagrael · 13.07.2010, 13:32

Создай несколько картинок, каждая для своего разрешения. В JS есть переменные screen.width и screen.height (в пикселях). И пиши

JavaScript
1
2
if (screen.width==1024) {...}
if (screen.width==800) {...}

Ты ваще знаком с JS?

@][акер · 13.07.2010, 17:28

Hagrael, спасибо! Хоть я ЖабуСкрипт не знаю, но вникнуть можно! То же самое что C++ (почти)!

Vovan-VE · 13.07.2010, 17:40

Не по теме:

][акер,

Ну не скажи

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var C = (function(){
    var C = function(x){
        this.x = x;
    };
    C.prototype.foo = function(){
        alert(this.x);
    };
    return C;
})();
var c = new C(5);
c.foo();

;)

@Hagrael · 13.07.2010, 19:09

][акер, самому недавно подсказали по этому делу

@tok-80 · 13.07.2010, 20:10 **[ТС]**

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

Создай несколько картинок, каждая для своего разрешения. В JS есть переменные screen.width и screen.height (в пикселях). И пиши

JavaScript
1
2
if (screen.width==1024) {...}
if (screen.width==800) {...}

Ты ваще знаком с JS?

Блин жаль не знаком с js не изучал
Может есть готовый?

@Hagrael · 14.07.2010, 07:01

tok-80, так как мне сейчас делать нечего (на свой вопрос я ответа ещё не получил), то я напишу скрипт.
В head'e:

JavaScript
1
2
3
4
5
6
7
<script>
function f() {
if (screen.width==1024) {body.background="путь к бэкграунду шириной 1024px"}
if (screen.width==1280) {body.background="путь к бэкграунду шириной 1280px"}
// дальше всё аналогично, но если есть вопросы - пишите
}
</script>

Далее добавляем в body атрибут:

HTML5
1
onload="f()"

Лучше, мне кажется, убрать из стилей url к бэкграунду, т.к. он поставится сам.
Но я скрипт не тестил! Может и не сработать!

@tok-80 · 14.07.2010, 09:57 **[ТС]**

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

tok-80, так как мне сейчас делать нечего (на свой вопрос я ответа ещё не получил), то я напишу скрипт.
В head'e:

JavaScript
1
2
3
4
5
6
7
<script>
function f() {
if (screen.width==1024) {body.background="путь к бэкграунду шириной 1024px"}
if (screen.width==1280) {body.background="путь к бэкграунду шириной 1280px"}
// дальше всё аналогично, но если есть вопросы - пишите
}
</script>

Далее добавляем в body атрибут:

HTML5
1
onload="f()"

Лучше, мне кажется, убрать из стилей url к бэкграунду, т.к. он поставится сам.
Но я скрипт не тестил! Может и не сработать!

А на локальном сервере работает сделал, что то не работает

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<script>
function f() {
if (screen.width==1024) {body.background="img/virtual.jpg"}
if (screen.width==1280) {body.background="img/vv2.jpg"}
}
</script>
 
 
 
 
</head>
<body onload="f()">

@Hagrael · 14.07.2010, 10:11

Попробуй clientWidth.

@tok-80 · 14.07.2010, 12:32 **[ТС]**

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

Попробуй clientWidth.

не ни идет а в css что надо?

@Taras72 · 15.07.2010, 18:54

Может так сделать http://ruseller.com/lessons.php?rub=2&id=417
можно с jQuery и просто CSS

@][акер · 11.08.2010, 19:31

Кстати, я ещё посоветую в CSS написать background-attachment: fixed; чтобы при прокрутки страницы фон застыл.

@GalaX · 11.08.2010, 19:44

fixed - это тоже вариант, но тута такой дизайн неплохой - поэтому имхо такой дизайн не надо плохой версткой портить (надеюсь диз индивидуальный/уникальный)

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	13.07.2010, 12:30
	tok-80, ну так картинка и у алавара тоже 170 килобайт весит. alawar.ru/bitrix/templates/alawar6/lang_tpl/ru/promo_tpl/fishdom-2/promo_images/promo_bg.jpg Как еще уменьшить картинку с таким количеством цветов и расчитанную на огромное разрешение я не знаю. Можно подумать над всякими специфичными решениями, но сильно много они тоже не убавят. 0

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	13.07.2010, 13:20
	если фон идет одной картинкой, то можешь даже не париться насчет того, чтоб сделать ее под разные разрешения (тем более 150 кило нафиг никому не нужны) вот если остался исходник дизайна, то можно сохранить картинки по-отдельности (черепаху отдельно, рыбу отдельно, дом справа отдельно, дно отдельно) короче нужные элементы диза отделить (ну немного наверное еще дорисовывать придется), и вот только потом можно будет сделать нормальную резиновую верстку под разные разрешения 0

@][акер #define книжный_червь Я 185 / 96 / 21 Регистрация: 30.01.2010 Сообщений: 780
	13.07.2010, 17:28
	Hagrael, спасибо! Хоть я ЖабуСкрипт не знаю, но вникнуть можно! То же самое что C++ (почти)! 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	13.07.2010, 19:09
	][акер, самому недавно подсказали по этому делу 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	14.07.2010, 10:11
	Попробуй clientWidth. 0

@Taras72 0 / 0 / 1 Регистрация: 15.07.2010 Сообщений: 4
	15.07.2010, 18:54
	Может так сделать http://ruseller.com/lessons.php?rub=2&id=417 можно с jQuery и просто CSS 0

@][акер #define книжный_червь Я 185 / 96 / 21 Регистрация: 30.01.2010 Сообщений: 780
	11.08.2010, 19:31
	Кстати, я ещё посоветую в CSS написать background-attachment: fixed; чтобы при прокрутки страницы фон застыл. 0

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	11.08.2010, 19:44
	fixed - это тоже вариант, но тута такой дизайн неплохой - поэтому имхо такой дизайн не надо плохой версткой портить (надеюсь диз индивидуальный/уникальный) 0