How would I place an image inside one of the Grid squares?

If all the classes are listed as griditem, how do you do it?

<style type="text/css">



div.gridcontainer {
 background-color: #000000;
margin-left: 386px;
margin-bottom: 0px;
  width: 468px;
  line-height: 0;
  border-right: 6px solid green;
  border-bottom: 6px solid green;
}

div.griditem {
  display: inline-block;
  border-left: 6px solid green;
  border-top: 6px solid green;
  width: 150px;
  height: 120px;
}

</style>

</head>
<body>


<div class="gridcontainer">
  <div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>

</div>
</body>
</html>

I tried this:


div.griditem {
  display: inline-block;
  border-left: 6px solid green;
  border-top: 6px solid green;
  width: 150px;
  height: 120px;
}

div.griditem 1{
  display: inline-block;
  border-left: 6px solid green;
  border-top: 6px solid green;
  width: 150px;
  height: 120px;
background: url(http://i.imgur.com/vVQZTjQ.jpg)
background-size: 100% 100%;
}

If you don’t want to, or can’t add an additional class or id to the specific element you could use nth-child().

How do you add an additional class?

Separate classes with a space.

<div class="griditem anotherClass">

Like that?

<div class="gridcontainer">
  <div class="griditem"> <div class="griditem anotherClass"> </div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>


div.gridcontainer {
 background-color: #000000;
margin-left: 386px;
margin-bottom: 0px;
  width: 468px;
  line-height: 0;
  border-right: 6px solid green;
  border-bottom: 6px solid green;
}


div.griditem {
  display: inline-block;
  border-left: 6px solid green;
  border-top: 6px solid green;
  width: 150px;
  height: 120px;

}

div.griditem anotherClass {
  display: inline-block;
  border-left: 6px solid green;
  border-top: 6px solid green;
  width: 150px;
  height: 120px;
background: url(http://i.imgur.com/vVQZTjQ.jpg);
}

Yes, but…

(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.

.anotherClass {
    background: url(http://i.imgur.com/vVQZTjQ.jpg);
}

<div class="griditem anotherClass"></div>

It won’t work like this:

See:

<div class="gridcontainer">
<div class="griditem"></div>
<div class="griditem"></div>
<div class="griditem"></div>
<div class="griditem"></div>
<div class="griditem"></div>
<div class="griditem"></div>
<div class="griditem"></div>
<div class="griditem"></div>
<div class="griditem"></div>
</div>

It has to be like this:

<div class="gridcontainer">
  <div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>

Unless you know another way.

1 Like

Good, that fixes the HTML :+1:

now you can add additional classNames to whichever div/s you wish.

I always had it like this:

<div class="gridcontainer">
  <div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>

This adds it to every box:

How do I add it to only 1?

I’m stuck on this.

Not in post #6, which was the one that I responded to. The closing </div> for the first .griditem is missing.

Yes, it does. You seemed to have the right idea in post #6. How did you get off track?

It gets all messed up like this:

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.

I did add another classname here. Won’t work:
https://jsfiddle.net/r01t52vr/7/

That’s a fair assessment.

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:

div.griditem.anotherClass {
    background: url(http://i.imgur.com/vVQZTjQ.jpg);
    background-repeat:no-repeat;
    background-size: 100% 100%;
}

How many boxes are there supposed to be in this matrix, horizontally and vertically?

1 Like

There’s 9.

Try 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.

Easy peasy.

1 Like

That works. Thanks.