CODEWITHSUNDEEP
htmlcssgradient
user7803674
user7803674

Reputation:

How to make a background gradient

I need help with a webpage I'm webmastering. Here's some code:

<body>
<div class="left">
</div>

And here's the css for it:

.left {
    position: fixed;
    width:50%;
    height: 100vh;
    top:0;
    background-image: url('../img/plakatm.jpg');
    background-size: 1164px,1000px;
    background-position: center;
    background-repeat: no-repeat;
}

The problem is, that i need to make a gradient at the right edge of it. I can't add the gradient to the image, beacause the .left element changes size on smaller monitors and the gradient would not show up. Here you can see the full site (It's in polish but you don't need to understand it) Click here to see it. Thanks.
Adam

Upvotes: 2

Views: 446

Answers (3)

Alireza
Alireza

Reputation: 104890

Use CSS linear-gradient, something like below will work for you, better separate it to a separate into a different class, not call it .left, I call it .gradient in this example:

.left {
  position: fixed;
  width: 50%;
  height: 100vh;
  top: 0;
  background-image: url('http://weknownyourdreamz.com/images/jungle/jungle-04.jpg');
  background-size: 1164px, 1000px;
  background-position: center;
  background-repeat: no-repeat;
}

.left:after {
  position: absolute;
  content: '';
  top: 0;
  height: 100%;
  width: 100%;
  display: block;
  background: white;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background: -o-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background: -moz-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
<body>
  <div class="left">
  </div>
</body>

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

Here is how you can have background gradient.

.left {
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
  height: 100px;
  width: 100px;
}
<div class="left">
</div>

And this is the link where you can find good gradients: https://webgradients.com/

Upvotes: 0

StuntHacks
StuntHacks

Reputation: 447

There is a css-property for gradients. That should help.

Upvotes: 0

Related Questions