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.