Nested div elements maintain background-image continuity

Is it possible to maintain the background image of the body within a child div that has a red background color with opacity?

* {
  box-sizing: border-box;
}

body {
  background-image: url('https://d6scj24zvfbbo.cloudfront.net/306f4bc782c04bbe4939f8c174349ca3/200000014-608bd61835/27122266-blood-wallpapers.jpg?ph=697a238450');
  color: white;
}

.lvl2 {
  margin: 30px 8px;
  padding: 15px;
  background-color: #99000090;
}

.lvl3 {
  margin: 0;
  padding: 10px;
  background-color: #FFFFFF;
}

#img-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

#image {
  width: 900px;
}
<main id='main'>
  <div class='lvl2'>
    <h1 class='center' id='Sukuna'>Ryomen Sukuna</h1>
    <p class='center'></p>
    <div class='lvl3'>
      <div id="img-div">
        <img src='https://i.pinimg.com/originals/dd/03/04/dd03044d67c493a3514b1fe8f8c42cff.gif' id='image'>

      </div>
    </div>
    <div id='tribute-info'>
      <ul>
        <li>
          <a href=""></a>Main Info</li>
        <li>
          <a href=""></a>Personality</li>
        <li>
          <a href=""></a>Abilities and Powers</li>
      </ul>
      <p>If you wanna know more about him see <a href="https://jujutsu-kaisen.fandom.com/wiki/Sukuna#Jujutsu" target="_blank">this page</a></p>
    </div>
  </div>
</main>
htmlcssbackground-image

Answer №1

It seems like you are looking to create a transparent background for the .lvl3 element, is that correct? Take a look at the snippet below to confirm if this matches your requirements

* {
  box-sizing: border-box;
}

body {
  background-image: url('https://d6scj24zvfbbo.cloudfront.net/306f4bc782c04bbe4939f8c174349ca3/200000014-608bd61835/27122266-blood-wallpapers.jpg?ph=697a238450');
  color: white;
}

.lvl2 {
  margin: 30px 8px;
  padding: 15px;
  background-color: #99000090;
}

.lvl3 {
  margin: 0;
  padding: 10px;
  background-color: transparent;
}

#img-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

#image {
  width: 900px;
}
<main id='main'>
  <div class='lvl2'>
    <h1 class='center' id='Sukuna'>Ryomen Sukuna</h1>
    <p class='center'></p>
    <div class='lvl3'>
      <div id="img-div">
        <img src='https://i.pinimg.com/originals/dd/03/04/dd03044d67c493a3514b1fe8f8c42cff.gif' id='image'>

      </div>
    </div>
    <div id='tribute-info'>
      <ul>
        <li>
          <a href=""></a>Main Info</li>
        <li>
          <a href=""></a>Personality</li>
        <li>
          <a href=""></a>Abilities and Powers</li>
      </ul>
      <p>If you want to learn more about him, visit <a href="https://jujutsu-kaisen.fandom.com/wiki/Sukuna#Jujutsu" target="_blank">this page</a></p>
    </div>
  </div>
</main>

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

Python's Selenium encountering a NoSuchElementException with the error message "./ancestor-or-self::form"

Trying to create a Python script that allows me to input my credentials and tweet text in the Python console. The script should then log in and post a tweet using Selenium. Everything works fine, except for the final click on the Tweet button which is caus ...

javascriptpythonhtmlseleniumtwitter

The div element's width does not match the width of the textbox

I attempted to implement the following code in HTML. However, I am puzzled as to why the text box and div width are not the same size. Here is what I have experimented with. <style> .test { border:1px solid red;width:100px;height:30px;padding:3p ...

htmlcss

The conditional ng-class styling will be applied to each and every div on the page

For a patient, I have a modal displaying a list of card numbers. If the card is set as the default card, it should have a grey background, based on a true value for the object. <td ng-repeat="obj in paymentAndShipping"> <div ng-click= ...

cssangularjs

There seems to be an issue with the functionality of the JavaScript Quiz as it is

While working on my JS quiz, I encountered an issue where some answers were not displaying due to quotes and the need to escape HTML characters. Additionally, I am facing difficulty in accurately awarding points or deductions based on user responses. Curre ...

javascripthtmlcss

Z-index creates an obstacle that prevents items from being clicked on

I am facing an issue with my container div that has an inset drop shadow applied to it. Inside this container, I have child elements and I want these children to be clickable. For the drop shadow to show, it is necessary to set the z-index of the child el ...

jquerycssz-indexdropshadow

Adjust the font size to fit within the container

My webpage features a bootstrap 4 container with three columns that adjust on screen sizes above the md breakpoint (col-md-4). Each column contains an img with the class img-fluid, and when hovered over, text description appears. I want this hover text to ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Tips on making a progress bar with a reverse text color for the "completed" section

I've been tackling this issue for hours, but haven't found a working solution yet. The challenge is to create a progress bar with a dynamic width and a centered label that changes its text color between the progressed and unprogressed parts. Here ...

htmlcss

When the user clicks, position a div directly below another div

Can anyone help me figure out how to center a div underneath another one when a specific div is clicked using programming? I've tried multiple solutions but nothing seems to work. Below is the code snippet that I have written. You can also check out t ...

javascriptjquerycssangularjs

Looking for assistance in reducing the vertical spacing between divs within a grid layout

Currently, I am in the process of developing a fluid grid section to showcase events. To ensure responsiveness on varying screen resolutions, I have incorporated media queries that adjust the size of the div elements accordingly. When all the divs are unif ...

javascriptcssgrid

Having trouble with syntax highlighting on Node.js Vash view files in Visual Studio 2015 Update 3?

While working on a Node.js application using Vash as the view engine in Visual Studio 2015 Update 3, I encountered an issue with syntax highlighting. When writing HTML in the vash files, the code appears as plain text without any syntax highlighting. For e ...

htmlnode.jsvisual-studio-2015vash

The mat-pagination component's mat-select feature is displaying unusual behavior

In a recent project I have created, users need to perform CRUD operations and view the output in a table. Everything is functioning properly, however, there are instances where the "mat-select" within the "mat-paginator" starts behaving strangely. This iss ...

htmlcssangularangular-material

Discover the magic of TransformToggle and slideToggle in Javascript, HTML, and CSS

Working on a website coding project and ran into an issue. Trying to utilize an img as a link to slideToggle content. It's working, but I'd like the img to rotate 90deg on the first click and -90deg on the second one. Any solutions are greatly ap ...

javascripthtmlcsstransform

Issue with Ajax calendar extender not displaying full calendar due to being cut off

I've implemented the Ajax calendar extender with my own custom CSS classes. The styles are being applied correctly, but I'm encountering an issue. When the calendar at the bottom of the page opens, it gets cut off at the bottom due to the restric ...

asp.netcssajaxcontroltoolkit

Is there a possible method to obtain a smartphone number from a website?

Seeking a solution to retrieve the phone number of a device using HTML 5, JavaScript, or similar technology. Recently, I successfully obtained the coordinates of the device by incorporating the following JavaScript code: <!DOCTYPE html> <html> ...

javascriptandroidhtml

Bottom-aligned footer that remains in place instead of sticking to the page

I am attempting to position a footer at the bottom of the page, without it being sticky. Instead, I want it to remain at the bottom in case the user scrolls down there. Although it technically "works," there appears to be some white space below the footer ...

htmlcss

Add drop caps to every individual word within a hyperlink

Is there a way to recreate the menu effect similar to using CSS fonts and drop caps for each word? I'm aware of the CSS code: p.introduction:first-letter { font-size : 300%; } that enlarges the first character of the first word, but I want this ef ...

javascripthtmlcsscapitalization

The rendering of the input dropdown control in Angular JS is experiencing difficulties

I am currently using your Angular JS Input Dropdown control, and I have followed the code example provided on your demo page in order to implement the control on a specific page of my website built with PHP Laravel. However, I have encountered an issue dur ...

javascriptjqueryhtmlangularjslaravel

Displaying the Price of a Product in a Different Location on Your Wordpress Site

I am attempting to display the price of a product within a post using HTML code. My goal is to use $product->get_price(). However, I need a way to specify which product to call by identifying it with its code or something similar. In essence, all I am ...

phphtmlwordpress

Changing the entire content of a webpage from the server using AJAX

I am looking to update the entire page content with the click of a button, transitioning from Words.html to SelectNumber.html This snippet is from Words.html <html> <head> <meta charset="UTF-8"> <title>Number Game< ...

javascripthtmljquerycssajax

Locate the nearest span element and update its CSS class

On my page, there is a section with the following code: <h5 class="text-center" id="findStore" style="width:260px"> <a data-toggle="collapse" data-parent="#accordion" href="#@item.ProductId" aria-expanded="true" aria-controls="@item.ProductId ...

javascriptjqueryhtmlcss