Unable to get Hero/background image to full height

HTML-CSS
1

Summary: I am trying to get this image to show fully as a Hero image.

image
image1024×452 34.7 KB

What is working. I have gotten the image to cover the entire width of the screen.
I have gotten the image to sit flush with the top of the page (no padding or margin)
I have gotten the text to sit where I want it relative to the image.

What isn’t working. I can’t get the entire height of the image to display.

What I have tried: I have tried using pixels vs %. I have tried using fixed position vs relative.
HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"
</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">Posweyb</h1>
    <p>Blätter des Posweb</p>
  </div>
</div>
</body>
</html>

CSS

body, html {
  height: 100%;
  margin: 0;
            }

.hero-image {
  background-image: url("https://www.posweyb.net/DurerChurchWoman.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  color: #733b0b;
}

My Sandbox: https://codepen.io/posweyb/pen/gbOgzEP

2

maybe set the height and width of .hero-image to 100% and wrap .hero-image in a div. And set the max-width and height for the div.

3

Maybe I am not understanding, but I thought with the HTML I did have the image and text enclosed in a div.

I altered the css to this: But it still doesn’t show the entire height of the image

body, html {
  height: 100%;
  margin: 0;
            }

.hero-image {
  background-image: url("https://www.posweyb.net/DurerChurchWoman.jpg");
  height: 100%;
  width:  100%;
  max-width: 2000px;
  max-height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  color: #733b0b;
}
4

Your CSS shows that your .hero-image-div has the background -image. Your .hero-image div is not inside a div, it’s inside the body. What I’m suggesting is that you create another div and put your .hero-image div inside of it. You could give the div a class name of .hero-img-wrapper in your html and in your css set the max-width for it.

Edit*:
Also in your html:

<img class="hero-img" src="https://www.posweyb.net/DurerChurchWoman.jpg"/>

instead of

<div class="hero-image">

and remove:

 background-image: url("https://www.posweyb.net/DurerChurchWoman.jpg");

from your css

5

Or to your original code you can top

background-position: top center;
1 Like
6

Tracy, you got me very close to what I want. The entire image is showing and the text placement is great. The only refinement is that I want this whole thing to sit in the top quarter of the page.

I am unsure if I implemented the wrapper as you intended.

This is where I am currently. `
HTML:

<body>
  <div class="hero-image-wrapper">
  <img class="hero-image" src="https://www.posweyb.net/DurerChurchWoman.jpg"/> 

    <div class="hero-text">
      <h1 style="font-size:50px">Posweyb</h1>
      <p>Blätter des Posweb</p>
      
    </div>
  </div>
  </body>`

CSS:

body {
 margin: 0;
}
.hero-image-wrapper {
  background-position: top center;
  background-size: cover;
}  
.hero-image {
  height: 100%;
  width:  100%;  
  background-repeat: no-repeat;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  color: #733b0b;
}
7

It looks great.

background-position: top center; and background-size: cover; work with the img url you were using earlier and if you remove them won’t affect your page.

You also don’t need these: background-repeat: no-repeat;
position: relative;

Now in the .img-wrapper of your CSS you can set the height of the img. Because .hero-image is set at 100% height and width the image will conform to the container it’s in(.hero-image-wrapper)

You can use media queries to adjust the height of the image for different screen sizes (since the image may look streched depending on screen size )

8

We are almost there! I think I am confused by the second statement in your last reply.

background-position: top center; and background-size: cover; work with the img url you were using earlier and if you remove them won’t affect your page.

Just to be clear what you mean by this is if I went back to my original method of linking the img?
Because if I stay with the

<img class="hero-image" src="https://www.posweyb.net/DurerChurchWoman.jpg"/>
and remove the background-position and background-size it leaves the div .hero-image-wrapper empty.

9

I am beginning to wonder if the hero image approach will work. What I am beginning to see is the image scaling cuts off part of the image if I don’t make it 100%. I only want (the whole image) to sit and cover about 1/4 of the top of the screen (and the whole width)…like a header. I want to put a navigation menu under it…and maybe a few fun pictures with links.

10

Hey,
I don’t know if you got the problem solved, but I wanted to share an aproach I use most of the time, which might work with what you’re trying to do here.
First of all, I create a section element and add my image to its background. Then, just by giving it a background-size:100% 100%; or cover;, the background image will adjust itself to the width and height of the section. Then you can give the section any height you want, and set the width to 100%, and you can add your text or elements inside the section element. I’ve implemented this method on my product landing page.
I hope this helps!

1 Like
11

I will definitely try this! So many different ways to skin the cat! Thanks!
Had to come back and say thanks so much for the link example!

2 Likes
12

Yes, that is if you went back to using the url() in your css

A good reason to use in your html over url() in your CSS is accessibility for screen readers and Search Engine Optimization. An image tag with an alt attribute tells the screen reader and the the search engine about your image. The url() of an image in your CSS does not.

13

Did you give the .hero-image-wrapper a height?

14

Both methods work.
A good reason to use in your html over url() in your CSS is accessibility for screen readers and Search Engine Optimization. An image tag with an alt attribute tells the screen reader and the the search engine about your image. The url() of an image in your CSS does not.