Make header image shorter with centered text-CodePudding

I have been trying to get the header image to be shorter, however, I cannot figure out how to. Here is the HTML:

 <div >
  <img src="images/header_sea(3).jpg" width="99%"  alt="sea_sky">
<div > *.• ʚ 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.

CodePudding user response：

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 >
   <img src="https://98e50e5e-ef9b-4f10-9bb4-65acdcdf4429.id.repl.co/images/header_sea(3).jpg"  alt="sea_sky">
   <div > *.• ʚ welcome to my ocean! ɞ •.* </div>
 </header>

CodePudding user response：

You need to use px to adjust the height of <img> or set a size for the parent <header> element.

Percentage is relative to the parent element.

<img> is child of <header> you can set a size for <header> and after that you can set a height for your <img>.

CodePudding user response：

try removing the width attribute from the image (inline) and change the width in .header_image

I did it for you below

<div >
  <img src="https://98e50e5e-ef9b-4f10-9bb4-65acdcdf4429.id.repl.co/images/header_sea(3).jpg"
    
   alt="sea_sky" 
  />
<div > *.• ʚ welcome to my ocean! ɞ •.* </div>
</div>

.header_image{
  opacity: 0.55;
  height: 40%;
  width: 70%;
}