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)
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.
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.
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?
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 ?
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&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.
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.
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.
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.
Magic number alert.
