adding text and image to a grid cell won't display one under the other-CodePudding

I've got a big div , with display: grid; , 3 rows and 2 columns.

I'm trying to add some text right after the photo inside the cell.

Here is how my big div looks like.

My code looks like this:

          <div >

                <div >
                    <div id="operating-systems"> </div>
                    <p>Operating system instalation and optimisation</p>
                </div>


                    <div ></div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
                    
                </div>

  .arrange-fixes{
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     min-height:800px;
     width: 550px;

     justify-items: center;
     align-items: center;
 }

 .categories{
     display: grid;
     //background-color: lime;
     width: 225px;
     height: 162px;

     border-radius: 15px;    
     border-width: 5px;
     border-style: double;
     border-color: #85c236;

     box-shadow: inset 0px 0px 18px 8px rgb(198, 230, 156);

     background-image: url("/images/fixes/windows.jpg");
     background-position: center;
     background-size: contain;
 }

So I want the text to not be on top of the picutre, but to be right under my div .

Does anyone know how can I achive that?

CodePudding user response：

Can you please add .categories class a position:relative and

.categories p{
  position: absolute;
  bottom:0;
  right: 0;
}

.arrange-fixes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  min-height:800px;
  width: 550px;
  justify-items: center;
  align-items: center;
}

.categories {
    display: grid;
    /* background-color: lime; */
    width: 225px;
    height: 162px;
    position: relative;

    border-radius: 15px;    
    border-width: 5px;
    border-style: double;
    border-color: #85c236;

    box-shadow: inset 0px 0px 18px 8px rgb(198, 230, 156);
    background-image: url("/images/fixes/windows.jpg");
    background-position: center;
    background-size: contain;


}

.categories p{
  position: absolute;
  bottom:-75px;
  right: 0;
}

<div >
      <div >
        <div id="operating-systems"></div>
        <p>Operating system instalation and optimisation</p>
      </div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
 </div>

Maybe this will help with Flexbox

*,
*::before,
*::after {
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}


body {
  min-height: 100vh;
  background-color: #999;
  margin: 0;
}

.container{
max-width: 900px;
display: flex;
flex-direction: column;
margin: 0 auto;
justify-content: center;
align-items: center;
}

.box-1{
  background-color: greenyellow;
  width:100%;
  height:20rem;
}

.box-2{
  background-color: blueviolet;
  width: 100%;
  color:white;
  font-size: 2rem;
  text-align: end;
}

<div >
      <div ></div>
      <div >
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
</div>

CodePudding user response：

hi thank you for explain your problem clearly u can just use figure code and its done like the code below

.categories{
     display: grid;
     background-color: lime;
     width: 150px;
     height: 250px;

     border-radius: 15px;    
     border-width: 5px;
     border-style: double;
     border-color: #85c236;

     box-shadow: inset 0px 0px 18px 8px rgb(198, 230, 156);

     background-image: url("/images/fixes/windows.jpg");
     background-position: center;
     background-size: contain;
 }

   figure img{
            width: 100%;
      }
      figure{
            text-align: center;
      }

html :

<div id="operating-systems"> 
            <figure>
                  <figcaption>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</figcaption>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/2214px-How_to_use_icon.svg.png" alt="">
            </figure>
</div>

just keep figure caption in top of img tag and its done always dont forget calculate your image and your div width and height

and if u want to show your image in full background of your div element u can use this code for ur div below

#operating-systems{
                  background: url(https://iconstore.co/assets/img/set/thumb/unoline-gallery.png);
                  background-position: bottom;
                  background-size: cover;
                  background-repeat: no-repeat;
                  background-clip: padding-box;
                  background-origin: content-box;
                  padding: 15px;
            }

so after set this code u can use p tag in your div and your text will show in top i hope i can help you :)