-1

I am trying to add a background image in my section tag but it is not working. I have taken the correct file also still it's showing nothing in the webpage and exactly the same code I have seen someone has written in his code on youtube and that worked

*
{
    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>
prashant kumar
  • 31
  • 5

3 Answers3

1

When you have some contents for container, the background image will be loaded. Now the the height of ".header" section is zero. Or you can change height: 100% into height: 100vh to check the background image showing.

.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;
}
Dung Le
  • 96
  • 4
0

Enclose the path to image in quotes

 background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('images/taj-mahal.jpg');
Shine J
  • 798
  • 1
  • 6
  • 11
0

you need to add single quotes around the path to the image

magpiet
  • 31
  • 5