Make header image shorter with centered text

user_14146310 0
Viewed 28

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.

css html
2 Answers

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

I did it for you below

<div 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>
</div>

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

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>

user_3223950
Related