Размер рисунка для фона

[PapiDi]

Друзья, подскажите пжл, по какой дорожке лучше идти, рисовать цельный фон или же пробовать дублирующийся? И какой должен быть размер рисунка фона на престе, если выберу не дублирующийся?

[Vasiy]

В размер экрана 1024х768, 1600х1200, 1600х900, и т.д.

[PapiDi]

Vasiy, ну я понимаю что у всех разные экраны ведь, или выбирать самый распространенный 1280, верно?

[Vasiy]

У меня 2 монитора 1920х1200 и 1600х1200, лучше выбрать широкоформатный
размер, а планшетники 1280х600 или что то типа того.
Считается  50% 1024х768    и еще 50% разрешения выше.

Прошу прощения предыдущие данные похоже устарели
Вот что дал Ливинтернет по одному из моих сайтов по
поводу разрешения экранов компьютеров получается,
что 1024х768 это самый маленький размер если не считать
нетбуки, планшетники и телефоны.

[PrestaMan]

Друзья, подскажите пжл, по какой дорожке лучше идти, рисовать цельный фон или же пробовать дублирующийся? И какой должен быть размер рисунка фона на престе, если выберу не дублирующийся?

Размер фонового рисунка определяют по используемой теме. Если у вас сайт с адаптивной версткой и вы хотите использовать адаптивные фоновые изображения, то основная проблема это масштабирование. С  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