Jump to content
  • 0

Как подогнать фон сайта под разные разрешения экрана

Alex777

Asked by Alex777,

 Share

Question

Alex777 Explorer

Alex777

Posted
Posted

Здравствуйте!

Заранее прошу прощения за скорее всего тупой вопрос, но как сделать, что бы фон сайта (<body background="image.jpg">) правильно отображался под разные разрешения экрана? Я правильно понимаю, что есть только один способ - поместить картинку по центру и прилегающие края сделать из того же, что в картинке цвета?

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
ShumNo Explorer

ShumNo

Posted
Posted (edited)

Нету тупых вопросов или умных. Распределяются они по сложности: простая реализация или сложная.

Есть несколько решений данного вопроса. Можно сделать картинку перетекающую в фон (то есть картинка справа например заканчивается монотонным цветом позволяющий элегантно переводить его в фон и фон уже тянуть сколько угодно)

Можно картинку иметь такую которая тянется не искажаясь

А можно иметь статичную которая не тянется но всегда показывается одинакового размера, а все остальное растягивается

Тут рядом где-то обсуждалось это

Добавлю еще. мне всех больше нравится это ставить картинку скажем 1920 пикселей по ширине и размещать по центру. Более 1900 пикселе мониторов не так много ведь. Многие используют сей метод

Edited by ShumNo
Link to comment
Share on other sites
  • 0
Alex777 Explorer

Alex777

Posted
  • Author
Posted

>Можно сделать картинку перетекающую в фон (то есть картинка справа например заканчивается монотонным цветом позволяющий элегантно переводить его в фон и фон уже тянуть сколько угодно)

Это понятно.

>Можно картинку иметь такую которая тянется не искажаясь

К сожалению, под все возможные расширения фоновая картинка без искажений растягиваться не сможет.

>А можно иметь статичную которая не тянется но всегда показывается одинакового размера, а все остальное растягивается

Можно немного поподробнее? Здесь под всем остальным Вы что имеете ввиду?

>Добавлю еще. мне всех больше нравится это ставить картинку скажем 1920 пикселей по ширине и размещать по центру. Более 1900 пикселе мониторов не так много ведь. Многие используют сей метод

Да, но если размер монитора будет меньше 1920 (в смысле расширение на нем), то сайт вообще не будет помещаться в экран. Появятся неудобные горизонтальные полосы прокрутки. Разве нет?

Link to comment
Share on other sites
  • 0
ShumNo Explorer

ShumNo

Posted
Posted (edited)
Да, но если размер монитора будет меньше 1920 (в смысле расширение на нем), то сайт вообще не будет помещаться в экран. Появятся неудобные горизонтальные полосы прокрутки. Разве нет?

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

Вот пример innocentvillagefete.com фоновое изображение прилеплено к левому краю. вернее их там 2 нижнее и верхнее. При изменении разрешения экрана в сторону увеличения появляется остальнаячасть

А вот пример как фоновое изображение статично, а верстка резиновая thestaffrepublic.com

:)

Edited by ShumNo
Link to comment
Share on other sites
  • 0
Alex777 Explorer

Alex777

Posted
  • Author
Posted

ShumNo спасибо за помощь!

Но вот с innocentvillagefete.com все ясно, а когда я посмотрел, как выглядит thestaffrepublic.com в разных браузерах с разными разрешениями, то выяснилось, что фоновое изображение у thestaffrepublic.com выглядит абсолютно идентично во всех случаях, т.е. оно именно растягивается под разные разрешения. Почему же тогда оно статично? :)

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted
ShumNo спасибо за помощь!

Но вот с innocentvillagefete.com все ясно, а когда я посмотрел, как выглядит thestaffrepublic.com в разных браузерах с разными разрешениями, то выяснилось, что фоновое изображение у thestaffrepublic.com выглядит абсолютно идентично во всех случаях, т.е. оно именно растягивается под разные разрешения. Почему же тогда оно статично? :)

Оно масштабируется в зависимости от размера окна скриптом. А остальное смотрите по идентификатору supersize.

Link to comment
Share on other sites
  • 0
Тёма Explorer

Тёма

Posted
Posted
А ссылки на подобный скрипт у Вас нет? Хотелось бы посмотреть, как осуществляется такое маштабирование, в зависимости от размера окна.

А разве недостаточно этого?:

<div><img src="линк на фон" style="position: fixed; width: 100%; height: 100%" /></div>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept