Placing text and an image within a grid cell does not automatically stack them on top of each other

I have a large div with a grid display, consisting of 3 rows and 2 columns.

I am attempting to include text directly below the photo within each cell.

This is what my code looks like:

          <div class="arrange-fixes">

                <div class="categories">
                    <div id="operating-systems"> </div>
                    <p>Operating system installation and optimization</p>
                </div>


                    <div class="categories"></div>
                    <div class="categories"></div>
                    <div class="categories"></div>
                    <div class="categories"></div>
                    <div class="categories"></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;
 }

I want the text to be displayed underneath the picture within my div, not on top of it. Can anyone help me achieve this?

htmlcss

Answer №1

Could you kindly include the .categories class with a position:relative style property?

.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 class="arrange-fixes">
      <div class="categories">
        <div id="operating-systems"></div>
        <p>Operating system installation and optimization</p>
      </div>
      <div class="categories"></div>
      <div class="categories"></div>
      <div class="categories"></div>
      <div class="categories"></div>
      <div class="categories"></div>
 </div>

Perhaps this snippet will be useful for working 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 class="container">
      <div class="box-1"></div>
      <div class="box-2">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
</div>

Answer №2

Hey there, thank you for clearly explaining your issue. You can easily resolve it by using the following code:

.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;
      }

Here is how to implement it in 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>

Remember to place the figure caption above the img tag as shown and ensure the dimensions of your image and div are calculated correctly.

If you want your image to be the full background of your div element, use this CSS code:

#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;
            }

After applying this code, you can use a p tag within your div and your text will appear at the top. I hope this solution works for you :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to add padding to an HTML element without affecting its overall dimensions?

Is it possible to apply padding to a div without increasing its size? <div id="someDiv"> someContent </div> #someDiv{ padding: 1em; } One potential solution is to add another nested div within #someDiv and apply margin to that, rathe ...

htmlcss

Regular expression for selecting characters and numbers in jQuery using a selector

Can someone help me figure out how to select all IDs like this: r1 r2 r3 etc. and not the other IDs like helloWorld I attempted using the CSS selector with jQuery but I'm having trouble understanding how. I tried $('#r[0-9]') but it didn& ...

jquerycssregexselector

The rel=preload attribute for the stylesheet is not properly rendering the styles after being downloaded

Exploring the use of rel=preload for the first time, specifically for a few stylesheets. Check out the code snippet below: <link rel="preload" href="css/styles.css" as="style"> <link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css ...

cssgoogle-chromepreload

Does anyone know of a tool that allows you to save HTML as a standalone page?

Looking for a solution to easily send standalone .html files with no external dependencies to clients on a regular basis. The original pages are built using node.js and express, and feature libraries like High Charts. Up until now, I have been manually pre ...

javascriptjquerypythonhtmlblob

The PNG image that is stored in the MySQL database is not displaying completely on the web browser

Here are the PHP codes from index.php <?php include("connection.php"); $sql = "SELECT prod_cost, prod_name, prod_image FROM products"; $result = mysqli_query($con, $sql); $row = mysqli_fetch_all($result, MYSQLI_ASSOC ...

phphtmlcssmysql

PHP and jQuery to create an autocomplete text input feature

I've been working on implementing an auto suggest text box using PHP and jQuery, but it seems like the jQuery code I found online is already deprecated. I'm not sure if my code is incorrect or if the issue lies with the jQuery itself. Can anyone ...

phpjqueryhtml

Customizing SVGs for Ion Icons Version 5 in a React Application

I have been using ion icons in React by importing them directly into my index.html. While this method has been working well with the icons from ion icons found here, I know that you can also use custom SVGs by specifying an src attribute in the ion-icon ta ...

htmlreactjssvgionicons

The navigation bar and text subtly shift when displayed on various devices or when the window size is adjusted

Hello, I am brand new to web development and have encountered an issue on my website. Whenever the window is resized or viewed on a different screen, the navigation bar (which consists of rectangles and triangles) and text elements start moving around and ...

htmlcss

Explore lengthy content within Angular 2 programming

I have a lengthy document consisting of 40000 words that I want to showcase in a visually appealing way, similar to HTML. I aim to include headers, paragraphs, and bold formatting for better readability. Currently, I am developing an Angular application. D ...

htmlangulartext

Use JavaScript to load and set a background image for a div

When it comes to loading different images onto an "img" tag by printing their URLs using JavaScript and then letting CSS manipulate the content in the tag, I have a code snippet that does just that. $(window).load(function() { var randomImages = [&apo ...

javascriptjquerycssbackgroundonload

In VB.NET, one can easily detect the HTML tag and update its content

I currently have some data stored in a database, which looks like this: <p><font style="BACKGROUND-COLOR: gold" size="+2" face="Arial Black"><strong>test</strong><u> test1</u> </font>< ...

htmlcssasp.netvb.net

choose from the list of options that appear above the control

It's strange, but no matter how simple the example is - whether it's regular HTML or Bootstrap - the option list always appears on top of the select control itself. I have no idea why this is happening. Can someone help me with this issue? Here ...

htmlbootstrap-4

Issue with jQuery 'on' event not triggering following 'load' event

I am facing an issue on a page where similar events occur but when new content is loaded halfway through, most of the jQuery functionalities stop working. The scenario involves answering questions in a 'game' format using AJAX calls. Once all que ...

javascriptphpjqueryhtmlajax

Accordion Tuning - The Pro and Cons

Here is a functional accordion that I've implemented, you can view it here This is the JavaScript code I am using: $(document).ready(function ($) { $('#accordion').find('.accordion-toggle').click(function () { //Expa ...

javascriptjqueryhtmlaccordionjquery-ui-accordion

Page rotates on hover effect with RotateY

How can I get an image to rotate on the Y axis when hovered over? My code works in -moz- but not in -webkit- or -o-. What am I missing? .spin-logo { height: 450px; margin: 0 auto; -moz-transition: transform 2000ms ease 0s; -o-animation: transfor ...

htmlcsstransform

Display or conceal elements based on the screen size using Bootstrap 3 classes

While this may seem straightforward for some, the reality is quite different. I have two images that need to be displayed based on screen size. In my HTML code, I used classes like hidden-md, hidden-sm, and hidden-xs assuming they would only show on larg ...

htmlcsstwitter-bootstrap

Organize column 1 on top of column 2 for mobile display

Currently, I am utilizing the grid system with 2 columns set up as follows: <div class="row"> <div class="col-md-6"> 1 </div> <div class="col-md-6"> 2 </div> </div> ...

htmlbootstrap-4bootstrap-5

Finding the correct closing tag in HTML can be accomplished using an algorithm

Currently working on my custom HTML parser in JAVA and have completed the lexer. Now diving into coding the parser to create a DOM tree and ensure the proper construction of my HTML. For example, understanding that an img tag is considered a void tag as p ...

javahtmlalgorithmparsingtags

Change the selection so that only the initial one appears in gray

Is there a way to make the text inside a select field gray out when the first option is selected? Can this be accomplished with just CSS or does it require JS? I have attempted altering the style of the first option, but it only affects the text color in ...

htmlcss

Looking for tips on resolving issues with the bootstrap navigation bar?

Check out this code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport ...

javascripthtmlcssbootstrap-4