Post

Display Background Image Outside of Container With CSS

If you’re just using a regular background image applied to the section of a block. Your background images will get cut off based on the container width and height. We get around this problem by using a pseudo after class with position absolute.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.tabs-group {
 margin: 30px 0;
  position: relative;
  z-index: 10;
  &:after {
    content: " ";
    display: block;
    width: 250px;
    height: 200px;
    position: absolute;
    top: -90px;
    background-image: url("../../src/assets/backgrounds/my_image.png");
    left: 0;
    z-index: -10;
  }

This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.