CODEWITHSUNDEEP
htmlcssstyles
Paras Bansal
Paras Bansal

Reputation: 45

Background image not showing up in css while using header tag

I am implementing a html, css code and my backround image is not showing up. here is my header specs.

.header
{
  height:200px;
  background-color: green;
  border-bottom: 2px solid ;
  background-image: url(https://ibb.co/3W6XD3Z);
}

Where am I getting wrong?

EDIT: Added more code snippet

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="C:\Users\ratho\OneDrive\Desktop\html project\test1.css">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div class="header">
      <p class="head">SHE MATTERS</p>
      <div class="header-list">
      <ul >
        <li><a href="#" class="header-link">Join Us</a></li>
        <li><a href="#" class="header-link">Login</a></li>
      </ul>
      </div>
    </div>
      <div class="main">
        </div>
      <footer>
      </footer>
  </body>
</html>

Upvotes: 0

Views: 68

Answers (4)

Sid
Sid

Reputation: 53

Below is your answer problem was with the background image url

  .header
  {
  height:200px;
  background-color: green;
  border-bottom: 2px solid ;
  background-image: url(https://cdn.pixabay.com/photo/2021/04/15/13/11/bridge 
  6181079_960_720.jpg ); 
  }

W3 Schools you can learn more

Upvotes: 0

ankur shishodia
ankur shishodia

Reputation: 23

Below is your answer

.header {
         background-image:url('https://images.unsplash.com/photo-1593460354583-4224ab273cfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=966&q=80')
        }
<html>
   <head>
      <title>
       Test
      </title>
  </head>
  <body class='header'>
  <h1>My Page</h1>
  </body>
</html>

Upvotes: 1

Erfan Geramian
Erfan Geramian

Reputation: 187

the problem was your background image address this will do :

.header
    {
      height:200px;
      background-color: green;
      border-bottom: 2px solid ;
      background-image: url(https://i.ibb.co/0Z4Ng7b/Whats-App-Image-2021-04-21-at-09-58-28.jpg);
    }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="C:\Users\ratho\OneDrive\Desktop\html project\test1.css">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div class="header">
      <p class="head">SHE MATTERS</p>
      <div class="header-list">
      <ul >
        <li><a href="#" class="header-link">Join Us</a></li>
        <li><a href="#" class="header-link">Login</a></li>
      </ul>
      </div>
    </div>
      <div class="main">
        </div>
      <footer>
      </footer>
  </body>
</html>

Upvotes: 0

t0mgerman
t0mgerman

Reputation: 184

You are trying to set the CSS property background-image to a webpage... using the Embed Codes section of the image host, you can get the image src... your css should be:

.header {
   height:200px;
   background-color: green;
   border-bottom: 2px solid ;
   background-image:url('https://i.ibb.co/rM8PCjr/Whats-App-Image-2021-04-21-at-09-58-28.jpg');
}

Upvotes: 0

Related Questions