CODEWITHSUNDEEP
htmlcss
twentyseen
twentyseen

Reputation: 21

Gradient on background using CSS

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

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!

Upvotes: 0

Views: 97

Answers (2)

Jennift
Jennift

Reputation: 667

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.

Upvotes: 0

Pyry Lahtinen
Pyry Lahtinen

Reputation: 499

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>

Upvotes: 1

Related Questions