Transparent Image overlay on background image

**GK User** Fri Sep 14, 2012 10:33 am Reply with quote Report this post

Hi

I want to add a 50% transparent small image overlay to the main image background, can you advise how I do this please?

**teitbite** Fri Sep 14, 2012 11:44 am Reply with quote Report this post

Hi

Please show me Your site.

**GK User** Fri Sep 14, 2012 11:57 am Reply with quote Report this post

teitbite wrote:Hi

Please show me Your site.

It's not live yet so cannot show you until next week, I did do this for another website from YooThemes using the following code:

#page-body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("../../images/texture/tv/tv_bg.png");
background-origin: padding-box;
background-position: 50% 0;
background-repeat: repeat;
background-size: auto auto;

But this does not work for this theme.

All it does is put a small transparent image which in this case has a TV distortion effect to it, over the existing background image to save creating a new background image with the overlay already in place, as the background image is a large size, even at low resolution and the the transparent overlay needs to be high quality it makes the background image over 1Mb! so too slow to load.

It is not a major issue if I cant have it I will miss this feature off the website but thought if it was something that I could simply add to the custom.css then I would give it a go.

Many thanks

**teitbite** Fri Sep 14, 2012 12:16 pm Reply with quote Report this post

HI

Yes You can add this simply, but an additional code to /layout/default.php file will be needed. Just after <body> tag You need to add a new layer <div id="page-body"> and close it before </body> with </div>. Than Your code should be working. If not I will need to see it to help more.

**GK User** Fri Sep 14, 2012 3:22 pm Reply with quote Report this post

teitbite wrote:HI

Yes You can add this simply, but an additional code to /layout/default.php file will be needed. Just after <body> tag You need to add a new layer <div id="page-body"> and close it before </body> with </div>. Than Your code should be working. If not I will need to see it to help more.

I tried this but it does not work, I am not sure I added it correctly to the default.php file under layout though, as attached?

Screen Shot 2012-09-14 at 15.21.49.png

**teitbite** Sat Sep 15, 2012 9:41 am Reply with quote Report this post

Hi

No it's wrong. Please check my previous post:

Code: Select all: <div id="page-body">

must be under <body>

and it's closing tag not right after it but at the end of the site, just before </body>

**GK User** Sat Sep 15, 2012 10:09 am Reply with quote Report this post

teitbite wrote:Hi

No it's wrong. Please check my previous post:

Code: Select all
<div id="page-body">

must be under <body>

and it's closing tag not right after it but at the end of the site, just before </body>

I am a little confused, have I placed the '<div id="page-body"> ' in the correct place but just need to add the '</div> to the end of the page as per my attachment?

Or have I done it completely wrong?

Screen Shot 2012-09-15 at 10.08.14.png

Thanks

**teitbite** Sat Sep 15, 2012 10:14 am Reply with quote Report this post

Hi

Yes the </div> should be right as on a screen above, but code from the previous screen should not be:

Code: Select all: <div id="page-body"></div>

but just

Code: Select all: <div id="page-body">

When You will have that please tell me Your websites url.

**GK User** Fri Sep 21, 2012 6:17 pm Reply with quote Report this post

teitbite wrote:Hi

Yes the </div> should be right as on a screen above, but code from the previous screen should not be:

Code: Select all
<div id="page-body"></div>

but just

Code: Select all
<div id="page-body">

When You will have that please tell me Your websites url.

Excellent that works perfect...many thanks

**teitbite** Sat Sep 22, 2012 8:15 am Reply with quote Report this post

Hi

Great

I thought there will be more to it. So I'm glad it's working.