Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not working now. Any assistance would be greatly appreciated.

    <section>
        <h1 style="margin-left: 10%;">Blah, blah</h1>
        <img src="_images/some.jpg" style="margin-left: 10%; width: 60%;" >
        <section style="margin-left: 45%; margin-top: -35%; background-color: #FFF; padding: 1em; width: 20%;">
            <p style="font-size: 2em; margin-top: -5%;">More blah, blah.</p>
            <p style="font-size: 1.2em; ">Even more blah, blah.</p>
        </section>
    </section>
htmlcssbackground-color

Answer №1

Adjust the position of the inner section element to relative.

<section>
        <h1 style="margin-left: 10%;">Some text here</h1>
        <img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" style="margin-left: 10%; width: 60%;" >
        <section style="position: relative; margin-left: 45%; margin-top: -35%; background-color: #FFF; padding: 1em; width: 20%;">
            <p style="font-size: 2em; margin-top: -5%;">Additional text content.</p>
            <p style="font-size: 1.2em; ">More additional text.</p>
        </section>
    </section>

Answer №2

rather than

background-color: #FFF;

opt for this

background-color: rgba(0,0,0,0);

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

Is it possible to direct the user to a particular link upon swiping to unlock?

Hello everyone, I could use some assistance with this code. I am looking to redirect someone to a specific page when they swipe to unlock and automatically transfer them to another page when the swipe ends. Any help is greatly appreciated. Thank you! $ ...

javascripthtmlcss

What is the best way to distinguish a particular item in a <select> element and include a delete button for each row using jQuery?

1.) I've set up a nested table and now I want to ensure that when the 'Delete' button within the child table is clicked, its corresponding row gets deleted. 2.) I have a <select> tag. The issue is how can I implement validation to che ...

javascriptjqueryhtml

Tips on connecting a font directory from FontAwesome

I am currently attempting to incorporate the fonts provided by FontAwesome for their icons, and they specify that a root folder named Fonts is needed. My attempt to link it was using: <link type="text/css" href="/myPath/font" /> ...

htmlcssfrontendfont-awesome

relocating the input field underneath the button

I need help figuring out how to arrange this. Here's an example link: http://jsfiddle.net/VBS4E/25/ Is there a way to position the input field directly below the button? Like this: ________ __________ __________ | Btn#1 | | Btn#2 | | Btn# ...

htmlcss

Bootstrap 5 introduces a new feature where col-sm-6 will take precedence over col-md

When using Bootstrap 5, I encountered an issue where the columns were not sizing evenly in a row. Specifically, on small screens, I wanted them to be exactly size 6. In this case, the columns should have been size 3 for screens larger than md, but they end ...

htmlcssbootstrap-5

The X path and CSS selector for a particular table will vary on every page

Hello, I am new to HTML and currently working on a project that involves scraping data from html tables using RSelenium. I have managed to use the following code successfully: for(i in 1:50){ remDR$navigate(URLs[i]) CPSHList[[i]] <- remDR$getPageSou ...

htmlrseleniumxpath

One-click URL to trigger iPhone/iPad or Android app to open automatically in browser

Is there a specific way to create a link on an HTML page that will open an app on an iPhone, iPad, or Android device if the app is installed? I have found methods for call links and launching apps via iTunes, but is there a standard format for these types ...

androidjqueryiphonehtmlappmobi

javascript alter css property display to either visible or hidden

I am struggling with a CSS id that hides visibility and uses display: none. The issue arises when I want the element to be visible upon clicking a button, but removing the display:none property is causing design problems due to it being an invisible elemen ...

javascripthtmlcss

Intersection Observer API is not compatible with the functionality of the navigation bar

Having trouble with the Intersection Observer API. Attempting to use it to show a nav-bar with a white background fixed to the viewport once it scrolls out of view. Initially tested using console.log('visible') successfully to determine visibili ...

javascriptcssintersection-observer

Having difficulty locating the html sub-elements within a specific element

As someone who is somewhat new to scraping websites with numerous sub-elements, I am seeking the best way to navigate through elements that contain desired data within deeper levels of sub-elements. Let's take a look at an example HTML snippet: <d ...

pythonhtmlseleniumxpath

Grab a parameter from the URL and insert it into an element before smoothly scrolling down to that

On a button, I have a URL that looks like this: www.mywebsite.com/infopage?scrollTo=section-header&#tab3 After clicking the button, it takes me to the URL above and opens up the tab labeled tab3, just as expected. However, I would like it to direct m ...

javascripthtmltypescript

Is the initial carousel element failing to set height to 100% upon loading?

If you take a look here, upon loading the page you will notice a DIV at the top. It is labeled "content" with "content_container" wrapped around it and finally, "page" around that. Clicking the bottom left or right arrows reveals other DIVs with similar ta ...

javascripthtmlcssheightalignment

What is the best way to modify a variable in a nested element using ng-click in the parent element?

Review this code snippet: <section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false"> <div class="page-content sub-content active-section">{{activeSection}} < ...

javascripthtmlangularjs

Show the list in a circular buffer fashion

I am working on a project that involves creating a unique UI element. In Frame #2 of my professionally designed diagram, I envision a list that functions as a ring buffer/rolodex when it exceeds four items. The list would scroll in a loop with the top and ...

javascripthtmlcss

What is the process for reinserting a list item into the nested elements?

Looking for help with manipulating a menu in HTML? I have a menu that I want to modify by removing and adding list items. While I've had success removing items, I'm struggling to properly use the add method. Here's an example of what my menu ...

javascriptjqueryasp.netcss

Stop vertical scrolling in a designated div container

I am dealing with a div that is overflowing, but the horizontal scroll bar is not visible. How can I prevent actual scrolling on the div when the user attempts to scroll using the mouse or arrow keys? Below is the code for this div and a snapshot <!- ...

htmlcss

Use .empty() method to remove all contents from the tbody element after creating a table

Currently, I am working on a project where I am creating a drop-down list to assist users in selecting media and ink for their printers. The goal is to then generate a table displaying the selected results. While I have managed to successfully generate the ...

javascriptjqueryhtmljspdf

Modifying the class of an HTML element using JavaScript

Is it possible to dynamically change the class of an HTML element based on a user's selection with a radio button? I am facing an issue where I receive the following error message: "Error: missing ) after argument list Source File: website Line: 1, C ...

javascripthtmlclass

Guide for changing the background color exclusively in the final row of a dynamically-generated HTML table with PHP

<table width="100%"> <tr> <? $count=0; $i=1; foreach($gallery as $key => $list1) { $count++; ?> <td> <img src='<?echo base ...

phphtmlcss

Innovative solutions for seamless transformation of HTML designs into Silverlight 3.0

One of my challenges with clients is getting them on board with web applications. However, I am eager to try something new and explore the potential of Silverlight 3.0. It would be great to see if I can transform some of these applications into fully funct ...

htmlsilverlightxamlsilverlight-3.0xaml-tools