How to show background pattern while using Custom CSS for Hero section?

Hi there,

This image isn't seamless so I don't think you can use this as a repeating pattern. If you're going to use an image, make sure the pattern is seamless meaning if you repeat the image using background-repeat it won't look weird or jarring.

But yeah, the CSS properties you need are mostly background-image: url(); where url();'s value is the path to image file and background-repeat which repeats the background as long as the vertical and horizontal space permits it.

background-repeat works in tandem with background-size - https://www.w3schools.com/cssref/pr_background-repeat.asp

Hi...

I modified my CSS to this...

.site-header {
    background: -webkit-linear-gradient(-30deg,#00004d 0%,#5333ed 49%,#5333ed 100%);
}

.gb-container-09959766.gb-container:after { 
    background-image: -webkit-linear-gradient( 1deg ,#00004d 0%,#5333ed 49%,#5333ed 100%);
	
}

.gb-container-09959766.gb-container:after { 
    background-image: url("https://library.generateblocks.com/wp-content/uploads/2020/11/sharon-mccutcheon-NkQD-RHhbvY-unsplash.jpg");
  background-repeat: repeat-y;
}

Now...

the Blue color is gone... and shows the URL image Only...

Actually I want to show The same blue shade... and show the image as background of the blue shade.

How to do it...?

Apply the gradient as a background-color property and use rgba() color values so you can adjust its opacity.

Example:

.gb-container-09959766.gb-container:after { 
    background: linear-gradient( 1deg , rgba(0,0,77,50%) 0%, rgba(83,51,237,50%) 49%,rgba(83,51,237,50%) 100%), url("https://library.generateblocks.com/wp-content/uploads/2020/11/sharon-mccutcheon-NkQD-RHhbvY-unsplash.jpg");
    background-repeat: repeat-y;
}

Hi...

According to your suggestion

I converted my hex to rgba

and edited the example code then applied it to my CSS

Now my CSS is

.site-header {
    background: -webkit-linear-gradient(-30deg,#00004d 0%,#5333ed 49%,#5333ed 100%);
}

.gb-container-09959766.gb-container:after { 
    background: linear-gradient( 1deg , rgba(0, 0, 77, 1) 0%, rgba(83, 51, 237, 1) 49%, rgba(83, 51, 237, 1) 100%), url("https://library.generateblocks.com/wp-content/uploads/2020/11/sharon-mccutcheon-NkQD-RHhbvY-unsplash.jpg");
    background-repeat: repeat-y;
}

Now...

Look into my home page...

The background image is not visible.

kindly help...

You need to use percentage values on rgba().

Example: instead of using 1 try 1% or 10%. It goes from 0% to 100% where 0% is completely transparent while 100% is completely opaque.