003-home page-background image with text

810311 · April 28, 2024, 6:18pm

I am working on the following layout for a home page

gray box represents a full bleed background image
h1, following text and get a quote button would probably be constrained with max-width, not sure yet
the whole block of h1, text and the button would be white text on gray backgound with opacity (so image is slightly visible) stretching full width of the image and placed on top of the image
I also plan to add 3 flexbox cards below an image representing main services that the company offers

please see the following link for current home page (current image is just for testing purposes and would probably replaced for a different image)

https://test.prygara.com/

Question: Is CSS grid technique described here https://css-tricks.com/positioning-overlay-content-with-css-grid/ a good choice to achieve “text on top of image” effect?

PaulOB · April 28, 2024, 7:25pm

Yes that’s fine but its using a foreground image rather than a background image but that’s more of a semantic issue than a coding issue. There’s no real difference in most of these methods except grid avoids absolute positioning.

There are caveats with most of these methods and in that grid demo if I increase the amount of text or increase text size in the browser then it no longer fits on the image. What do you do then?

You have to plan ahead and if you only have the odd line of text then that’s fine but if you have multiple lines of text what do you do to make the image stretch over it? If you use object-fit: cover then you crop the image and if the image is an important part of the section you may just cut out the most important bit.

If the image is just decoration then the odd cropping won’t matter.

810311 · April 29, 2024, 3:28am

The amount of text (h1 and p) most likely wouldn’t change. I have to switch an image to a different one. Let me also try add those 3 flexbox cards below an image and see how everything fits together.

810311 · May 6, 2024, 4:01am

I added a backgorund color and opacity to a wrapper div and it affected h2 and p that sit inside. I need to keep the text white and keep the opacity. Do I need z-index on h2 and p to fix it?

.headline {
    background-color: grey;
    opacity: 0.5;
}

<div class="entry-content">
<figure ><img /></figure>
<div class="headline">
<h2 ></h2>
<p>...</p>
</div>
<div class="btn-home">
<button type="button"></button>
</div>	
</div><!-- .entry-content -->

PaulOB · May 6, 2024, 6:37am

The opacity property is what’s known as ‘atomic’ in that affects the element and all its children. It can’t be undone on child elements.

If all you wanted was the background color affected then use rgba.

e.g.

background:rgba(204, 204, 204, 0.5)

The last value is the opacity.

810311 · May 8, 2024, 3:53am

Works for me. Thanks Paul.

