This code snippet helps you to create a card with the background image. It creates four div elements with class “card” inside a wrapper div. Each card has a title element with class “card__title”. The first card uses an img tag to set the background image, the second card sets the background image on CSS using the class “has-bg-img” and a separate class “bg-img-nature”, the third card sets the background image on the style attribute of the div element using the same class as the second card, and the fourth card sets the background image on JavaScript using the id “iam-the-card” and the same class as the second and third cards.
These examples show different ways to set a background image on a div element using HTML, CSS, and JavaScript.
How to Create Cards With Background Image CSS
Create the HTML structure for the card as follows:
<div class="wrapper">
<!-- Using an img TAG -->
<div class="card">
<!-- The background image -->
<figure class="card__thumbnail">
<img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
<span class="card__title">Using IMG tag inside a container</span>
</figure>
</div>
<!-- Setting background-image on CSS -->
<div class="card has-bg-img bg-img-nature">
<span class="card__title">Using background-size on CSS</span>
</div>
<!-- Setting background-image on the STYLE attribute -->
<div class="card has-bg-img" style="background-image: url(https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)">
<span class="card__title">Using background-size on HTML</span>
</div>
<!-- Setting background-image with JS -->
<div id="iam-the-card" class="card has-bg-img">
<span class="card__title">Using background-size on JS</span>
</div>
</div>
Now, style the card using the following CSS styles:
/* Not important. General styling
------------------------------------------ */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
*{ margin: 0; padding: 0; box-sizing: border-box; }
*::before, *::after{ box-sizing: inherit; }
body{ color: rgba(0,0,0,.87); font-size: 1rem; line-height: 1.5;
font-family: Roboto, sans-serif; background: #26A69A; padding: 2rem 2rem 0; }
.wrapper{ display: flex; flex-flow: row; flex-wrap: wrap; justify-content: center; }
.wrapper > *{ margin: 0 1rem 2rem; }
.cd__main{
background: #26A69A !important;
}
/**************************************************
** CARDS STYLING
***************************************************/
/* Card outside box. Here is where the
** dimensions, shadows and borders are set
------------------------------------------ */
.card{
position: relative;
overflow: hidden;
display: flex;
width: 300px; /* Box dimensions */
height: 400px;
border-radius: 4px; /* Styling */
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
transition: box-shadow 0.56s ease-in-out; /* Animation */
/* background-color: rgba(0,0,0,.2); /* for debugging */
}
/* Shows an outer shadow */
.card:hover{ /* Just for styling */
cursor: pointer;
box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
}
/* Cards titles styling
------------------------------------------ */
.card__title{ /* Just for styling */
align-self: flex-end; padding: 0.5rem;
color: rgba(255,255,255,.90); font-size: 2rem;
line-height: 1;font-weight: 600; }
/* Styles for:
** - Using IMG tag inside a container
------------------------------------------ */
/* The image container */
.card__thumbnail{
position: relative;
overflow: hidden;
display: flex;
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
width: 100%; /* Thumbnail dimensions. */
height: 100%; /*** Change the height to make the image smaller ***/
/* background-color: rgba(0,0,0,.2); /* for debugging */
}
/* Sets the image dimensions */
.card__thumbnail > img{ /* Tip: use 1:1 ratio images */
height: 100%; /* or width when img.width > img.height */
}
/* Styles the title inside the img container */
.card__thumbnail > .card__title{ /* Just for styling */
position: absolute; left: 0; bottom: 0; }
/* Styles for:
** - Using background-size on CSS
** - Using background-size on HTML
** - Using background-size on JS
------------------------------------------ */
/* Prepares a container to have cover background */
.has-bg-img{
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/* Loads a specific image to a container */
.bg-img-nature{
background-image: url(https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
Finally, add the following JavaScript function:
const the_card = document.getElementById('iam-the-card');
the_card.style.backgroundImage = "url('https://images.unsplash.com/photo-1431794062232-2a99a5431c6c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ')";
That’s all! hopefully, you have successfully created cards with background image CSS. If you have any questions or suggestions, feel free to comment below.
