Adjust the transparency of the div along the edges

I've recently designed a banner for my website, but I want the main part of my site to be limited to 900px in width. I'd like the banner to extend off the page with darkened edges (using opacity). To achieve this effect, I need to position the image in the middle. Here's what I've come up with so far:

https://jsfiddle.net/h3w89t9y/4/

Unfortunately, this doesn't quite meet my requirements. Here's the problem:

.banner { 
    background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat; 
    background-position: center; 
    margin: 0 auto;
    height:185px;
}

The banner isn't 900px wide. If I set the width to 900px, it will center as intended. However, the image will only be visible within that 900px limit instead of extending beyond it.

This is the desired look I'm aiming for:

How can I center my banner while having the edges overlap with opacities?

htmlcss

Answer №1

To achieve the desired effect, you can use pseudo-elements in the following way:

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);
    height:185px;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.3);   
}
.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>

The concept is to use pseudo elements to fill the remaining space with your desired opacity or even apply additional filters like blur.

Check out this working jsfiddle to experiment further

Answer №2

To adjust the opacity of a single background, an additional element is required. Here's an 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>

Visit this link for more information.

Answer №3

If you want to create a banner with filtered sides, try adding two divs - one for the left side and one for the right. You can then apply your desired opacity to them. Here's an example of how you can achieve this:

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%;
}

This method may not be the only way to achieve the effect, but it will give you the result you're looking for. For more details, check out this link: Transparent Sides Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Quickest method for transitioning a Web Application to a Mobile Application

Is there a simple way to convert a fully responsive Web App, equipped with touch UI controls and compatibility with small screens, into an Android/iOS app? My Web App is basic HTML/JS/CSS without jQuery, making it very straightforward. I initially consid ...

htmlwebionic-framework

The error form is not responding even after attempting to locate the issue

I have created a form and it was working fine, but now when I click on the submit or reset buttons, nothing happens. I've checked my code thoroughly line by line, but can't seem to find the issue. I even tried restoring previous versions, but no ...

htmlangular

Using a dashed border stroke creates a unique look when combined with border-radius properties

I have been experimenting with different methods to increase the distance between border strokes on my element. So far, I have tried various approaches without success. For example, I explored this resource Unfortunately, the issue arises when I incorpor ...

htmlcssborderborder-radius

Do additional MySql tables have an impact on the speed of searches within a MySql database?

I am in the process of considering a database redesign for my classifieds website. Currently, I have 7 different tables in the database, each corresponding to a "MAIN CATEGORY". For instance, there is a "VEHICLES" table that contains information on variou ...

phpsqlmysqlhtmldatabase

Trigger a function upon the initial keypress event detected on an input field

I am facing an issue with an input element that has an onkeypress event triggering a function called change(). Strangely, the function does not execute on the very first keypress. I notice that I have to input 55 instead of just 5 for the function to updat ...

javascripthtmleventsinputonkeypress

Scrolling horizontally with visible vertical overflow is causing the contents of an absolutely positioned div to be hidden

Note: I have thoroughly searched related questions on stackoverflow and this is not a duplicate question. In my code, I have a `div` with `overflow-x: scroll`, but I want the content in the `div` to be visible in the `y` direction. The issue I'm faci ...

javascripthtmlcssreactjs

Guidelines for incorporating a table and form in PHP

I recently built a form containing an editable table within it, as shown below: <form action="file.php" id="myform" method="POST"> <input name="inp"> <div class="divclass"> <table id="mytable" name="mytable"> ...

phpjqueryhtmlformshtml-table

Basic adaptable menu for easy navigation

I have designed a custom menu in HTML: <div class="trigger" style="display:none;">menu</div> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a& ...

jquerycss

Question marks instead of font-awesome symbols

Currently, I am utilizing font-awesome (sass version - Link) on my asp.net website. The issue I am facing is that all fonts are showing up as ? I have thoroughly checked the font path and the CSS class, but everything appears to be correct Below is the ...

cssasp.netsassfont-awesome

When using ContentEditable in Firefox, it generates double line breaks instead of a single one

Noticed an interesting issue with div contenteditable where Firefox is interpreting 1 newline as 2 newlines. Is this a bug or am I overlooking something? Test it out in the example below by typing: Hello World within the contenteditable. When accessi ...

htmlfirefoxcontenteditable

(Angular) Employing *ngFor directive for populating a table

I am in need of a table structure that resembles the following: https://i.sstatic.net/rB2C6.png To achieve this, I am utilizing a basic Bootstrap table along with Angular's *ngFor. Each cell in the table should display a different name from an array ...

angularhtmlbootstrap-4

What is the reason why boolean attributes dont actually have a boolean value in HTML?

It's interesting that certain elements have boolean attributes. I find it curious why the values are not true/false or 1/0. Is there a specific reason for this design choice? <option selected="selected">Ham Burger</option> or <input ...

html

The CSS transition effect is smooth when the accordion opens, but it does not have the same effect when

Currently, I am creating an accordion component that is supposed to have a smooth transition effect when opened and closed. However, while the transition works smoothly when the accordion opens, it seems to have some issues when it comes to closing. I hav ...

javascriptcssreactjs

Incorporating vertical-align:middle into complex divs

I am faced with the challenge of aligning three divs which contain different lengths of text vertically. After experimenting with the following code: #container{ height:200px; vertical-align:middle; display:table-cell; } #content{ height: ...

csshtmlcss-positionvertical-alignment

What is the best way to connect a fresh post to a different URL in ReactJS and Redux?

Currently, I am working with Redux and ReactJS to develop a discussion platform. One of the key features I am trying to implement is where users can input the title and content of their post, which will then be submitted to create a new post. After submit ...

javascripthtmlurlreactjsredux

Is there a way to make a div stay fixed at the bottom of the screen while allowing the middle content to scroll?

I am seeking a way to create a sticky footer that remains visible and anchored at the bottom of the screen, while allowing the middle content to scroll as new content is added. The method I have implemented for achieving this effect is as follows: /* Re ...

htmlcss

Is there a way to style CSS Content to appear both italicized and bold?

As I work on my project, I am aiming to style the CSS content class in both italic and bold formats. Take a look at the code snippet below. div::before { content: "text"; color:black; } <div></div> My goal is to achieve this exclu ...

css

Using PHP to send fully formatted HTML emails

How can I use PHP mail function to send an email, but ensure that my HTML content is displayed correctly instead of being sent as plain text? Below is the code that I am currently using: $from = '<a href="/cdn-cgi/l/email-protection" class="__ ...

phphtmlemail

How can I remove the excess space from a column in Bootstrap 4?

I am facing an issue with excessive space in my navigation bar. I will provide the code below in hopes that someone can assist me in removing the extra space in my "col" elements. My goal is to have them positioned closer to one another. The biggest challe ...

htmlcssbootstrap-4

Issue with using variables in nodejs, express, and EJS: Undefined

Having some trouble with EJS here. I am using response.render('agent.html', {name: 'aaaa'});, and in my HTML script, I attempt to access <%= this.name %>. Unfortunately, I keep getting a ReferenceError: aaaa is not defined. Any su ...

htmlnode.jsexpressejs