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

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

Подскажите как растянуть header? У меня это гифовская картинка 1200 пикселей, как при помощи css сделать чтобы картинка gif менялась по ширине от размера экрана, спасибо.
  • Вопрос задан
  • 1745 просмотров
Комментировать
Подписаться 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>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Нужен разработчик на python для создания бота в Телеграм
27 апр. 2024, в 12:46
10000 руб./за проект
Backend. 1C Bitrix
27 апр. 2024, в 12:46
60000 руб./за проект
Приглашаю искусствоведа сделать справку про 10 предметов антиквариата
27 апр. 2024, в 12:30
2000 руб./за проект
Ещё заказы