Background Pattern individual to pages

Support
#1

Hi there!

My site and page that I am trying to fix in particular is;
https://www.casinoquo.com/software-developers/nolimit-city/

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.

Cheers,

#2

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 https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope this helps!

#3

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?

https://www.casinoquo.com/wp-content/uploads/2018/06/Casino-Pattern.png

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

Thank you very much :slight_smile:

#4

Hi There,

Please update the previous CSS to this:

.page-id-1472 .site {
    background: #92a8d1 url(https://www.casinoquo.com/wp-content/uploads/2018/06/Casino-Pattern.png)
}

Let us know how it goes!

#5

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!

#6

Hello There,

For best results, please make use of the css background generator: https://cssgradient.io/

Hope this helps.

#7

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?

#8

Hello There,

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

.page-id-1472 .site {
    background: #92a8d1 url(https://www.casinoquo.com/wp-content/uploads/2018/06/Casino-Pattern.png)
}

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: http://hex2rgba.devoth.com/

Hope this make sense.

#9

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?

Cheers,

#10

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.

Thanks.

#11

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