CODEWITHSUNDEEP
htmlcssgridoverlapcss-grid
Philipp
Philipp

Reputation: 35

Overlapping images in CSS grid

I need two pictures to overlap in a CSS grid layout without cheating and it has to be done with CSS grid. Means it should stay in the layout cells. Here is what I'm working on: "The middle" should be centred in the picture and both centred on the page" "The middle" should be centred in the picture and both centred on the page, respectively the "banner"-cell

The following CSS layout should stay the same desirably: 

.container {
    display: grid;
    grid-template-columns:  15% 70% 15%;
    grid-template-rows: 20% 20% 20% 20% 20%;
    grid-gap: 2px;
    grid-template-areas:
        'banner banner banner'
        'sidebar content fb'
        'sidebar content fb'
        'sidebar content fb'
        'src src src';
}

.banner {
    grid-area: banner;
}

I already tried these methods: 

justify-items: center;
justify-content: center;
align-content: center;
align-self: center;
text-align: center;

The method with absolute positions worked out fine, but it disregards the grid completely so the actual grid is under the picture. It would be possible to apply a padding to the "banner" cell to push down the content but this is the kind of cheating I want to avoid.

I need those 2 pictures to stay overlapping in this "banner" cell, but I am running out of options and there are not a lot of answers out there due to the fact that the CSS grid is pretty new.

The HTML:

<body class="body">

<div class="container">

    <div class="banner"> 

        <img id="skyline" src="Pictures/SkylinePH.jpg"> 
        <img id="logo" src="Pictures/Logo2.png">            

    </div>  



</div>

I am very grateful for any help! Thank you in advance :)

Upvotes: 1

Views: 8440

Answers (3)

arin
arin

Reputation: 41

With css grid there is no need for absolute or relative positioning any more. Don't forget in css grid you can stack grids on top of each other by giving them same grid-row and grid-column values and then use z-index. Pretty powerful :) hope this helped

Upvotes: 1

Ted
Ted

Reputation: 923

Text over Image. With CSS Grid Layout.

HTML

<div id="container">
    <img src="some-image.jpg">
    <p>SOME TEXT OVER IMAGE</p>
</div>

CSS

#container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
}

#container img{
    grid-column: 1;
    grid-row: 1 / span 3;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

#container p{
    grid-column: 1;
    grid-row: 2;

    align-self: center;
    justify-self: center;

    z-index: 1;
}

Image over Image. With CSS Grid Layout.

HTML

<div id="container">
    <img id="img-1" src="image-1.jpg">
    <img id="img-2" src="image-2.jpg">
</div>

CSS

#container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
}

#container #img-1{
    grid-column: 1;
    grid-row: 1 / span 3;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

#container #img-2{
    grid-column: 1;
    grid-row: 2;

    align-self: center;
    justify-self: center;

    z-index: 1;
}

Upvotes: 6

Jon Uleis
Jon Uleis

Reputation: 18649

The method with absolute positions worked out fine, but it disregards the grid completely so the actual grid is under the picture.

You don't need to position: absolute both images - you could have the banner image, which is larger and going to be behind the logo, occupy the space it normally would in the CSS grid cell. Then you could absolute position and center the logo on top of it. Would that work?

EDIT: Some CSS to try for accomplishing this: 

.banner {
  position: relative; /* so we can position the logo based on this container */
  text-align: center; /* so the skyline image is horizontally centered */ 
}

#logo {
  position: absolute; /* these 4 lines will center the logo */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Upvotes: 2

Related Questions