Make opacity of div on sides - html

Question

I recently have created this banner for my website, but I realized that I only want the main part of my site to be 900px long. However, I want the banner to run off the page, but have the part where it runs off be darkened (through opacity). So, this means, I need to make the image of my site positioned in the middle. Here is what I developed so far:
https://jsfiddle.net/h3w89t9y/4/
As you can see, this doesn't really get what I need. Here's the issue:
.banner {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
background-position: center;
margin: 0 auto;
height:185px;
}
The banner isn't 800px. If I add in a width of 800px, it will go to the middle just like I wanted. However, the image will be limited to only be 800px long rather than overflowing off of 800px.
This is what I'm trying to get it to look like:
https://i.gyazo.com/c38cae7bd34379477a6fcc8eeb160c22.png
How do I make it to where my banner is centered to the middle, but has the sides overlapped with opacities?

Answer 1

You can achieve what you want using pseudo like this:
body {
margin: 0;
}
.wrapper {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat center;
width: 100%;
}
.wrapper:before, .wrapper:after {
content:'';
width: calc((100% - 900px) / 2); /*setting the width to the 100% minus your desired header's width / 2 so it will occupy the rest of your content*/
height:185px;
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.3); /*set the desired opacity*/
}
.wrapper:before {
left: 0;
}
.wrapper:after {
right: 0;
}
.banner {
width: 900px;
height:185px;
margin: 0 auto;
}
<div class="wrapper" style="">
<div class="banner"></div>
</div>
So the idea is your pseudo elements occupy the rest of the content and setting them your desired transparency, notice that in this way you also can set them blur or whatever filter that you want.
Here a working jsfiddle to play with

Answer 2

You can't control opacity of a single background like that, you need another element. For example:
.banner, .bannert {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
background-position: center;
margin: 0 auto;
height:185px;
}
.banner {
max-width: 800px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
.bannert {
background-repeat: repeat-x;
opacity: 0.5;
}
<div style="width: 100%; background: black; padding: 1px;position: relative;">
<div class="bannert"></div>
<div class="banner"></div>
</div>
https://jsfiddle.net/h3w89t9y/6/

Answer 3

Try this; add two divs first, one for the left side, and one for the right,hence you can apply your desired opacity to them and make the banner sides filtered, look at the snippets below;
HTML
<div style="width: 100%; padding: 1px;">
<div class="banner">
<div class="trans_right"></div>
<div class="trans_left"></div>
</div>
</div>
CSS
.trans_right {
padding: 2rem;
width: 13%;
float: right;
background: rgba(71,67,255,0.9);
height: 65%;
}
.trans_left {
padding: 2rem;
width: 13%;
float: left;
background: rgba(71,67,255,0.9);
height: 65%;
}
I'm really not sure if there is a better way to do this, but it gives you what you're looking for, checkout the link:
Transparent Sides