Individual Background Images for Individual Divs - html

Question

For a current project of mine, I'm working on a website for a clan of sorts. They've asked me to create a grid of games that they play, and I seem to be struggling with that.
Each individual div considsts of a background-image and a p element for the title of the game. Currently, for every different game, I have to create a new div and a new class in my style sheet, and I only end up changing the left-margin a bit and changing that background image's filepath. It feels like a bit of a waste of time to me.
The code is as follows:
(HTML)
<div id="content" align="center">
<div class="content-box">
<div class="content-box-game-one">
<p>Just Cause 2</p>
</div>
<div class="content-box-game-two">
<p>War Thunder</p>
</div>
<div class="content-box-game-three">
<p>Borderlands 2</p>
</div>
<br />
<div class="content-box-game-four">
<p>Heroes and Generals</p>
</div>
<div class="content-box-game-five">
<p>Grand Theft Auto V</p>
</div>
<div class="content-box-game-six">
<p>Dirty Bomb</p>
</div>
<br />
<div class="content-box-game-seven">
<p>PayDay 2</p>
</div>
<div class="content-box-game-eight">
<p>Team Fortress 2</p>
</div>
<div class="content-box-game-nine">
<p>Coming soon...</p>
</div>
</div>
(CSS)
#content {
margin-top: 3px;
}
.content-box {
width: 1150px;
height: 100%;
}
.content-box-game-one {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 80px;
background-image: url('http://i.imgur.com/ZZtELB6.png');
background-size: 400px;
}
.content-box-game-two {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('http://war-thunder-hack.marioapps.net/assets/cheatmp/images/background.jpg');
background-size: 400px;
}
.content-box-game-three {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('http://www.hardcoregamer.com/wp-content/uploads/2012/10/borderlands2.jpg');
background-size: 400px;
}
.content-box-game-four {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 80px;
background-image: url('http://www.gamewallpapers.com/previews_480x300/wallpaper_heroes_and_generals_01.jpg');
background-size: 400px;
}
.content-box-game-five {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/audio/video/2012/11/15/1352984366518/Grand-Theft-Auto-V-005.jpg');
background-size: 400px;
}
.content-box-game-six {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('https://metrouk2.files.wordpress.com/2012/11/article-1354195970386-16454a86000005dc-11033_636x353.jpg');
background-size: 400px;
}
.content-box-game-seven {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 80px;
background-image: url('http://www.gamechup.com/wp-content/uploads/2013/08/payday-2-featured-1.jpg');
background-size: 400px;
}
.content-box-game-eight {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('https://upload.wikimedia.org/wikipedia/en/5/59/TF2_Group.jpg');
background-size: 400px;
}
.content-box-game-nine {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('http://www.exoticindia.com/religious/sfa47.jpg');
background-size: 400px;
}
.content-box p {
margin-top: 80px;
font-family: Lobster;
font-weight: bold;
font-size: 30px;
color: white;
}
Is there anyway I can just create one class on my stylesheet and have it so that the background image will change? Any other ways around this problem?
Thanks!

Answer 1

Since all other properties are same other than background-image you can create one general class like:
.content-box-game {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 80px;
background-size: 400px;
}
Then you only need to specify a background-image property in your other classes.
.content-box-game-one{
background-image: url('http://www.hardcoregamer.com/wp-content/uploads/2012/10/borderlands2.jpg');
}
Add both classes to your div
<div class="content-box-game content-box-game-one">
<p>Borderlands 2</p>
</div>