Gradient on background using CSS

Question

I want to create something like this for the top section of my one-page website. repeating background image with a gradient

I have figured out how to repeat a background image, but I was wondering if there is a way I can specify opacity for each time the image gets repeated.

This is the CSS code I've used for the section:

section{
    width: 100%;
    float: left;
    height: 100vh;
    background-image: url("img/bgflower.jpg");
    background-repeat: repeat-x;
    background-size: contain;
    
}

Please suggest any methods I can use to achieve the same, thank you!

not that I can think of. But you can put another white layer over the bg image and change the opacity — Jennift
– Jennift, Commented Apr 19, 2021 at 7:57
@Jennift, thank you for the comment! I tried using a linear gradient using rgba to change opacity, but it's too smooth for my liking. Is there a way I can provide checkpoints at which the opacity should change? — twentyseen
– twentyseen, Commented Apr 19, 2021 at 10:33
you need to use 3 different images and change opacity , an easy way would be to do it using sass , so that you can adjust for n number of images and opacity dynamically , if you are looking for somethings like that , then I can write in a sandbox and share the same — Goutham J.M
– Goutham J.M, Commented Apr 19, 2021 at 10:47

Pyry Lahtinen · Accepted Answer · 2021-04-19 17:56:05Z

1

If you want to have true gradient instead of visible opacity regions, you can do something like my code below. Unfortunately this does not really apply opacity to your image and works only with one color (like in your example picture you have white).

#background {
  /* place at the top of your page */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* set background image */
  background: url(https://pyry.info/stackoverflow/flower.png);
  background-repeat: repeat-x;
  background-size: contain;
}

/* create the white gradient */
#gradientLayer {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

<!-- place this below everything else -->
<div id="background">
  <div id="gradientLayer"></div>
</div>

answered Apr 19, 2021 at 17:56

Pyry Lahtinen

5091 gold badge3 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jennift · Accepted Answer · 2021-04-20 12:02:19Z

I'm not sure if the section you made is responsive or if it sits within another container that has a fixed width. With the codes below, a fixed width will render a better result. However, I made something up in codepen to help you move along. https://codepen.io/jennift/pen/qBRJOYd?editors=1100. I've included some comments in the code below:

<section>
    <div class="extended">
        <div class="first">first</div>
        <div class="second">second</div>
        <div class="third">third</div>
        <div class="fourth">4th</div>
    </div>
</section>

section {
    width: 100%;
    height: 100vh;
    background-image: url("https://placeimg.com/200/480/nature");
    background-repeat: repeat-x;
    background-size: contain;
}

/* again I'm not sure if you will use the same image bg. However, if you intend to change, remember to change the aspect ratio here as well so that the white layers on top will lay somewhat nicely aligned with the bg */
:root { 
    --aspectratio: 0.416;  /* divide bg image width with bg image height of bg image > 200 / 480 */
}

.extended { /*this extends the container box so the divs stays in a row instead of breaking into a new line as the screen gets resized to something smaller */
    width:500%;
    height: 100vh;
    overflow:hidden;
}

.first, .second, .third, .fourth {
    background-color: #fff;
    height: 100vh;
    float: left;
    width: calc(100vh * var(--aspectratio)); /*using the aspect ratio, you can then calculate the width of each white section
 }

.first {
    opacity:0;
}

.second {
    opacity: 0.3;
}

.third {
    opacity: 0.6;
}

.fourth {
    opacity: 0.9;
}

With the codes above, if your section gets wider than this, you probably need to put in a fifth div, and probably javascript will be easier solution to auto-create divs as the screen gets wider/smaller. But if your width is fixed, this way works well.

Collectives™ on Stack Overflow

Gradient on background using CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related