Background Pattern individual to pages

Hi there!

My site and page that I am trying to fix in particular is;

I would like to implement a background pattern similar to the following;

I have tried entering the following as a test in the CSS page settings in WP Builder (just to get the colour working at least);
body {background-color: #92a8d1 !important;}

It has not worked, if you have any alternatives I appreciate the assistance.


Hi there,

Thanks for writing around! Try adding the following code in the Theme Options > CSS:

.page-id-1472 .site {
    background-color: #92a8d1 !important;

To find individual page IDs, please see

Hope this helps!

Hi Nabeel!

That works really well thankyou :slight_smile:

Next question that I have is how can I overlay a pattern ontop of the background colour?

^^this is the pattern that I would like to use for the overlay.

Thank you very much :slight_smile:

Hi There,

Please update the previous CSS to this:

.page-id-1472 .site {
    background: #92a8d1 url(

Let us know how it goes!

Hey Thai!

Looking great, works perfectly. I do have one last request - how can I add a gradient colour to the background whilst still having the pattern overlay?

I have used to following CSS in the past to add the gradient, but it doesn’t seem to work in conjunction with the pattern;

.page-id-1472 .site {
background: #b70000;
background: linear-gradient(45deg, #b70000, #ff4000);

thanks in advance!

Hello There,

For best results, please make use of the css background generator:

Hope this helps.

Hi RueNel,

The issue was not about creating the gradient, but rather how to overlay the pattern on top of the gradient background.

Can you please assist with this?

Hello There,

Since you are using this code to insert a background image:

.page-id-1472 .site {
    background: #92a8d1 url(

You can add an overlay by using this code as an example:

.page-id-1472 .site:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(183, 0, 0, 0.5);
    background: linear-gradient(45deg, rgba(183, 0, 0, 0.5), rgba(255, 64, 0, 0.5));

Please take note that I am using RGBA so that I can have 0.5 alpha transparency. Having a solid color will only display the color and the image behind will not be visible.

You can use the hex to rgba converter:

Hope this make sense.

Hi RueNel!

I didn’t quite understand what code to use. Can you please provide an example that I can simply add to the CSS?


Hi @thurlowjp,

The code above is the example code that you will use for you to add an overlay to your background.

Let us know how it goes.


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.