Coloured background section (text area or colour section)

Thank you Andy for your great help but I still need the large image fixed as the main background of the website. Then I need the “shadow” area for the contents in white with a small transparency. The content area will vary from page to page.

Can you please confirm if the code provided is exactly what I am looking for?

Many thanks.

Hi Yigit,

Please check the link below in private. All I need is to have a white background behind the text.

Thank you

Thank you Yigit :)

It worked, however, how can I add some transparency to the white background so we can see a bit of the image background?

In addition, I will need the white background in all pages. Is there a way to add this “css rule” into all pages? Or do I need to add them individually on each page-id?

Many thanks

Thank you Yigit, however I wasn’t able to add the latest code.

I added “homeID” as the unique ID under the section ID and then added the code in the Quick CSS area:

#homeID .post-entry {
    background-color: rgba(255,255,255,0.5);
    padding: 20px;
}

It didn’t work, and I suppose I am doing something wrong.

In addition to the above, can you please confirm if:
1) Can I use HEX colours such as FFFFFF instead of 255,255,255? It will save me a lot of time in some sections where we have specific colours
2) Instead of adding one code line for each post entry ID, is there a way I can just add the IDs on the same css code? For example:
#id1 #id2 #id3 .post-entry { ...

Thank you once again.

Hi Andy,

Thank you for your help.

I decided to add the code as suggested by Yigit and it works fine, by using the “.page-id-36 .post-entry” as I can not seem to have “#your-unique-id .post-entry” working properly.

I am also clarified about the RGB vs HEX colour codes and the opacity value.

I am going to try a few other changes and I will get back to you if I need any further help on this issue.

Many thanks.

Hi,

I’m glad you kept this topic open.

I played around with the padding to decrease the background size but it just decreases the top / bottom of the box. How to decrease the side gaps as well?

Thank you