Problem with showing part of background image inside div - transparent effect part of page (html, css)

user_2447795 0
Viewed 63

I have to do one task in html and CSS and I have a problem with showing background in one div (id of div TRANSPARENT_DIV). It should be looks like a div is transparent (I added image).

It's not so easy because adding 'opacity' to our 'TRANSPARENT_DIV' shows background another div.

If you have any idea how to solve this problem I would be grateful.

<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-image: url("https://i.redd.it/zrkwrcj7tbv31.jpg");
            background-repeat: no-repeat;
            background-color: #cccccc;
            background-size: 100% auto;
            font-family: "Roboto-Medium", "Verdana", sans-serif !important;
        }
        .page-wrapper {
            margin: 0 60px;
            border: 1px solid blue;
            background-color: white;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">
        TITLE
    </h1>
    
    <div style="background-color: white; height: 40px; width: 100%; text-align: center;">
        <a style="line-height: 40px; margin: 0 55px;" href="#"><span>Link 1</span></a>
        <a style="line-height: 40px; margin: 0 55px;" href="#"><span>Link 2</span></a>
        <a style="line-height: 40px; margin: 0 55px;" href="#"><span>Link 3</span></a>
    </div>
    
    <div style="background-color: white; height: 40px; width: 100%; text-align: center; border: 1px solid black;">
        breadcrumbs here
    </div>
    
    <div class="page-wrapper">
        <div style="margin: 40px; border: 1px solid black;">
            <div id="TRANSPARENT_DIV" style="height: 250px;"> <h3> Here should visible part of image from background. </h3> </div>
        </div>        
        
        <div style="margin: 0 40px; border: 1px solid black;">
            Some content
        </div>
    </div>
</body>

Example image how it should looks

Example:

<div id="TRANSPARENT_DIV" style="height: 250px; background-color: rgba(255, 255, 255, 0.0);"> <h3> Here should visible part of image from background. </h3> </div>

It doesn't work because this solution shows parent's background.

Greetings

css html
3 Answers

You can inflate the picture's border.

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-image: url("https://i.redd.it/zrkwrcj7tbv31.jpg");
      background-repeat: no-repeat;
      background-color: #cccccc;
      background-size: 100% auto;
      font-family: "Roboto-Medium", "Verdana", sans-serif !important;
    }
    
    .page-wrapper {
      border: 1px solid black;
      margin: 0 60px;
    }
    
    #TRANSPARENT_DIV {
      height: 250px;
      border: 40px solid white;
      box-shadow: inset 0 0 0 1px black;
    }
  </style>


  <h1 style="text-align: center;">
    TITLE
  </h1>

  <div style="background-color: white; height: 40px; width: 100%; text-align: center;">
    <a style="line-height: 40px; margin: 0 55px;" href="#"><span>Link 1</span></a>
    <a style="line-height: 40px; margin: 0 55px;" href="#"><span>Link 2</span></a>
    <a style="line-height: 40px; margin: 0 55px;" href="#"><span>Link 3</span></a>
  </div>

  <div style="background-color: white; height: 40px; width: 100%; text-align: center; border: 1px solid black;">
    breadcrumbs here
  </div>
  <div class="page-wrapper">
    <div id="TRANSPARENT_DIV">
      <h3> Here should visible part of image from background.</h3>
    </div>
    <div style="background:white">
      <div style="margin: 0 40px;border: 1px solid black">
        Some content
      </div>
    </div>
  </div>

user_133311550

The problem here is that when you go to make the <div id="TRANSPARENT_DIV"> transparent, it actually is going transparent, but you also have the parent <div class=page-wrapper> which has background-color: white, so it looks like it's not working, BUT it is, the background color of the parent div is still there.

You could try to make the background-image of the <div id="TRANSPARENT_DIV"> the bg image of the page and try to re-size it.

user_142028940

You could add this CSS to your required element

body{
 background: linear-gradient(to right, #c0c0aa, #1cefff);
}

.hello{
            padding: 10px;
            width: 100px;
            height: 100px;
            background:rgba(255,255,255,0);
      color:#111;
        }
.buy{
      color:#ddd;
            border: 25px solid #111;
            background: rgb(255,255,255,0.0);
            height: 150px;
            width: 200px;
}
<br><br><center>
    <div class="buy">
      <div class="hello">
              sji
      </div>
    <br>
    <h3>hello</h3>
  <div>

user_142160030
Related