Автор Тема: Размер рисунка для фона  (Прочитано 472 раз)

06 Июня 2013, 20:36:12
  • Фрилансер
  • *
  • Сообщений: 137
  • Репутация: +0/-0
  • Методом тыка..
    • Просмотр профиля
Друзья, подскажите пжл, по какой дорожке лучше идти, рисовать цельный фон или же пробовать дублирующийся? И какой должен быть размер рисунка фона на престе, если выберу не дублирующийся?
06 Июня 2013, 22:35:56
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 980
  • Репутация: +5/-0
  • Иногда заглядываю
    • Просмотр профиля
    • Помощь патентообладателям по продаже патентов.
В размер экрана 1024х768, 1600х1200, 1600х900, и т.д.
Не боги горшки обжигают, не зачем им такой хренью заниматься.
06 Июня 2013, 22:53:26
Ответ #2
  • Фрилансер
  • *
  • Сообщений: 137
  • Репутация: +0/-0
  • Методом тыка..
    • Просмотр профиля
Vasiy, ну я понимаю что у всех разные экраны ведь, или выбирать самый распространенный 1280, верно?
06 Июня 2013, 23:33:31
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 980
  • Репутация: +5/-0
  • Иногда заглядываю
    • Просмотр профиля
    • Помощь патентообладателям по продаже патентов.
У меня 2 монитора 1920х1200 и 1600х1200, лучше выбрать широкоформатный
размер, а планшетники 1280х600 или что то типа того.
Считается  50% 1024х768    и еще 50% разрешения выше.

Прошу прощения предыдущие данные похоже устарели
Вот что дал Ливинтернет по одному из моих сайтов по
поводу разрешения экранов компьютеров получается,
что 1024х768 это самый маленький размер если не считать
нетбуки, планшетники и телефоны.
Не боги горшки обжигают, не зачем им такой хренью заниматься.
07 Июня 2013, 13:02:38
Ответ #4
  • Ветеран
  • *****
  • Сообщений: 20885
  • Репутация: +25279/-0
  • Prestashop - просто и эффективно
    • Просмотр профиля
Друзья, подскажите пжл, по какой дорожке лучше идти, рисовать цельный фон или же пробовать дублирующийся? И какой должен быть размер рисунка фона на престе, если выберу не дублирующийся?
Размер фонового рисунка определяют по используемой теме. Если у вас сайт с адаптивной версткой и вы хотите использовать адаптивные фоновые изображения, то основная проблема это масштабирование. С  img просто, установить ширину в процентах и высота будет масштабироваться автоматически.  С фоном же такой способ не пройдет и для фоновой катринки нужно будет применять другие правила. Кратко об этом не напишешь, почитайте примеры по верске.
Если у вас фиксированная ширина и вы не собираетесь поддерживать мобильные устройства, то просто поставьте картинку с фикс.размерами.
Простое решение, если не учитывать старые браузеры, ну и конечно ie.
html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
            -moz-background-size: cover;
                -o-background-size: cover;
                    background-size: cover;
}
или же картинку приложить фоном для div
html {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
}
div#bg {
   background: url(images/big.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
    -moz-background-size: cover;
        -o-background-size: cover;
}
и создать правила для разных разрешений
1. большие экраны 1920px
@media (min-width: 1200px) {2. среднии 1024px
@media (min-width: 768px) and (max-width: 979px) {3. маленькии 767px
@media (max-width: 767px) {Посмотрите пример реализации такой верстки Bootstrap
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!