Reputation: 675

Can I give an Image in front of navbar but In back of navbar icon and button?

I'm sorry if the title make you confused, but Can we make an Image Background appear in front of navbar background but in back of the navbar icon?

Currently my progress looks like this

You can see that the image successfully appear in front of navbar background but failed to appear behind navbar text or icon, you can see especially where image cover home instead appear behind it.

I fully aware too if navbar have a default z-index: 4 so I set image to have z-index: 5 and home, news, and contact to have z-index: 6 but it still looks like the image I show you

This is My code if you want to try it

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

body {
  margin: 0;
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  z-index: 4;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 0.8em;
  text-align: right;
  z-index: 6
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content::before{
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    height: 600px;
    width: 600px;
    background: url("https://freepngimg.com/thumb/castle/23440-6-fantasy-castle-picture.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
}

.content {
  padding: 16px;
  margin-top: 400px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.
</div>

</body>
</html>

can someone help me to try to solve this? I'm stuck in this problem

Upvotes: 1

Answers (2)

law_81

Reputation: 2430

You can just set z-index:5 to your content div. Content and navbar are children of the same element so you can set the z-index property to define the position around to the z axis.

From Css Tricks

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

body {
  margin: 0;
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  z-index: 4;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 0.8em;
  text-align: right;
  z-index: 6
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content::before{
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    height: 600px;
    width: 600px;
    background: url("https://freepngimg.com/thumb/castle/23440-6-fantasy-castle-picture.png");
    background-repeat: no-repeat;
    background-size: contain;
    
}

.content {
  z-index: 5;
  padding: 16px;
  margin-top: 400px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.
</div>

</body>
</html>

Upvotes: 0

Matan Sanbira

Reputation: 1513

the z-index of the parent is the one that determines the order. the z-index of the children element a is calculated in the context inside the parent. I suggest putting the img as part of the navbar and change to position: absolute so you control the location of the img and can change the z-index layout inside the navbar were the img and the navs share the same parent.

Upvotes: 1

Can I give an Image in front of navbar but In back of navbar icon and button?

Answers (2)

Related Questions