Unable to create transparent div

I am currently working on a test page located at this link.

As you scroll down the page, you will notice that the logo remains fixed in the background while an area I have painted purple scrolls over it. I chose to make this area purple temporarily for visibility.

My goal is to create a partially transparent effect on the purple area so that the background logo shows through as I scroll, resembling a semi-transparent glass. The color I have used is (255, 0, 255, 0.6) and it is defined in the secundario.css styles like so:

body.index #main {
    padding-top: 5em;
    background-color: rgba(255, 0, 255, 0.6);   
}

No matter what I try, I can't seem to achieve the desired transparency on the purple area. It remains opaque.

If anyone has any suggestions or ideas, I would greatly appreciate it. Thank you in advance!

htmlcss

Answer №1

Although you found an alternate solution, if you still have questions, I can clarify the issue you were facing:

The problem lies in having the background image within the banner section, which is a sibling of the main section (thus, even though it may appear so, they do NOT overlap). To display the image properly, you should place it within one of the containers below, such as page-wrapper or directly on the body.

Answer №2

The concept of transparency is effective, as it produces varying color outcomes based on the underlying element's color when using rgba. Experiment by replacing 

background-color: rgba(255,0,255,0.6);
with 
background-color: rgba(255,0,255,0.1);
to observe the changes in appearance.

Answer №3

Consider implementing the following code snippet:

body.index #main {
    opacity: 0.5;
    padding-top: 5em;
    background-color: rgba(255,0,255,0.6);
}

Answer №4

The translucency is effective, however there appears to be no content beneath the purple section (just a void). You have designated the logo background in your page header, but it cuts off where the purple area begins.

It might be beneficial to place the background on the #page-wrapper or a comparable parent element for optimal display.

Answer №6

After some experimentation, I found the solution. The key was to allocate it to a unique id rather than a standard style.

It appears that there may be an issue with the existing #main id; therefore, by establishing a new one, the problem is resolved.

I appreciate all of your help!

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

What is the best way to show hidden content within a masked div, similar to a tooltip?

In an icon-based menu, a grid consists of several <div> elements. Each element is empty with general CSS styling and inline CSS to set the mask effect. The purpose of using images as masks is to allow the icons to be colored in different ways by cha ...

cssmask

The Carousel feature functions properly with 3 or more slides, but malfunctions when there are only 2 slides present

After implementing a minimal carousel, I discovered that it functions perfectly with 3 or more slides. However, as soon as I remove some slides, issues start to arise. Some of the problems I encountered include: The sliding animation is removed on ' ...

javascriptjqueryhtmlcss

Removing unnecessary code from a jQuery script

I have created a page that loads data through AJAX using the jQuery .load function. When loading a new file by clicking on a tab on the bar, I change the selected tab's color to yellow using jQuery. Initially, I tried using the .toggleClass function ...

javascriptjquerycssajax

Interactive Timeline - Adjust color on click

I am having trouble implementing a timeline and changing the color when clicking on different states. Can anyone help me figure out what the issue is or how I can achieve this? I intended to give each state a different color, but sadly, it didn't wor ...

htmlcssangulartypescript

Pass information from JavaScript to PHP without using a form

I am trying to pass data from JavaScript to PHP without using an HTML form. The scenario involves the user clicking on a specific HTML div, sending its ID to a JavaScript file, and then transferring it back to a PHP file. How can I achieve this? Below is ...

javascriptphphtmlajax

apply a border-radius to the top right corner only without affecting the other sides or background

https://i.sstatic.net/9YIiy.jpg I have been working on creating the top right triangle design shown in the image. However, I encountered an issue where applying border radius seems to affect all sides instead of just one as intended. Despite using border- ...

htmlcssborder-box

Click the button to instantly scroll to a particular word with highlighting, and with another click, jump to the next occurrence

In order to achieve the objective, simply click on a button that will search for and scroll to a specific word while highlighting it. The same button can be clicked again to find the next occurrence, and so on. If you need an example of how this works, ch ...

javascripthtmljquery

Change the button icon to something new when you hover over it

Below is the liquid code I am working with: <a href="{{ section.settings.button_link }}" class="btn--rounded"> {% include 'icon-btn--rounded' %} <div class="link-label">{{ section.settings.button_ ...

cssshopifyliquid

calculating the duration between successive PHP form submissions

I am trying to calculate the duration between when a user submits a PHP form and when they submit it again. The form reloads on the same page, essentially refreshing it. Additionally, the user may enter the same data again. I want the timer to start runnin ...

javascriptphppythonhtmljson

The HTML elements on the webpage are showing up incorrectly

When visiting thedaystaragency.com/home and scrolling down to our services section where the lightbulbs are located, it is apparent that they are misaligned and not functioning properly. I have provided the code that I am currently using, but I had to remo ...

javascripthtmlcsswordpresselementor

What is the reason that the check box does not appear when <Table/> is rendered multiple times?

Utilizing the <Table/> component from http://www.material-ui.com/#/components/table, I am facing an issue where the checkboxes do not appear when rendering multiple instances of <TableRowColumn/>, corresponding to the number of objects in the a ...

javascripthtmlreactjsmaterial-ui

Which protocols can be used in hrefs within the HTMLEditorKit class of Swing?

I am currently using a unique application called AppWorx that allows the input of documentation for scheduled jobs in HTML format. Recently, I have been working on creating on-call documentation that includes a link formatted like this: <a href="tel:+ ...

javahtmlswingprotocolshtmleditorkit

Bootstrap card elements are failing to display properly, deviating from the expected

My Bootstrap cards are displaying strangely. Instead of having a border, white padding, and a white background like the examples I've seen, mine look like plain text without any styling. Here is an image for reference: https://i.stack.imgur.com/9MsP ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-cards

Allowing SVGs to be clickable without disrupting the functionality of YouTube videos

I'm experiencing an issue with the overlapping of the svg and YouTube elements. If you hover your mouse over, just to the right of the svg and click, instead of opening the video, it redirects you back to the previous page. Clicking on the area betw ...

javascriptcsssvg

Using CSS to create a hover effect on a button that shows multiple links

I have a button in my navigation bar that I want to enhance with hover functionality. When a user hovers over the button, I want the text on the button to disappear and reveal three different clickable links inside the button. The actual button itself sh ...

htmlcss

Guide to highlighting a particular letter in a string variable using JavaScript and AngularJS

Looking to highlight specific letters within a string variable. I have the string stored as an AngularJS variable in a table like this: <td>{{variable}}<td> In my JavaScript file, I am passing a variable for Angular that contains the string & ...

javascriptangularjshtml

Encountered an error searching for module 'autoprefixer' while executing the npx tailwindcss init -p command

I am currently working with Vue 3 and attempting to integrate tailwindcss by following this helpful tutorial: https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm I have successfully installed the necessary dependencies using the comman ...

cssvue.jsnpmvuejs3tailwind-css

Seeking to have text spill over into a different container

Novice in CSS seeks advice. I've nailed the layout of the home page for my website with two divs</p> <p><div> <div> <pre class="snippet-code-css lang-css"><code>#desktop-navbar { text-transform: uppercase; ...

htmlcss

The div elements will widen as additional content is inserted

Creating a website for a friend who needs to frequently add images without any coding knowledge. To make it user-friendly, I designed the div to display images horizontally and expand accordingly so he can simply insert more images in the code and upload t ...

htmlcsswidth

Update text displayed on radio button selection using jQuery

Is there a way to change the label text on a selected radio button from "Set default" to just "default" using jQuery? I think I need to use the class radio-default as the selector, but I'm not very familiar with jQuery. <div class="radio-default ...

javascriptjqueryhtml