css linear-gradient background issue

Question

I'm trying to create a page where there is a linear-gradient background underneath an inset section of the page, which should not show the gradient colors. In the example below, the top section of the inset is behaving as desired, with the color staying in the background. But for some reason the section underneath it is being infiltrated with the background:linear-gradient .

I can't figure out why:

 * { box-sizing: border-box; } body { margin: 0; padding: 0; max-width: 100%; font-family: sans-serif; line-height: 1.5; } .inset-container { background: linear-gradient(orange, black); } .inset { max-width: 80%; margin: auto; } .column-top { /* eliminates the margin at the top of the first column, so all columns have even height */ margin-top: 0; } .columns { column-count: 2; column-gap: 40px; padding-bottom: 20px; padding-right: 80px; } .contents { font-size: 18px; padding-bottom: 40px; padding-top: 20px; padding-right: 30px; padding-left: 50px; } .articleBasic { padding-bottom: 40px; padding-top: 20px; padding-right: 30px; padding-left: 50px; } /* ID formatting */ #contents { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); background-color: white; } #Safety { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); margin-top: 2px; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>gradient test</title> </head> <body> <div class="inset-container"> <div class="inset"> <nav id="contents" class="contents"> <h3>Included in this month's newsletter:</h3> <p><a href="#Safety" class="links">Safety First: Prescription Safety Glasses</a> - Find out who pays that bill in this months Safety First.</p> <p><a href="#Flux" class="links">Flux</a> - Which way to the problem? Splitters messing with your head? Read this Flux tip for clarification.</p> <p><a href="#MDUMaps" class="links">Tool Tip: MDU Maps</a> - Hey, My maps are blank in Divisional Viewer! Well, you're doing it wrong!</p> <p><a href="#XM1" class="links">Tool Tip: XM1 Plant Design Maps</a> - Why does all the cool stuff go to the service department?</p> <p><a href="#Battery" class="links">The Battery Balancer</a> - How much more can we fit in that cabinet?!</p> <p><a href="#DMTicketing" class="links">DM Ticketing</a> - SASQ Watch because Big Bird was taken.</p> <p><a href="#ONX" class="links">Viavi's ONX-630</a> - Initializing…… That's an inside joke! You'll get it later or will you? Just read this for a quick overview of the new meter.</p> <p><a href="#Tales" class="links">Tales From The Field</a> - Hello, Hello, HELLO! It's ok to share with the group! Send us your pics!</p> </nav> <article id="Safety" class="articleBasic"> <h3>Safety First: Prescription Safety Glasses</h3> <div class="columns"> <a href="https://my-benefits.ehr.com/US2/EN/myHealth/Vision/Pages/default.aspx" target="_blank"><img class="safetyimg" src="https://i.imgur.com/qJWZi01.jpg" alt="funny animated dude with big glasses" title="Click me to go to the benefits page!"></a> <p class="column-top">Some of my fellow eyeglass wearers may not be aware that Comcast will pay for you to have your prescription safety glasses fully covered! I recently became aware of this information and wanted to share it with all of you. Per our ComcastNow website, in the Vision Benefits SPD: Davis Vision will cover 100% of the cost, VSP- Safety Vision Glasses (Employee only) Coverage 100% after $20 copay; $75 Frame allowance. This helps us all, with the struggle of trying to wear two sets of glasses in order to see and be OSHA compliant while working in the field. More information can be found at <a href="https://my-benefits.ehr.com/US2/EN/myHealth/Vision/Pages/default.aspx">https://my-benefits.ehr.com/US2/EN/myHealth/Vision/Pages/default.aspx</a> regarding this great benefit. </p> </div> <a href="#contents" class="links">Back to Table of Contents</a> </article> </div> </div> </body> </html>

Answer 1

You're missing the background color property for the #Safety id.

#Safety{
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 margin-top: 2px;
 background-color: white;
}

Answer 2

Just to clarify, are you saying the area with Safety first should have a white background as well? Because you didn't set the white in the CSS.

https://codepen.io/anon/pen/BwVowZ?editors=1100

css linear-gradient background issue

Question

2 answers

solution1
1 ACCPTED 2017-10-11 01:27:00

solution2
0 2017-10-11 01:26:38

css linear-gradient background issue

Question

2 answers

solution1 1 ACCPTED 2017-10-11 01:27:00

solution2 0 2017-10-11 01:26:38

solution1
1 ACCPTED 2017-10-11 01:27:00

solution2
0 2017-10-11 01:26:38