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

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

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик HTML
MST
от 450 $
Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер
BYTIME
от 130 000 ₽
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подключить интернет-магазин на WordPress к Битрикс24
26 дек. 2024, в 10:16
500 руб./в час
Сверстать 10 экранов на react
26 дек. 2024, в 07:40
8000 руб./за проект
Разработать скрипт для взаимодействия файла Ворд и таблицы Эксель
26 дек. 2024, в 07:38
2000 руб./за проект
Ещё заказы