wEvangelineSantanau
New Member
I have a background image I'm loading but I want to darken it with a css overlay. MY site is responsive and so I can not figure out how to get the absolute positioned dark overlay to have a responsive width. Is this even possible?Here is my current code. Changing width of the preview will show you how the dark overlay stops covering the image on smaller widths where the header texts wrap increasing overall height of banner.http://jsfiddle.net/4CG32/Thanks for any tips/help!Main css code:\[code\].index-panel { position: relative; background: #333 url('http://images.alphacoders.com/285/285391.jpg') no-repeat; background-size: cover; padding: 70px 0 55px;\[/code\]}\[code\] .index-panel .background { width: 100%; height: 356px; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.23);}\[/code\]