Overlapping images in CSS grid

Question

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, 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 :)

These flexbox methods should work in Grid, as well. https://stackoverflow.com/q/35871294/3597276 — Michael Benjamin, Aug 18 '17 at 17:48

Ted · Answer 1 · 2017-10-12T14:14:44.413

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

Jon Uleis · Accepted Answer · 2017-08-18T18:08:30.263

2

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%);
}

edited Aug 18 '17 at 18:08

answered Aug 18 '17 at 17:42

Jon Uleis

17,693
2
33
42

Thanks for the fast reply Unfortunately not. The logo appears on the right site of the banner if i do this. And somehow the banner should also be centred on the page – Philipp Aug 18 '17 at 17:50
Can you show us that in a code snippet so we can troubleshoot the implementation? – Jon Uleis Aug 18 '17 at 17:52
@Philipp And I've edited my answer. Can you see if this works? – Jon Uleis Aug 18 '17 at 18:02
Thanks! The logo is now more or less in the center (needs some fine-tuning) but the banner is still not centred in those 3 cells :( I tested so many of those methods to align some content but no of them worked ... – Philipp Aug 18 '17 at 18:05
It works if i apply text-align:center to the .banner class but this does not belong there – Philipp Aug 18 '17 at 18:08
@Philipp Oh - I had a typo in my CSS, `#banner` should have been `.banner`. Yes, that was part of the fix. Why doesn't it belong? – Jon Uleis Aug 18 '17 at 18:08
Oh yea haha that works pretty good thanks very much!! I am just trying to separate those things. E.g. if i had more than one element in one cell so i could use the different styles on them and not the cell but never mind it works! Is there any explanation why the logo is frozen onto the banner in your first solution but in `#skyline { display: block; margin: 0 auto; }` it moves still after the banner stoppped moving when i resize the page ? – Philipp Aug 18 '17 at 18:14

score 1 · Answer 3 · edited May 09 '18 at 07:16

1

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

edited May 09 '18 at 07:16

ochs.tobi

3,214
7
31
52

answered May 09 '18 at 05:43

arin

41
2

1

Could you please give an example? If I supply these properties to give two images the same row and column, I still see one image above (in the y-axis) the other, rather than overlaid. – vargonian Sep 13 '18 at 01:24

Overlapping images in CSS grid

3 Answers3