1

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

1

3 Answers 3

5

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;
}
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%);
}
7
  • 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, 2017 at 17:50
  • Can you show us that in a code snippet so we can troubleshoot the implementation?
    – Jon Uleis
    Aug 18, 2017 at 17:52
  • @Philipp And I've edited my answer. Can you see if this works?
    – Jon Uleis
    Aug 18, 2017 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, 2017 at 18:05
  • It works if i apply text-align:center to the .banner class but this does not belong there
    – Philipp
    Aug 18, 2017 at 18:08
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

1
  • 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, 2018 at 1:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.