Фон сайта – преимущества и недостатки"

[ALENA]

 Часто меня просят установить  или  сделать  изображение  в виде одного  большого для вставки в качестве фона на сайт .  Да ,согласна, красиво когда фон в виде изображений . Сайт может выглядеть  интересным и разнообразным. Такой фон может максимально точно отражать тематику сайта.Если говорить о фоне в виде одной большой картинки, то эта самая картинка должна обладать размерами, которые позволили бы заполнить собой все пространство монитора. При этом ориентироваться нужно на монитор высокого разрешения (монитор самого большого разрешения, с которого ваш сайт могут просматривать пользователи).
Эта и есть самая главная проблема при создании такого фона. Если картинка будет недостаточно большой, то на мониторах высокого разрешения останется место, не заполненное картинкой. Все это будет выглядеть не очень эстетично. Следующая проблема при создании такого фона – это отсутствие симметричности изображения. Сам картинка может быть симметричной (найти такую картинку в интернете не составит проблем).
Однако она обладает фиксированным разрешением. То есть симметричной она будет лишь при просмотре сайта на мониторе с точно таким же разрешением. Если разрешение монитора меньше, то симметричность будет утрачена. Конечный результат получится не совсем эстетичным. Картинку, симметричность отображения которой не зависела бы от разрешения монитора, подобрать весьма и весьма сложно (тут гораздо проще создать фон из маленьких симметричных изображений, которые бы заполняли собой все пространство монитора).
Еще один недостаток фона в виде большой картинки – это его некорректное отображение на современных мобильных устройствах. Многие современные смартфоны обладают вытянутым дисплеем высокого разрешения (сопоставимым по разрешению с мониторами компьютера). Однако монитор компьютера имеет альбомную ориентацию, а дисплей смартфона – книжную. Следовательно, картинка заполнит собой лишь какую-то часть дисплея.
Следующий недостаток заключается в том, что большая по разрешению картинка, как правило, много весит (от нескольких сотен килобайт до нескольких мегабайт). Соответственно, в браузере такая картинка будет грузиться довольно долго (по сравнению с фоном из однотонной заливки или мозаичным фоном). Данная проблема была особенно острой еще несколько лет назад, когда скорость интернет-соединения у большинства пользователя была довольно низкой. Теперь это уже не так актуально.
Преимущество у фона в виде большого изображения лишь одно, но оно довольно внушительное. Это возможность подбора фона, максимально близкого к дизайну сайта. Кроме того, чисто визуально такой фон выглядит намного приятнее и эффектнее.

[ZerOverdriver]

А что если размеры фона прописать в процентах ? разве это не будет "резиновым" для любого разрешения монитора ?
...ну типа так :
 
<div style="width:100%; height:100%;">
<div style="position: absolute; left: 0; : 0; right: 0; bottom: 0;">
</div>
</div>
P.S.: ...не пытаюсь умничать , а самообразовываюсь за счёт других :D

[Le_xa]

Соответственно, в браузере такая картинка будет грузиться довольно долго (по сравнению с фоном из однотонной заливки или мозаичным фоном)

Ночью ,машинально,работал через Мозиллу,кучу сайтов переоткрывал,все мухой летало..но в какой то момент тыцнул на ,Беседку" и завис браузер. Вот только хотел про фон отписать,опередили-на тех сайтах,в основном,не было фоновых излишеств.

[ALENA]

Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

 ты имеешь ввиду в css ?
 Вот смотри как прописан наш фон

Код: [Выделить]

{
   background:  url(http://alsiti.net/pic/brev22.png) repeat fixed;
   font: 90%/130% "Verdana", "Arial", "Helvetica", sans-serif;
   margin: 0 auto;
   padding: 15px 0;
}

Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

 у нас размер фона микроскопический . Браузер сам его замащивает . Я могу  скинуть  мануальчик и исходники что бы кто то попробовал сам как это делается .Если интересно конечно .

[ZerOverdriver]

...может я не понял... , но пусть тут и у меня тоже фон замощён ... , а вроде речь шла об отображении цельной картинки для фона сайта  при любом разрешении ? ...хочу всё знать =;)=

[ALENA]

Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

Давай рассуждать логически . Одна из особенностей свойства background-image  определять как будет повторение рисунка только по горизонтали, по вертикали или в обе стороны.  И  в css ты должен прописать путь к этому изображению . Если ты хочешь установить одну цельную картинку,  то  ты пропишешь в  файле no-repeat

Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.

Как пример .

Код: [Выделить]

background:  url(http://alsiti.net/pic/brev22.png)no- repeat ;

гости не могут видеть изображения , пожалуйста зарегистрируйтесь или авторизуйтесь

Оно будет зафиксировано .Как прописать проценты ? От чего они будут браться ?

[ZerOverdriver]

))))) ...А-а-ааа ... Ё... , не могу пока без знаний спорить , но проверю что-то типа такого моего наброска для себя :

<style type="text/css">
body
{
background-image:url('ссылка на изображение');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left ;
margin-right:0;
margin-bottom:0;
width:100%;
height:100%;
}
</style>

P.S.: Да не закидают меня камнями знатоки ! )))))))))

[ZerOverdriver]

!!! Короче я упёртый и хоть и сам всё всегда изучаю , но и до некоторых тонкостей уже дошёл  и решил эту задачку :
(...и всё-таки я был близок логически про 100%...)
 - это в css коде , а что в html и так понятно... :

.тут имя класса  {margin: 0; padding: 0; text-align: кому какой хочется, хоть обычно center; background: url('адрес к картинке') #цвет на всякий случай;
 no-repeat center center; background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

P.S.: вот этот cover и растягивает картинку по всем сторонам в зависимости от разрешения, а всё что до этого убирает всякие неожиданные отступы.
...есть ещё один способ попроще - center 100% 100% в начале сделать , но этот более профессиональный.

гости не могут видеть изображения , пожалуйста зарегистрируйтесь или авторизуйтесь

[/img]

гости не могут видеть изображения , пожалуйста зарегистрируйтесь или авторизуйтесь

подтверждение:

Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

[ALENA]

Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

  ты в этот справочник заглядываешь ?

Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

Он  у меня скоро настольной книгой будет . Там и html и css .

[ALENA]

подтверждение: Ссылка

 Что то загружается тяжеловато .    Или незакешировано пока  Вес страницы сколько ?

[Василий Алибабаевич]

Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

DynamicWindowSize=1   и не парся 
Извините что влезаю с приколами 

[ZerOverdriver]

  та же фигня - реально ВСЁ почти есть (я всегда в мозге замучу то чего небывает , но соединю что-либо и сделаю  )

ты в этот справочник заглядываешь ? Ссылка Он  у меня скоро настольной книгой будет .  Там и html и css .

[ZerOverdriver]

  Олег , дружище - это не прикол  stop ты должен был по логике посоветовать #SCREENAREAWIDTH# & #SCREENAREAHEIGHT#  )

ZerOverdriver, DynamicWindowSize=1   и не парся  Извините что влезаю с приколами

[carlo22]

Добрый день.
Хочу спросить у знатоков.
Как заменить фоновое изображение только шапки форума?
У меня сейчас установлено вот это

гости не могут видеть изображения , пожалуйста зарегистрируйтесь или авторизуйтесь

Но я хочу установить другой фон шапки темы.
Я в этом деле новичек. Так что прошу подсказать как это сделать.

[ALENA]

Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

Тема какая ?