CSS Background Image Question

CSS Background Image Question
0

#1

Good morning everyone. This isn’t a FreeCodeCamp question but I still think this is the best forum on the internet to ask this. How might one pull off this background effect with CSS how the inner section doesn’t show the gray overlay of the image?

I’ve toyed with making the inner section have a box-shadow to replicate the effect. I’ve also tried making the inner section have a border to replicate effect. As far as I know, you can’t “turn off” an overlay for a certain section of the code. Thanks.


#2

Is that an actual web page? If it is you can open your browser’s devtools and inspect the CSS.

Otherwise I have no idea.


#3

It’s not a webpage. It’s a design from Dribbble I’m trying to create for practice. I’m still working on it and I still haven’t figured it out. The solution is out there somewhere. :thinking:


#4

Ok, the question bugged me and I tried implementing it.

(open on new tab for better effect)

Some notes:

  • It’s actually two backgrounds (same image) on two different elements. One on the body and one on the middle <div>. The background is positioned at the center in both cases.
  • On top of the body there is a full-size <div> that is semi-transparent. The “transparent” <div> is inside that (with its own background to give the illusion of transparency).
  • You probably should use a large enough image because you can’t use background-size: cover or the like, or else it will break.
  • The inner <div> should be perfectly centered!
  • You’ll probably hit problems if the page needs scrolling.
  • I’m not sure how this will hold in general.
  • There’s probably a better way to do this :slight_smile:

You can probably pull this off by using box-shadow. Just give it ridiculously large values for the shadow size :wink:. However there’s the problem of trying to put some content on the dark overlay, since it’ll be shadowed by the box shadow.


#5

Interesting. I tried the box-shadow method but I failed at that. I must have been doing it wrong. Your first solution makes sense how it would work, I’ll have to come back to this after work! I’m just sooooooo used to using background-size: cover; that I forget other properties exist. Lol. Thanks for the help. I’ll let you know how it comes out. Thanks again my friend.


#6

You can also do this with a semi-transparent border actually. Here’s a quick pen: https://codepen.io/faktotum85/pen/Eoxreb

It doesn’t play nice with the rounded corners though so if you need those you’re probably better off going with one of the other approaches.


#7

Ugh - got a bit obsessed with this.

Here’s another approach that lets you have the rounded corners and background-size: cover; It’s a bit weird syntactically with the linear gradient on the background, but hey.


#8

That’s an interesting solution as well. The only issue with the second solution is the image doesn’t scale proportionately when the window is resized. Luckily for this, it’s just practice and not an actual page. I like the transparent border, I tried and failed at that earlier so looking at your code steered me in the right direction. Thanks for the input! This one is tough.