How can i put a border under background image?

0
votes

I have a background image and a border around it, so i need to put that border under my background image like it displayed in my draft. Draft image
Now i have something like this. My result
How can i fix it?

CSS

.hero-image {
position: relative;
width: 100%;
margin-left: 44px;
max-width: 716px;
height: 626px;
background-image: url("/img/hero/hero-bg.jpg");
background-repeat: no-repeat;
background-position: -150px;
background-clip: border-box;
background-size: cover;
border-bottom-right-radius: 140px;
border-top-left-radius: 140px;
}

.hero-image::after {
content: "";
position: absolute;
width: 716px;
height: 626px;
border: 2px solid #b0855b;
box-sizing: border-box;
border-bottom-right-radius: 140px;
border-top-left-radius: 140px;
transform: translate(35px, 33px);
}

2
htmlcssborder

2 Answers

0
votes

Add a z-index in the :after selector.

.hero-image::after {
   ...
   z-index: -1;
}

Code snippet here.

0
votes

Try with "z-index" property. Indicates the order of a positioned element and its descendants. Example:

.hero-image { z-index: 1; }

.hero-image-2 { z-index: 0; }