Забыли пароль?
Запросите новый здесь.

Автор темы: Alex
ID темы: 2849
Информация:
Тема содержит 5 сообщения, была просмотрена 3401 раз.
Просмотр темы
PHP-Fusion Russia » Веб-разработка » HTML и CSS
 Распечатать тему
диагональный рисунок в шапке сайта
Alex
Планирую для одного из сайтов сделать подобную шапку

linkme.ufanet.ru/images/ace0db4afffea96a649a202f291f2265.jpg

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

может кто нибудь что то посоветует как такое реализовать?


моя первая мысль создать див на всю ширину экрана и этот рисунок поставить фоном этого дива, и вот тут сомнениями задаюсь а что будет при разных разрешениях экрана
 
Web
jikaka
как вариант, для дива ставь бэкграундом и для разных разрешений меняй размер фона через background-size
для телефонов делай свой фон
 
Web
Vveb--ws
всё это глупости.

ставишь на фон body с выравниванием вверх влево без повтора.

можно сделать разные bg для каждого разрешения монитора
Скачать исходники  Код

@media screen and (min-width:100px) and (max-width:599px) {

    /* сюда вписывать стиль */
    body {
        background-image: url('images/background.jpg');
        background-position: top left;
        background-repeat: no-repeat;
    }
   
}


@media screen and (min-width:600px) {

    body {
    }

}




PHP-Fusion 7 Bogatyr - бесплатная мультиязычная CMS для блога, форума, фотогалереи

vk.com/phpfusion
Создаю интернет-магазины и блоги, лендинги, форумы. Telegram: t.me/Vova_Kazakov
 
Web
jikaka
Vveb--ws, я тоже самое и предложил)))
 
Web
lucky
можно background растягивать на всю ширину:
Скачать исходники  Код
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;




или так:
Скачать исходники  Код
background-size: 100% 100%;


 

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Топ 5 пользователей форума
Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)   SchreiBear SchreiBear (625)