CODEWITHSUNDEEP
htmlcss
Rooibo Quallity
Rooibo Quallity

Reputation: 45

box-shadow doesn't display on top of a background image

So I'm creating a nav-bar on a parallax-style website and I want a shadow to display on top of the image below the nav bar, but the shadow isn't visible on top of the image but below it. I'll show you what I mean with the images below:

https://i.sstatic.net/GL10W.png

Here you see the shadow and there's no background image...

https://i.sstatic.net/QW6kk.png

... but here you can't, because of the image below the nav bar.

I've already tried z-index, but it isn't working.

Is there a way to make that you can see the shadow?

jsfiddle in the comments

EDIT: Thank you very much to all! You really helped me :)

Upvotes: 1

Views: 1584

Answers (3)

Mr Lister
Mr Lister

Reputation: 46619

Setting the z-index on .section-nav does nothing, because it is not positioned.

So possible solutions are (apart from Jeremy's, which also works):

  • Set the .nav-section to position: relative like the pimg's, which makes its own z-index work.

  • Or set the z-index of .pimg1 and .pimg2 to -1 to make them go behind the nav section.

@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:300,400,600,900');


/* ---------- GLOBAL STYLES ---------- */

* {margin: 0; padding: 0; box-sizing: border-box;}

body {
	height: 100%;
	font-family: 'Libre Franklin', 'Helvetica Neue', helvetica, arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	color: #222;
}

.wrapper {
	width: 72%;
	max-width: 1000px;
	margin: auto;
}

.section {
	padding: 30px 50px;
}

.section-light {
	background-color: #fff;
}

.section-dark {
	background-color: #222;
	color: #fff;
}


/* ---------- NAVIGATION STYLES ---------- */

.section-nav {
	z-index: 99;
	padding: 0;
	border-bottom: 1px solid #767676;
	box-shadow: 0px -20px 300px rgba(0, 0, 0, 1);
}

.section-nav ul {
	display: block;
	height: 72px;
	display: flex;
	align-items: center;
}

.section-nav ul li {
	text-align: left;
	display: inline-block;
	margin-right: 37px;
}

.section-nav ul li a {
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	color: #222;
}

.section-nav ul li a.active {
	color: #767676;
}

.pimg1, .pimg2 {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	z-index: -1;    /* changed */
}

.pimg1 {
	background-image: url('https://i.ibb.co/D9D8mZq/img1.jpg');
	min-height: 100vh;
}

.pimg2 {
	background-image: url('https://i.ibb.co/n6J2pTs/img2.jpg');
	min-height: 100vh;
}
<!DOCTYPE html>
<body>
	
	<div class="pimg1"></div>

	<section class="section section-light section-nav">
		<div class="wrapper">
			<ul>
				<li><a href="/" class="active">Home</a></li>
				<li><a href="blog.html">Blog</a></li>
				<li><a href="projekt.html">Das Projekt</a></li>
				<li><a href="kontakt.html">Kontakt</a></li>
			</ul>
		</div>
	</section>

	<div class="pimg2"></div>

	<section class="section section-light">
		<h2>Section 2</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa aliquid natus, consequuntur quasi dolorum, mollitia corrupti reprehenderit molestiae sequi ipsa quod minima, ullam saepe recusandae commodi nostrum obcaecati adipisci rerum atque omnis labore. Voluptatum quasi laborum ut cupiditate est ea, sequi tempora mollitia repudiandae autem nulla neque tenetur voluptate ducimus laudantium.
		</p>
	</section>

</body>

Upvotes: 4

Eugene Kapustin
Eugene Kapustin

Reputation: 166

You should add this style to .section-nav

position: relative;

Here's the updated style:

.section-nav {
    z-index: 99;
    padding: 0;
    border-bottom: 1px solid #767676;
    box-shadow: 0 0 0.3em #333;
  position: relative;
}

I changed a box-shadow property too so I could see the shadow. Yours one I wasn't able to see well.

and link to fiddle

Upvotes: 0

Jeremy
Jeremy

Reputation: 180

It looks like position: relative; is what's breaking it. Removing that from .pimg1, .pimg2 makes the box shadow show again.

Upvotes: 1

Related Questions