Gradient background and layer layer above image

[Deak]

Hello There,

could you please guide how to isnsert custom css gradient background? I have created a text and where need to be insert the css code to change only this rsection’s background? Is there any way to put gradient layer above the image? Please decribe it circumstionally beacuse I need to learn how to do it.

many thanks

gabor

[basanta]

Hi There,

Thanks for writing in!

Please give a class name (gradientbg) to the section or the column where you have the image background.

Add this CSS to your x/pro ->theme option -> Global CSS

.gradientbg {
 position: relative;
}
.gradientbg:after {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
/*add your gradient BG code here too */
}

Please add your gradient BG code in place of the comment.

Hope this helps!

[Deak]

Hy There,

very nice it is working properly.
Where I could set the page bacground’s color? Not in the both sides, i wanted to modify the white area in the middle.
One more thing, When I put a gap, it will be patterned. How make it transparent?

thanks a lot

Gabor

[Prasant]

Hello Gabor,

Thanks for updating the thread.

1. Background Color: If you wish to change the background color as shown in screenshot (https://cloudup.com/c0k77ZCdVZO), you will have to make the changes in section background color. You can do that from Sections > Setup > Background. https://cloudup.com/cQPw_mwkbAZ
2. Gap Patterned: The pattern you are seeing for the gap element is only in builder. It helps you to distinctly spot that it’s a gap element. Those patterns you won’t see on the live page. In case I am missing something, please elaborate the question and I will he happy to assist you further.

Thanks.

[Deak]

Hello,

I mean the white sides. This color isn’t come in the sections.
http://www.colorflow.hu/wp-content/uploads/2018/05/Screenshot-2018-5-17-elsofestes.png

Thanks.

Gabor

[Prasant]

Hello Gabor,

Thanks for updating the thread.

Actually I checked the website URL that’s attached with your licence and over there only home page can be seen. To change the background color, please try out following CSS under X > Theme Options > CSS:

body .entry-wrap {
    background-color: #ddd;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.