Issue
I have been trying to get the header image to be shorter, however, I cannot figure out how to. Here is the HTML:
<div class="header">
<img src="images/header_sea(3).jpg" width="99%" class="header_image" alt="sea_sky">
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</div>
Here is the CSS:
html, body {
height: 100%;
width: 99%;
text-align: center;
}
.title{
font-family: 'Poppins', sans-serif;
font-size: 45px;
font-weight: bold;
color: #FB79E1;
text-align: center;
text-shadow: 3px 3px white;
}
.header{
position: relative;
}
.header_image{
opacity: 0.55;
height: 40%;
width: 99%;
}
.header_title{
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 99%;
display: flex;
justify-content: center;
align-items: center;
}
I tried adjusting the height percentage in .header_image
, but the image doesn't get shorter when I change the value.
Solution
The header needs a size associated with it. Otherwise the image has nothing to be "40%" of since the header is just using auto sizing.
Relevant code
.header {
position: relative;
/* Give the header (containing element) a size, can be %, px, etc.
Also keep in mind to use a percentage as a size the body needs a percentage size as well */
height: 20%;
}
Another good practice is to use semantic elements when possible, so consider using <header>
instead of a div with a class of header.
html,
body {
height: 100%;
width: 99%;
text-align: center;
}
.title {
font-family: 'Poppins', sans-serif;
font-size: 45px;
font-weight: bold;
color: #FB79E1;
text-align: center;
text-shadow: 3px 3px white;
}
.header {
position: relative;
/* Give the header (containing element) a size, can be %, px, etc.
Also keep in mind to use a percentage as a size the body needs a percentage size as well */
height: 20%;
}
.header_image {
opacity: 0.55;
height: 100%;
width: 99%;
}
.header_title {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 99%;
display: flex;
justify-content: center;
align-items: center;
}
<header class="header">
<img src="https://98e50e5e-ef9b-4f10-9bb4-65acdcdf4429.id.repl.co/images/header_sea(3).jpg" class="header_image" alt="sea_sky">
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</header>
Answered By - Loktar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.