Для тех ,кто решил зарегистрироваться на форуме «Беседка» !
Категорически запрещена регистрация  с одноразового и временного e-mail !Такие пользователи будут отправляться в бан без объяснения причин.
После регистрации необходимо активировать свою учетную запись .Если Вы в почте не обнаружили письмо с активацией рекомендуется проверить папку «Спам».
С уважением
 Администрация форума

* Недавно обновленные темы

Автор Тема: Фон сайта – преимущества и недостатки"  (Прочитано 1916 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн ALENA

  • *
  • Сообщений: 56519
  • Пол: Женский

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

Оффлайн ZerOverdriver

  • real-слепец
  • *
  • Сообщений: 52
  • Пол: Мужской
  • полуслепой зануда ;)
  • Имя : Алексей
  • Статус : тормоз

Фон сайта – преимущества и недостатки"
« Ответ #1 : 16 Октябрь 2014, 13:20 »
А что если размеры фона прописать в процентах ? разве это не будет "резиновым" для любого разрешения монитора ?
...ну типа так :
 
<div style="width:100%; height:100%;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
</div>
</div>
P.S.: ...не пытаюсь умничать , а самообразовываюсь за счёт других :D

Оффлайн Le_xa

  • *
  • Сообщений: 3043
  • Пол: Мужской

Фон сайта – преимущества и недостатки"
« Ответ #2 : 16 Октябрь 2014, 13:28 »
Соответственно, в браузере такая картинка будет грузиться довольно долго (по сравнению с фоном из однотонной заливки или мозаичным фоном)
Ночью ,машинально,работал через Мозиллу,кучу сайтов переоткрывал,все мухой летало..но в какой то момент тыцнул на ,Беседку" и завис браузер. Вот только хотел про фон отписать,опередили-на тех сайтах,в основном,не было фоновых излишеств.

Оффлайн ALENA

  • *
  • Сообщений: 56519
  • Пол: Женский

Фон сайта – преимущества и недостатки"
« Ответ #3 : 16 Октябрь 2014, 13:31 »
Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

 ты имеешь ввиду в 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

  • real-слепец
  • *
  • Сообщений: 52
  • Пол: Мужской
  • полуслепой зануда ;)
  • Имя : Алексей
  • Статус : тормоз

Фон сайта – преимущества и недостатки"
« Ответ #4 : 16 Октябрь 2014, 13:43 »
...может я не понял... , но пусть тут и у меня тоже фон замощён ... , а вроде речь шла об отображении цельной картинки для фона сайта  при любом разрешении ? ...хочу всё знать =;)=

Оффлайн ALENA

  • *
  • Сообщений: 56519
  • Пол: Женский

Фон сайта – преимущества и недостатки"
« Ответ #5 : 16 Октябрь 2014, 14:13 »
Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

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

Как пример .
background:  url(http://alsiti.net/pic/brev22.png)no- repeat ;
гости не могут видеть изображения , пожалуйста зарегистрируйтесь или авторизуйтесь


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

Оффлайн ZerOverdriver

  • real-слепец
  • *
  • Сообщений: 52
  • Пол: Мужской
  • полуслепой зануда ;)
  • Имя : Алексей
  • Статус : тормоз

Фон сайта – преимущества и недостатки"
« Ответ #6 : 16 Октябрь 2014, 15:00 »
))))) ...А-а-ааа ... Ё... , не могу пока без знаний спорить , но проверю что-то типа такого моего наброска для себя :

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

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

Оффлайн ZerOverdriver

  • real-слепец
  • *
  • Сообщений: 52
  • Пол: Мужской
  • полуслепой зануда ;)
  • Имя : Алексей
  • Статус : тормоз

Фон сайта – преимущества и недостатки"
« Ответ #7 : 29 Ноябрь 2014, 14:19 »
!!! Короче я упёртый и хоть и сам всё всегда изучаю , но и до некоторых тонкостей уже дошёл  и решил эту задачку :
(...и всё-таки я был близок логически про 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

Оффлайн ALENA

  • *
  • Сообщений: 56519
  • Пол: Женский

Фон сайта – преимущества и недостатки"
« Ответ #8 : 29 Ноябрь 2014, 14:23 »
Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.
  ты в этот справочник заглядываешь ?
Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

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

Оффлайн ALENA

  • *
  • Сообщений: 56519
  • Пол: Женский

Фон сайта – преимущества и недостатки"
« Ответ #9 : 29 Ноябрь 2014, 14:30 »
подтверждение: Ссылка
;))
 Что то загружается тяжеловато .  :(  Или незакешировано пока  :? Вес страницы сколько ?

Онлайн Wasek

  • *
  • Сообщений: 9972
  • Пол: Мужской
  • Имя : Олег

Фон сайта – преимущества и недостатки"
« Ответ #10 : 29 Ноябрь 2014, 14:34 »
Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.

DynamicWindowSize=1   и не парся  :))
Извините что влезаю с приколами  ;)))
Поблагодарили: ALENA

Оффлайн ZerOverdriver

  • real-слепец
  • *
  • Сообщений: 52
  • Пол: Мужской
  • полуслепой зануда ;)
  • Имя : Алексей
  • Статус : тормоз

Фон сайта – преимущества и недостатки"
« Ответ #11 : 29 Ноябрь 2014, 15:10 »
 bravo vred та же фигня - реально ВСЁ почти есть (я всегда в мозге замучу то чего небывает , но соединю что-либо и сделаю  :??? :??)
ты в этот справочник заглядываешь ? Ссылка Он  у меня скоро настольной книгой будет .  Там и html и css .
Поблагодарили: ALENA

Оффлайн ZerOverdriver

  • real-слепец
  • *
  • Сообщений: 52
  • Пол: Мужской
  • полуслепой зануда ;)
  • Имя : Алексей
  • Статус : тормоз

Фон сайта – преимущества и недостатки"
« Ответ #12 : 29 Ноябрь 2014, 15:15 »
 :)) Олег , дружище - это не прикол  stop ты должен был по логике посоветовать #SCREENAREAWIDTH# & #SCREENAREAHEIGHT#  laug ;))) :pula %))
ZerOverdriver, DynamicWindowSize=1   и не парся  Извините что влезаю с приколами
Поблагодарили: ALENA, Wasek

Оффлайн carlo22

  • *
  • Сообщений: 13
  • Пол: Мужской

Фон сайта – преимущества и недостатки"
« Ответ #13 : 02 Декабрь 2014, 12:00 »
Добрый день.
Хочу спросить у знатоков.
Как заменить фоновое изображение только шапки форума?
У меня сейчас установлено вот это
гости не могут видеть изображения , пожалуйста зарегистрируйтесь или авторизуйтесь


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

Оффлайн ALENA

  • *
  • Сообщений: 56519
  • Пол: Женский

Фон сайта – преимущества и недостатки"
« Ответ #14 : 02 Декабрь 2014, 12:25 »
Извините, Вам не разрешено просматривать этот текст. Пожалуйста, войдите или зарегистрируйтесь.
Тема какая ?