(1) Indent the HTML instead of listing the griditems on one line, then look at it again and see if anything stands out as an error… or validate it. Your choice.
(2) .anotherClass does not need to inlcude the className .griditem NOR does it need to repeat the properties in .griditem. It only needs to show whatever is different.
Boy, it sure does. Why did you not follow my recommendation in post #7? You DID want to add another className, didn’t you? That’s what you asked to do and it made good sense to me.
Your CSS is not targeting the box in which you want the image. It is targeting a box .anotherClass within the box .griditem that does not exist. To make it work, add a dot between the classnames without a space. Like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>image boxes</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-place-an-image-inside-one-of-the-grid-squares/255024/17
-->
<style type="text/css">
.gridcontainer {
display:table; /* prevents space between inline-block elements */
width:468px;
word-spacing:-.5em; /* prevents space between inline-block elements */
background:black;
border-right:6px solid #38761d;
border-bottom:6px solid #38761d;
margin:0 auto;
}
.griditem {
display:inline-block;
vertical-align:top; /* aligns inline-block boxes to top - better than line height:0 in parent. */
word-spacing:0; /* prevents space between inline-block elements */
border-left:6px solid #38761d;
border-top:6px solid #38761d;
width:150px;
height:120px;
}
.picture1 {
background-image:url(http://i.imgur.com/vVQZTjQ.jpg);
background-repeat:no-repeat;
background-size:cover;
}
</style>
</head>
<body>
<div class="gridcontainer">
<div class="griditem picture1"></div>
<div class="griditem"></div>
<div class="griditem picture1"></div>
<div class="griditem"></div>
<div class="griditem picture1"></div>
<div class="griditem"></div>
<div class="griditem picture1"></div>
<div class="griditem"></div>
<div class="griditem picture1"></div>
</div>
</body>
</html>
As long as we are throwing you fish and you never learn to fish for yourself, you’ll be begging again and again. Please try to learn how these things work. Ask questions, play with them, change values and see what happens. Take a beginners class in HTML/CSS 101. It will last you a very long time.
I added the additional pictures because I could. To remove them, just remove the className from the HTML.
To add a different picture, create a new className similar to the first one and add the new className to the HTML.