alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Адаптивное фоновое изображение на CSS

Категория: Адаптивная верстка Просмотров: 423 Коментариев: 0 Дата: 2017-02-12 Добавил: admin

Адаптивное фоновое изображение на CSS

В предыдущей статье про адаптивные изображения я обещал рассказать про адаптивное фоновое изображение. И так приступим. Для того, чтобы наше фоновое изображение хорошо смотрелось на всех типах устройств компьютерах, ноутбуках, планшетах ну и конечно на смартфонах мы будем использовать медиа запросы. Для начала создадим контейнер с именем id = "fon_img" к которому и будет, присваивается картинка.

HTML
<!DOCTYPE html>
<html lang="en">
<head>

 Адаптивное фоновое изображение на CSS 	
</head>
<body>

Адаптивное фоновое изображение на CSS

Это изображение всегда будет иметь 100% ширину так как его контейнер не имеет значения максимальной ширины (max-width)

</body> </html>

Затем в стилях мы присваиваем к нашему контейнеру #fon_img наше фоновое изображение с заданной высотой, а так же выставим background-size: cover;, чтобы картинка растягивалась на всю ширину экрана.

CSS

Не забываем задавать префиксы для других браузеров -webkit-background-size: cover; -moz-background-size: cover;, -o-background-size: cover; , чтобы наше изображение корректно отображалось. После всего этого добавляем наши медиа запросы, с помощью которых мы будем изменять высоту фоновой картинки для разных устройств.

CSS
    @media(max-width:1016px){
        #fon_img{
             height:600px;
       }
    }
    @media(max-width:768px){
        #fon_img{
             height:400px;
       }
    }
    @media(max-width:480px){
        #fon_img{
             height:250px;
       }
    }	

Теперь высота изображения будет всегда подстраивается под используемое устройство. С помощью таких медиа запросов можно изменить шрифт для заголовка или цвет шрифта, ну и все что вам пожелается.

HTML
<!DOCTYPE html>
<html lang="en">
<head>

 Адаптивное фоновое изображение на CSS 	
</head>
<body>

Адаптивное фоновое изображение на CSS

Это изображение всегда будет иметь 100% ширину, так как его контейнер не имеет значения максимальной ширины (max-width)

</body> </html>

Мы рассмотрели все варианты использования адаптивных изображений, которые можно использовать при адаптивной верстке. Конечно, еще много тонкостей осталось не рассказанными, но со временем, во время работы, вы их сами поймете, а это все лишь базовые основы, с помощью которых уже можно создать абсолютно адаптивный сайт.


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов