Can't get background image to show for page header

user_19775693 0
Viewed 30

Apologies that this is similar to previously asked questions but I'm relatively new to coding and I'm banging my head against a wall.

I'm trying to create a personal website, but can't seem to get an image to display behind the header/title at the top of the webpage. I know the location works as I can get the image to display independently through html (as a seperate image at the top of the page), but whenever I try to add styling through CSS something stops it working. What's even more confusing is that I can change the background color (through the id selector #header), so I'm not sure what is stopping the background image working. Any help much appreciated.

These are the relevant bits of code:

HTML code:

 <body>
        <div id="header">
            <div class="name">
            <h1>Author Name</h1>
            </div class="name">"   
        </div id="header">

CSS:

h1 {
    margin: 20px;
    text-align: center;
    font-size: 60px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
  }

 #header {
    background-image: url(https://drive.google.com/uc?export=view&id=1jGtln4lbaCeJ0D6mdY_A1UMKTr2QFOLp);
    width:100%;
    height:auto;
}
background css image html
2 Answers

your css is wrong you need to at a background position like this:

How I would implement it:

 #header {
    background: url(https://drive.google.com/uc?export=view&id=1jGtln4lbaCeJ0D6mdY_A1UMKTr2QFOLp) no-repeat center center fixed;
    background-size: cover;
    width:100%;
    height:auto;
}

Your way with background-image corrected:

 #header {
  background-image: url("https://drive.google.com/uc?export=view&id=1jGtln4lbaCeJ0D6mdY_A1UMKTr2QFOLp"); /* The image used */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
user_122542600

First: You have wrong in the html code you should close the <div> with </div> without copy the attributes like id.

This your code edited

    <div id="header">
      <div class="name">
        <h1>Author Name</h1>
      </div>
    </div>

Second: To see your background image you should take care that size of your image is right if you header is so small the top of image it only desplay and in your example your image is white in top so it seem that's is no image.

Third: You should take care of the background image position.

Here is your code edited.

h1 {
  margin: 20px;
  text-align: center;
  font-size: 60px;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
}

#header {
  background-image: url(https://drive.google.com/uc?export=view&id=1jGtln4lbaCeJ0D6mdY_A1UMKTr2QFOLp);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
}
    <div id="header">
      <div class="name">
        <h1>Author Name</h1>
      </div>
    </div>

user_180406890
Related