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

This topic has 5 replies, 2 voices, and was last updated 4 years, 5 months ago by Elvin.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 12, 2021 at 6:50 pm #1961601
Sibi Paul
Hi…

Currently, this is my Custom CSS.
```
.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%); 
}
```
I wish to show a background Pattern, such as

https://library.generateblocks.com/wp-content/uploads/2020/11/sharon-mccutcheon-NkQD-RHhbvY-unsplash.jpg

How can I show this kind of pattern while using custom CSS in the hero section?
October 12, 2021 at 7:08 pm #1961612

Elvin
Staff
Customer Support

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

October 12, 2021 at 8:15 pm #1961636
Sibi Paul
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…?
October 12, 2021 at 8:30 pm #1961641
Elvin
Staff
Customer Support
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;
}
```
October 12, 2021 at 9:00 pm #1961651
Sibi Paul
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…
October 12, 2021 at 10:59 pm #1961696

Elvin
Staff
Customer Support

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.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

[Support request] How to show background pattern while using Custom CSS for Hero section?

Popular Articles

[Support request] How to show background pattern while using Custom CSS for Hero section?

Popular Articles

Start building better websites today.