The following rule centers everything that sits within .entry-content. It also placed the button between h2 and p. How do I place the button after p (see screenshot in post #1) ? The whole block of h2 , p` and button just needs to be stacked. Is it a job for a flexbox ?

.home .entry-content {
    display: grid;
    grid-template: "container";
    place-items: center;
    place-content: center;
    max-height: clamp(1500px, 50vh, 2000px);
    
}

PaulOB · May 8, 2024, 10:53am

If this is the page that you linked to at the start then the problem is that you have placed everything in the grid area called ‘container’. That effectively stacks everything on top of itself just like absolute positioning in some ways.

What you really want is the figure in the grid container and the rest of the content in a single div which is placed in the container area and not all the individual items.

If you add a wrapper like this:

<div class="entry-content">

  <figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="2048" height="1152" src="http://test.prygara.com/wp-content/uploads/2024/05/home-page-landscaping-driveway-interlock-edited-2048x1152-1.jpg" alt="" class="wp-image-2045" srcset="https://test.prygara.com/wp-content/uploads/2024/05/home-page-landscaping-driveway-interlock-edited-2048x1152-1.jpg 2048w, https://test.prygara.com/wp-content/uploads/2024/05/home-page-landscaping-driveway-interlock-edited-2048x1152-1-300x169.jpg 300w, https://test.prygara.com/wp-content/uploads/2024/05/home-page-landscaping-driveway-interlock-edited-2048x1152-1-1024x576.jpg 1024w, https://test.prygara.com/wp-content/uploads/2024/05/home-page-landscaping-driveway-interlock-edited-2048x1152-1-768x432.jpg 768w, https://test.prygara.com/wp-content/uploads/2024/05/home-page-landscaping-driveway-interlock-edited-2048x1152-1-1536x864.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px"></figure>

  <div class="figure-text">
    <div class="headline">

      <h2 class="wp-block-heading">R&amp;W Stone has over 20 years of experience.</h2>

      <p>Through landscaping and interlocking we will help you create a design that will enhance your home’s appeal, increase its value and offer a unique look.</p>

    </div>
    <div class="btn-home">
      <button type="button">Get a Free Quote</button>
    </div>
  </div>
</div>

I added this wrapper <div class="figure-text"> in the above and that should fix the problem without changing the css. You will then need to add text-align: center to .btn-home to centre the button,

When you create template areas for a grid and place items using that area name the effectively the content is all placed on top of each other.

PaulOB · May 9, 2024, 9:37am

Magic number alert.

You would virtually never use a max-height in that way. Fixed heights are a no no for elements that hold fluid content. You never know the height and can’t control it either as the user may have zoomed the text. Use a min-height if you need an initial height but let the element grow as required.

Why did you think you needed that rule?

810311 · May 12, 2024, 1:50am

I came across this declaration in the original CCS Tricks article here so tried to use it in my layout.

Use min-height with a clamp function or set min-height on a parent and height: 100% on the image (child)? The way this is set up with WordPress is that it takes the original big image and then serves it in different sizes depending on screen size.

I used big image 2560 x 1441 pixels. If I go with min-height, what min-height would you recommend? Can you give an example?

Actually let me add those flexbox cards below the button and see what happens…

PaulOB · May 12, 2024, 12:39pm

Ok ok. Its probably ok for images with only a small amount of text but I wouldn’t do it that way.

For a big here image like that I would let it fill the viewport height from the header downwards. You can do that very easily in grid or flex. In that way the image is always the viewport height and you don’t need any magic numbers.

Here’s the basic example.

If you wanted the footer at the bottom initially you can just move the footer inside the wrapper and it will all work.

No magic numbers required once again

810311 · May 17, 2024, 3:44am

I changed the layout as you suggested. I think because its a big image the top of a house is hidden under the header (please see screenshot below - area circled in red).

.home .entry-content {
	background: url(....) no-repeat 30%;
	background-size: cover; 
	display: flex;
}

when I change background-size: cover; to background-size: contain; top of a house is visible however image now gets narrower…

Question: how to properly scale down the image so top of a house fully visible but the image occupies whole viewport? Please see updated link post # 1 in this thread.

PaulOB · May 17, 2024, 11:41am

You can only do that if you don’t crop the height of the image. The image height has to be auto and would either need to be an image in the html or you would have to give the main element the same aspect ratio as the image.

What you are asking is physically impossible in the real world as you can’t have an image that is variable in width but its height is fixed. If the width changes then so must the height if you want to see all the image as nature intended.

This is not a limitation of web design but the laws of the universe. Imagine a picture of a person now you can’t just stretch the person wide without increasing their height or they would end up as a very fat short person.

The only options are to let the image scale its width but let the height auto adjust to maintain aspect ratio. Of course that would end up with a very large image going way below the fold of the document and not a great idea.

When you use background-size :cover it will ensure that the image covers the designated height and width but in order to do this it must enlarge both dimensions until the area is filled and then it crops that area to fit. hence why you get the top or bottom of the house cropped out.

If you use background-size: contain then the whole image will be viewable in the area designated but will not fill the area unless it just happens to have the same aspect ratio. there will will be gaps either at the side or the top and bottom.

When you choose hero images you should choose your images carefully so that the important bits like your house are more in the centre of the image and away from the edges, e.g. More sky and more ground in front of the house.

I suggest that you change the background-position to top anyway rather than centred and that will show more of the top of the house.

.home .entry-content {
    background: url(https://test.prygara.com/wp-content/uploads/2024/05/home-page-landscaping-driveway-interlock-edited-scaled.jpg) no-repeat 50% 0;
    background-size: cover;
    display: flex;
}

There are no other solutions apart from those mentioned or swapping for different images at different widths but then you’d still need to do what I suggested anyway in creating the image.