Blog

The web page markup will seem like this:

Concerning the types:

• The hero part received’t have a static top like 100vh. Its top will depend upon the overlay content material. Simply to point out a much bigger a part of the picture, we’ll additionally give it some high and backside paddings related to the viewport top.
• At this level, we’ll add the background picture via the CSS.

Right here’s the corresponding CSS rule:

And the ensuing demo:

Hero Part With A number of Background Pictures

To this point, so good! However let’s assume that this format represents a single weblog put up or product design. Clearly, on a web site, we are able to have a number of posts/merchandise with completely different contents.

In such a case, there are two necessities:

• The web site administrator ought to be capable to change the picture and its place via the admin.
• There must be three completely different background pictures relying on the viewport measurement. It is a widespread requirement as more often than not, a single picture will not look properly throughout all screens.

When it comes to visualizing this in our CMS, we’ll have one thing like this: 

Hero part fields as seen on the admin

Picture place fields as seen on the admin

For this instance, I used the favored ACF WordPress plugin to create the fields. However, in fact, in your case, you may construct them as you want and elaborate to show the really helpful picture dimensions for serving to the content material creators.  

Beneath these necessities, we’ve got to consider a option to present completely different pictures relying on the viewport measurement. 

Technique #1: Further Markup

One answer is to create some further div parts that will likely be completely positioned contained in the part and make them seem at completely different instances with the assistance of the UIkit visibility courses. Then, as the pictures come dynamically via a server-side language like PHP, we’ll additionally add them via inline CSS. The identical will occur for the background positions.

With that in thoughts, right here’s the brand new model of the hero part markup:

You should definitely examine these divs and look at what their connected UIkit courses do. 

The associated demo:

Technique #2: CSS Variables

A extra elegant approach that helps us keep away from bloating the markup with empty parts, and even duplicating issues, takes benefit of CSS variables. This concept is easy; we maintain the preliminary markup and outline three CSS variables; one variable for every picture. The identical ought to occur for the background positions, though we’ll skip it for now.

Then, throughout the CSS, we set applicable guidelines based mostly on the UIkit breakpoints that deal with what picture ought to seem every time. That approach, we maintain the simplicity of the preliminary demo and permit receiving dynamic content material. 

With that in thoughts, right here’s the brand new model of the hero part markup:

The related types:

And at last, the associated demo:

Conclusion

As you see, CSS variables will help us accomplish easy widespread duties with out involving JavaScript. Other than the trick we mentioned right here with pictures, one other nice use for them is the creation of staggering animations—we’ve lined this many instances! As an example, take a look at these tutorials:

As all the time, thanks lots for studying!