Issue
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;
}
Solution
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>
Answered By - Philo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.