CODEWITHSUNDEEP
htmlcss
Faruuq
Faruuq

Reputation: 117

Adding transparent horizontal line in centre on background image

The transparent line I am looking to achieve is this:

enter image description here

The most closest I have got to it is this using gradient:

enter image description here

The css for gradient is: 

.login {
    background: linear-gradient(transparent 20%, #aaaaaa, transparent 77%),  url("bg-image.jpg");
}

I am only interested in getting the same transparent line. What should I do?

Upvotes: 0

Views: 1336

Answers (3)

phil
phil

Reputation: 456

I believe you are looking for something like this. This uses flexbox to align the white 'line' vertically in the center of the image. The transparent background of the white line is done by simply using rgba color.

The advantage of this method is, that the height of the white line will scale with it's content.

.background-image {
  background: url('https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85740266a52ea733187e9775fdf8d2d5&auto=format&fit=crop&w=1567&q=80') no-repeat center center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.background-image__white-line {
  background:rgba(255,255,255,0.5);
}

.background-image__white-line__content {
  margin: auto;
  max-width: 400px;
  padding: 40px;
}
<div class="background-image">
  <div class="background-image__white-line">
    <div class="background-image__white-line__content">
      Whatever you want
    </div>
  </div>
</div>

Edit Simplified the css code, thanks to Termani Afif!

Upvotes: 0

aMJay
aMJay

Reputation: 2243

Here is example of one possible solution:

.wrap{
  height:350px;
  width:100%;
  background: linear-gradient(red, yellow);
  display:flex;
  flex-flow:column;
  justify-content:center
}

div div{
  background-color:rgba(256,256,256,0.35);
  height:100px;
  width:100%;
}
<div class="wrap">
  <div>
  
  </div>
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274384

You can use linear-gradient as follow:

.box {
  width:400px;
  height:200px;
  background:
  linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) 0 50%/100% 50px no-repeat,
  url(https://lorempixel.com/400/200/);
}
<div class="box">

</div>

Upvotes: 2

Related Questions