In this article, learn how to create a multi-column tiled image background using a foreground image element, HTML, and CSS. With a little adjusting, you could apply this effect to your WordPress website no matter which page builder you’re using (Gutenberg, Divi, Elementor, WPBakery, etc.). It’s pretty cool looking, right?
In my example, I’m going to create an equal-height 3-column layout and stagger the image to make it look like it’s jumping the gap and continuing from one column to the next.
Design Overview
Using HTML and CSS to create a 3-column equal-height grid with a tiled background image effect using a foreground <img /> element is a lot easier to explain visually than it is to type in words. The idea behind this is to stretch and tile a single image across multiple columns, so the end result looks like you’ve cropped an image into separate pieces and then put it back together again as columns. Then, you’ve overlayed text, a call-to-action button, and added a semi-transparent layer in between to help with legibility for the text sitting on top of an image.
It’s a pretty cool effect you can easily create using a HTML and CSS. Note, your HTML may be different than my HTML, but I’m sure you can figure it out with a little bit of fiddling around.
Design Goal:
- 3 columns
- 1 image, evenly distributed across all columns
- foreground <img /> element as the background image
- transparent color overlay for readability
- headline, text, and call-to-action button
Demo (CodePen)
Here, I’ve put together a demo using CodePen so you can see and interact with what’s going on. For a simple screenshot, scroll back up to the top of this article. It’s what we started with.
See the Pen Tiled Background IMG CSS by Floyd Hartford (@floyd) on CodePen.
Explanation
If you look at the code, you can see what’s happening.
Columns: I’ve created the columns using CSS Flexbox. Each column is 1/3 of the available space (33.33%), with a little bit of padding for a gap between each column.
Column-inner: Immediately inside each column is another wrapping div. This one’s styled as a flex-column in order to allow the call-to-action button to sit at the bottom of the column.
Text area: The <div /> containing the text uses the flex-grow property to fill the space.
Button area: The <div /> containing the button (.button) does not allow flex-grow. It does not expand to fill extra space, so the buttons sit nicely at the bottom of the equal-height columns. The space around the button is made possible by applying padding to the button’s container div.button.
Image: The image’s container, div.img, is set to width: 300%, which is (100% x number-of-columns). It’s absolutely positioned to the top left and z-index behind the content. For each column, the left position is offset by an additional -100%, which evenly distributes the image at the next available interval of available space and creates the look of a single spliced image.
Overlay: The semi-transparent overlay is meant to help with readability. It’s tough to read white text on top of an image, so adding a black covering and lowering the opacity gives your eyes a leg up. Without adding extra elements, I’ve used the after pseudo-element of the image’s container, div.img, to create the effect. Similar to div.img, div.img:after is absolutely positioned and styled accordingly to fill 100% of the column’s width and height.
Extra Credit: The beauty of this technique is the background image is actually a foreground image – meaning, it uses the <img /> element and can include a title, alt tag, and indexable image name for better search engine optimization.
HTML Code
The HTML is nothing fancy. It’s a basic row with 3 columns and a few divs inside. If you’ve ever used a WordPress page builder, you’re likely familiar with this sort of scaffolding (Section, Row, Column, Module->Content).
<section class="row">
<div class="col">
<div class="col-inner">
<div class="body-text">
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="button">
<button class="btn">Button</a>
</div>
<div class="img">
<img src="https://cdn.pixabay.com/photo/2015/01/28/23/35/hills-615429_1280.jpg" alt="random placeholder image" />
</div>
</div>
</div>
<div class="col">
<div class="col-inner">
<div class="body-text">
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="button">
<button class="btn">Button</a>
</div>
<div class="img">
<img src="https://cdn.pixabay.com/photo/2015/01/28/23/35/hills-615429_1280.jpg" alt="random placeholder image" />
</div>
</div>
</div>
<div class="col">
<div class="col-inner">
<div class="body-text">
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="button">
<button class="btn">Button</a>
</div>
<div class="img">
<img src="https://cdn.pixabay.com/photo/2015/01/28/23/35/hills-615429_1280.jpg" alt="random placeholder image" />
</div>
</div>
</div>
</section>CSS Code
Here’s the complete CSS code from the example.
.row {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
margin: 0 -7.5px;
}
.col {
box-sizing: border-box;
position: relative;
width: 33.33%;
min-width: 385px;
height: 80vh;
min-height: 400px;
padding: 7.5px;
color: #fff;
text-align: center;
display: flex;
flex-flow: column;
z-index: 0;
}
.col-inner {
position: relative;
overflow: hidden;
display: flex;
flex-flow: column;
height: 100%;
background: rgba(0, 0, 0, 0.25);
padding: 40px 25px;
}
h2 {
font-size: 36px;
font-family: sans-serif;
text-align: center;
}
.body-text {
flex: 1 0 auto;
text-align: left;
font-size: 17px;
line-height: 1.7;
}
.button {
flex: 0 0 auto;
padding: 30px 0;
}
.img {
position: absolute;
top: 0;
left: 0;
width: 300%;
z-index: -1;
}
.img:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.35);
content: ' ';
}
.col:nth-child(2) .img {
left: -100%;
}
.col:nth-child(3) .img {
left: -200%;
}
.img img {
display: block;
width: 100%;
height: auto;
min-height: 100%;
}
.btn {
border-radius: 3px;
background: #0e90ff;
border: 2px solid #0e90ff;
color: #fff;
padding: 12px 1.5em;
font-size: 16px;
font-weight: 700;
}
.btn:hover {
border-color: #052cbd;
background-color: #052cbd;
}
@media only screen and (max-width: 767px) {
.col {
width: 100%;
min-width: none;
}
}
0 Comments