There is nothing called background opacity. Opacity is applied to the element, its contents and all its child elements. And this behavior cannot be changed just by overriding the opacity in child elements. Child vs parent opacity has been a long standing issue and the most common fix for it is using rgba(r,g,b,alpha) background colors. But in … Read more
I see 2 easy options: multiple background with a translucent single gradient over image huge inset shadow gradient option: shadow option: an old codepen of mine with few examples a third option with background-blen-mode :The background-blend-mode CSS property sets how an element’s background images should blend with each other and with the element’s background color.
According to your CSS file path, I will suppose it is at the same directory with your HTML page, you have to change the url as follows:
You could use a combination of both methods eg. Run code snippetExpand snippet You can use negative margin to move the image around within the <div/>.
According to your CSS file path, I will suppose it is at the same directory with your HTML page, you have to change the url as follows:
Is that the result you are looking for? All i did was to create a div around the bg-image2 and profilePicture, so that the blur on bg-image2 doesn’t affect profilePicture, then set that div to position:relative; , so that the profilePicture can be placed in the middle like you did. Here is your HTML edited: … Read more