Задать вопрос
@antowa_plawkevich
Junior Front-end developer
html

Как растянуть header?

Подскажите как растянуть header? У меня это гифовская картинка 1200 пикселей, как при помощи css сделать чтобы картинка gif менялась по ширине от размера экрана, спасибо.
  • Вопрос задан
  • 1868 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 3
karjan
@karjan
width:100%;
height:auto;
Ответ написан
Комментировать
Комментировать
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
А ты уверен, что это хорошая идея?
Gif-ка вообще не лучшее решение для целой шапки, а тем более растянутая гифка.
1) через background-image и background-size cover.
2) указать явно width 100%, height auto.
Ответ написан
Комментировать
Комментировать
dosya97
@dosya97
Fullstack web-developer 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.header{
			width: 100%;
			height: 60px;
			padding: 0;
			margin: 0;
			background-image: url(http://www.bell.ca/Styles/RSX/shop/img/promotions/4k-screen-3.jpg);
			background-position: center;
			background-size: cover;
		}
		body{
			padding: 0;
			margin: 0;
		}
	</style>
	<div class="header"></div>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend Developer
Wanted. • Санкт-Петербург
До 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо добавить карточки товаров в Интернет-магазин
13 нояб. 2024, в 09:16
8000 руб./за проект
Телеграм Мини приложение
13 нояб. 2024, в 06:41
100000 руб./за проект
Электрическая лебедка для сноуборда, горных лыж, вейкборда
13 нояб. 2024, в 03:14
50000 руб./за проект
Ещё заказы