How can I make this frame image for slideshow appear on top of slide images?

Hi! I am really unsure on how to make the text visible and how to make the frame image appear on top of the slide images because right now I can see that the images are in front. I tried placing this bit (which is creating the frame), on container:before and after so I could change z-index but nothing happened and the text just won’t show, I wanted to place it below the frame.

  box-sizing: border-box;
  border: 5vw solid rgba(0, 0, 0, 0.5);
  border-image: url(https://i.imgur.com/cZ8ZLoM.png) 550 round;
  border-image-width: 1.5;

codepen

If your container has a z-index other than auto then in css terms it becomes ‘atomic’ which means that any content in that element cannot go beneath its background and borders. if you set the container to auto z-index then you can use a negative z-index on the children and they will sit beneath its borders.

e.g.

.container {
 /*z-index:50;*/
  z-index:auto;
}
.post {
    z-index:-1!important;/* the !important is just for testing as you use js to set this.
}

However you will need to change your js as you are setting the z-index dynamically and your z-indexes of 1 will need to be -3 and your z-index of 1 will be -1 to keep the same stacking levels as before.

Your title isn’t showing because you have the outer container set to 620px but your inner container is set to 650px (you can’t put something bigger inside something smaller). Also don’t forget your outer has 5vw borders which makes the space inside outer 10vw smaller than you think. The space inside will be 620px - 10vw. You need to make sure the internal elements are no larger than that.

A magic number guess would be something like:


.img {
  width: 100%;
  height: calc(580px - 10vw);
 object-fit:cover;
}

(Of course it is likely you are also stretching the images and not maintaining their aspect ratio.)

However I don’t think that your image is a good candidate for a border image anyway being at 2.5 mb just for a frame. You need to choose your frames carefully for best results.

1 Like

paul paul paul. thank you for being a real one.

1 Like