Блог

Главная - Вопросы по программированию - Изображение героя — не знаю, как сформулировать это

Изображение героя — не знаю, как сформулировать это

#html #css

#HTML #css

Вопрос:

То, что я пытаюсь сделать, это чтобы фоновое изображение заполняло всю страницу, но с возможностью прокрутки вниз, а изображение не продолжалось вечно. Если я добавлю изображение к обложке div background-size, это не сработает, мне нужно добавить высоту и ширину, которые не кажутся идеальными.

 body {
	background-image: url("http://cdn.wallpapersafari.com/66/90/zq7i3T.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
h1 {
	color: white;
	font-size: 50px;
	text-align: center;
	position: relative;
	top: 2000px;
}  
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Luke Hayes</title>
</head>
<body>
    <div class="hero">
	<h1>Some testing text</h1>
    </div>
</body>
</html>

Комментарии:

1. Пожалуйста, укажите jsfiddle. Чтобы я мог понять, чего вы хотите?

2. размер фона: 100% 100%;

3. @Raziasultana jsfiddle.net/4ujx31aa Я поместил H1 на несколько тысяч пикселей ниже, чтобы показать, что я подразумеваю под фоновым изображением, продолжающимся вечно.

Ответ №1:

примените стиль тела к элементу описания героя и сделайте так, чтобы он заполнял область просмотра (высота: 100vh)

       .hero {
        height: 100vh;
        background-image: url("http://cdn.wallpapersafari.com/66/90/zq7i3T.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
      }

      h1 {
        color: white;
        font-size: 50px;
        text-align: center;
        position: relative;
        top: 2000px;
      }  
   <body>
    <div class="hero">
<h1>Some testing text</h1>
    </div>
  </body>

Комментарии:

1. Это очень близко к тому, к чему я стремлюсь, я застрял с разрывом ~ 50 пикселей вверху, хотя даже после сброса CSS jsfiddle.net/20dgbyb0 Я только что сделал это на днях, и мне не нужно было использовать высоту, и я получил то, что хотел, это странно. Спасибо, что взглянули на это, хотя 🙂

2. @LukeHayes разрыв вызван полями H1, просто удалите их с помощью margin:0 , и вы больше не увидите разрыва