CODEWITHSUNDEEP
cssbackgroundbackground-image
Jorge
Jorge

Reputation: 221

Little squared background pattern with CSS

I am trying to reproduce a NavBar similar to this pattern Below:

enter image description here

Does anyone have an idea how I could apply this little squares pattern using pure CSS? They start with this light blue color at the top and has a smooth gradient to white around 50% of the height.

Thank you so much!

Upvotes: 0

Views: 542

Answers (1)

Vitaly Surkov
Vitaly Surkov

Reputation: 259

It was necessary to add position: relative; for nav. Code below.

Or it was possible to cut out one image with squares and a white indent on the right or on the left of 100% of the height. Set it to nav and specify a property background-repeat: repeat-x;

.container{
  max-width:900px;
  margin:0 auto;
  border:1px solid grey;
  padding:0 20px;
}

nav{
  display:flex;
  justify-content:space-between;
  border:2px solid red;
  position: relative;
}

nav:before{
  background-image:
    linear-gradient(white 50%, transparent 50%),
    linear-gradient(to right, white 50%, #a2cbf4 50%);
  background-size: 5px 5px;
}

.logo{
  height: 40px;
  background-color: pink;
}

.checkered-bg {
  width: 100%;
  height: 100%;
}

.checkered-bg::before, .checkered-bg::after {
  content: "";
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.checkered-bg::before {
  background-image:
    linear-gradient(white 50%, transparent 50%),
    linear-gradient(to right, white 50%, #a2cbf4 50%);
  background-size: 5px 5px;
}

.checkered-bg::after {
  background-image: linear-gradient(transparent, white);
}
<div class="container">
<nav class="checkered-bg">
  <div class="logo">logo</div>
  <div class="menu">menu</div>
</nav>
</div>

Upvotes: 1

Related Questions