Как добавить фоновое изображение в разделе html с помощью css? - PullRequest
Новая
       38

Как добавить фоновое изображение в разделе html с помощью css?

0 голосов
/ 08 апреля 2020

Я пытаюсь добавить фоновое изображение в тег раздела, но оно не работает. Я взял правильный файл, и все же он ничего не показывает на веб-странице и точно такой же код, который я видел, кто-то написал в своем коде на YouTube, и это сработало 

*
{
    padding: 0;
    margin: 0;
}

.header
{
    height: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(images/taj-mahal.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
<!DOCTYPE html>
<html>
<head>
	<title>Visit India</title>
	<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">	
</head>
<body>
    <section class="header">
		<div class="container">
            
    </div>
        </section>
	

</body>
</html>

Ответы [ 3 ]

1 голос
/ 08 апреля 2020

Если у вас есть содержимое контейнера, будет загружено фоновое изображение. Теперь высота раздела ".header" равна нулю. Или вы можете изменить высоту: 100% в высоту: 100vh, чтобы проверить отображение фонового изображения. 

.header
{
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(images/taj-mahal.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
0 голосов
/ 08 апреля 2020

вам нужно добавить одинарные кавычки вокруг пути к изображению

0 голосов
/ 08 апреля 2020

Заключите путь к изображению в кавычки 

 background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('images/taj-mahal.jpg');
...