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

Using jQuery to create a nested table

I have a table that I would like to customize so that when a user clicks on a row, only the child table under that specific row is visible while the child tables under other rows are hidden. How can I achieve this using jQuery? <table class="mainTabl ...

jqueryhtmlhtml-table

Having Trouble with Cascading Style Sheets (CSS) for Docked Menu

Click here for the code snippet It seems like everything should be functioning correctly... right? The CSS provided in the sample is pretty straightforward: command,a {float:left;border:1px solid blue;} And the HTML code is just as simple: <menu> ...

htmlcss

Determined margin value to replicate the maximum and minimum margin in CSS styling

When attempting to set the margin on an object to 20% with a maximum margin of 200px, I experimented with various methods: margin-left: calc(min(200px, 20%)); and max-margin-left: 200px However, neither property proved to be valid. Is there an alterna ...

css

Mozilla browser experiencing issues with mouse move event functionality

Here, I have a background image on the body and with the following script, when the user moves the mouse, the image in the background also moves. body { background-image: url('../images/1.png'); background-size: 98%; background-posi ...

javascriptjqueryhtmlcss

The dynamic loading of scripts in Nuxt is causing issues with changing route casings

One of the challenges I faced was creating a vue component to dynamically load scripts for ads and ensure they are removed and reloaded when the route changes. The issue arises when navigating back to the same page after leaving, as the ads stop appearing. ...

javascripthtmlvue.jsvue-componentnuxt.js

Unable to achieve separation of borders within dash_table.DataTable styling using CSS by setting border-collapse: separate; considering using border-spacing instead

Is there a way to create space between the lines of a table in dash_table.DataTable using css or regular style capabilities? I have tried using border-collapse and border-spacing but it doesn't seem to be working. How can I achieve this desired spacin ...

htmlcssdatatableborderplotly-dash

Tips for stopping the navigator from adding content to an HTML input in an Angular application

I am facing an issue with two input fields in my Angular project. These fields are supposed to take values automatically from the browser, and I have tried using the HTML autocomplete option without success. Here is a snippet of my HTML code: <div clas ...

htmlangular

What is the best way to convert HTML into a format where the nesting implied by header levels is made clear and explicit?

Every time I attempt web scraping, I encounter a recurring issue in different forms that I can't seem to overcome. Essentially, the problem lies in the structure of HTML which has a somewhat flat organization with implicit nesting. My goal is to make ...

pythonhtmljsonbeautifulsoup

Guide on how to refresh the background image using the identical URL within a directive

I am looking to refresh the background image of a div using the same URL within a directive. Upon loading my view, I utilized this directive to display the image as a background for the div. app.directive('backImg', function () { var dir ...

cssangularjsangularjs-directive

Styling with CSS 3: Adding Shadows and Rounded Edges

Encountered an intriguing discovery and I'm hoping you can shed some light on it. Here's the code in question: width:940px; margin:0 auto; padding:13px 29px 39px 31px; background:#fff; -webkit-border-radius:10px; -moz-border-radius:1 ...

css

The selected jquery script is failing to function as intended

I'm currently implementing jQuery chosen in a select element to enhance user experience, however I'm facing an issue when attempting to copy the chosen div to another div using jQuery $(document).ready(function() { $(".chosen").chosen({}); ...

javascriptjqueryhtmlcssjquery-chosen

The issue of React hover style malfunctioning in conjunction with Radium and Material-UI

I am currently utilizing the Radium library for inline styling in my React project. I have encountered an issue where the styling does not apply properly to Material-UI components, specifically when hovering over a Paper element. The color should change ...

cssreactjsreact-reduxmaterial-uiradium

Maintain the alignment of content in the center while expanding background images

I am looking to create a website with a split background effect, similar to the design on this site . I want to maintain a content container width of 980px while achieving this look. I attempted to accomplish this by adding height and background color pro ...

htmlcssbackground-color

"JQuery's selector is failing to locate elements once they have been loaded through an

I am facing an issue where jQuery selectors are not working on elements loaded from the server via Ajax requests, but they work fine in normal mode. $('#myid').change(function(){ alert('OK!'); }); <select id="myid"> <optio ...

javascriptjqueryhtmlajax

Ways to shut down a pop-up

Can someone assist me with how to close the bio-info popup and implement it in the code provided below? The HTML file: <ul class="ch-grid"> <li> <div class="bioinfo"> <h2>tooltips</h2> /div> The CSS file: .bioinfo { ...

jqueryhtmlcss

Experience interactive video playback by seamlessly transitioning a webpage video into a pop-up when clicking on an

I want to have a video play as a pop-up when the user clicks a play button, while also fading out the background of the page. It should be similar to the way it works on this website when you click to watch a video. How can I achieve this? <div class=" ...

javascripthtmlcss

Tips for altering the color of an image using CSS attributes

I am looking to create a male Head component in this design draft and modify the CSS according to the skin prop. I have attempted to use filter and mix-blend-mode properties, but have not found a solution yet. Any guidance on how to achieve this would be ...

cssvue.jsfilterfigmamix-blend-mode

Ways to streamline repetitive CSS rules within media queries

As I work on defining multiple media queries, I realize there is some redundant code within them: @media only screen and (max-width:768px), only screen and (min-width:769px) and (max-width:1040px) { .list__figure { margin-right: 20px; ...

cssmedia-queries

What does it mean when an "Unidentified column in the field list" error occurs?

I've encountered a problem with my HTML+PHP code. Whenever I try to input data into this table within my database, an error message pops up saying "Unknown column 'phone_outlet' in 'field list'"... What should I do? :( I can't ...

phphtmlmysqldatabase

Extract data with Python Selenium

Can someone help me figure out how to extract the value "document sent" from the HTML code below using Python's Selenium library? I've tried the code snippet provided, but it returns None. print(driver.find_element_by_id('errorMessage' ...

pythonhtmlselenium