Background Image(s) z-index or order

Posted in: Newspaper
Post count: 97

Hello,

Where can I change the z-index value for the background image. I have placed some background advert tags on the site but the background image displays over them. I can set display none for the background image then I can see the banner adverts via the tags BUT, I cannot have the image behind the tags.

If you can please help!

Example page is this: http://www.thesouthafrican.com/wine-south-africa/

But, it’s geo targeted adverts so you might not see the advert we will set it to ALL countries now but will take a bit.

So only thing I need help with, where/how do I set the background image to always be behind everything.

Thank you!

Post count: 7909

Hi,

The ads are not visible so I could not inspect this. You can try to add add a z-index value for your ads and see if it works. The background is added to the body and it doesn’t have any z-index – http://screencast.com/t/lWCpCUei

Thanks!

Post count: 97

Hello,

I have tried that with no luck. A bit of a manual workaround is doing the job at the moment.

<div class=”backstretch”></div>
That class has a Z-index, css as follows:
.backstretch {
width: 100%;
height: 100%;
position: fixed;
z-index: -99999;
top: 0;
}

Changing the value made no difference so I have set it to display none:
.backstretch {
display: none;
}

I don’t know how to set CSS based on category and a post being in the category but at least when we have a background advert I can set an image for it so the site displays boxed and the display:none hides the image and advert is visible.

It’s working on this page: http://www.thesouthafrican.com/lifestyle/

Would also be good to be able to just have the background behind the advert tag but have no idea why it’s not working as it has no z-index.

thank you for your response

Post count: 22421

Hi,
you can target a specific category or post using the post id or category id. you can use your browser inspector to find it on the body tag: http://screencast.com/t/nlFLTchqbRyv the same applies to categories http://screencast.com/t/6WRac6CUk

you can then use it as a class at the beggining of your css code like so:

.category-10243 .backstretch {
width: 100%;
height: 100%;
position: fixed;
z-index: -99999;
top: 0;
}
now the code will only apply to that particular category.
I hope this helps
Thanks.

Post count: 97

Hi Bogdan,

Thank you for the response.

The problem is it’s not just the category.

As example it will be the NEWS category and ALL posts in that category. If it was just the one category or post it would have been possible with your solution.

How do I target css to apply to a category and all posts within that category?

Thank you in advance

Regards

JC

Post count: 22421

Hello,
Please try to provide more details because we are scratching our heads here and cannot figure out what it is you are trying to accomplish. You used the theme background and then hidden it with display none. Then you applied background-colors and they are not appearing as well because you set another background image over them. The theme works with either an image or a color. Setting both of them is redundant.
The way to go about a background click ad is by using a background image on a particular category and then placing an URL in the background click ad section here: http://screencast.com/t/beWzRKcHH
https://forum.tagdiv.com/background-ad/
Please be more explicit so we can have an idea on how to help you.
Thanks.

Post count: 97

Hello,

We use a advert tags for background adverts from an advert network.

So, the problem is the theme does not appear in BOXED unless an background image is set.

So if a background advert is set to run via the JS tag then currently I have to:

1. set the advert tag to display via advert manager (not the site, it’s on ad manager account with Adclick similar to Doubleclick for Publisher by Google)
2. set a background image in the theme (this is so that it displays boxed)
3. set a background colour (this is for IF the tag, via geo targeting is not displaying for the customer)
4. set .backstretch to display:none;

My it’s number 4 my questions is related to…

How to set the below to run on for a specific category and posts within that category:

.backstretch {display:none;}

Not for the entire site, just that category and posts within that category.

Post count: 22421

Hello,
Unfortunately you cannot do that with css. You will have to edit the core files and add a condition to the background render file: http://screencast.com/t/O3HUULQhly2
You will use this function: https://codex.wordpress.org/Function_Reference/in_category
code:
if (in_category(array(101))) {
$this->background_parameters = $background_parameters;
}

The number you see in the code is the category id. you can use multiple category id’s here separated by comma like so: 8,10,12,102,… etc. So the background image will only be visible in that particular category.
I hope this helps.
Thanks.

Post count: 97

Hi Bogdan,

That’s awesome thank you!

I can find the category ID, just one question, how do I apply css to that category or categories only?

All I then need to do is add .backstretch {display:none;} css to the specified category. Then, the image won’t display but the theme will be boxed and background advert will run perfect.

Thank you in advance!

PS: buying another licence today have another site going up, number 3 for me with your theme

Post count: 22421

Hello,
You can get the category id from here: http://screencast.com/t/wsKCiLU7Ves
You can target a specific category by it’s unique class. Use the browser inspector to get it: http://screencast.com/t/Y8DyIKawl8 it is a class on the body tag. You can then use your code like so:
.category-96 .backstretch {display:none;} and it will only apply to that particular category.
Thank you!

Post count: 97

OK but this is what I was referring to at the beginning. That will target as example category “96, but not the posts within it, only the category.

Post count: 22421

Hi,
Unfortunately yes, css does not work like that.(I quote myself:’Unfortunately you cannot do that with css’) You can use the method i provided above with the php files or you can use another method. We looked into this a bit further and found that you can add multiple background click ads like so: http://screencast.com/t/bcwMJ3S7
You can add id’s like the example I showed you above and add the links directly in the code.
I hope this helps and please understand that custom work is not part of support. For any further assistance in this regard you will need to hire a freelancer to help you out as time does not allow us to provide custom work.
Thank you.

Post count: 97

I don’t think we are on the same page.

Background image is to get the site boxed. Your theme is going on to a second media site in a month and if I don’t solve it have to use another.

So to repeat myself, background images cannot be used. Why?

Advert tags are used. Why?
Geo targeting, impression control & reporting.

Multiple background click ads = not possible.

For now I have set it global to display:none so it’s fine. No worries there I have solved it and will get someone/contractor to add it in via php/background file as css can be applied or a class via php based on category and the category a post is in. I just don’t think you are understanding what I am requesting.

Thanks for you time, I do honestly appreciate it 😉

Post count: 22421

Hello,

Unfortunately we are not understanding exactly what it is you wish to accomplish so let’s start from scratch.
You do not need to place a background image to get the site boxed. A background color already does that. Even a white color set in the theme panel will make the website boxed.
I do not understand how background images cannot be used. You can set a site-wide background image or a category background image that will apply for all posts in the category.
The theme does not have an option to use multiple background click ads but i provided the solution above to do it: http://screencast.com/t/bcwMJ3S7
This is what we understand you want to do: you want to use multiple background click ads on different categories, so every category has a different background image and a different click ad. This can be accomplished with the methods provided above.
If this is not what you requested, then you will have to be more specific.

Thank you and sorry if there are misunderstandings.

Post count: 97

Hi Bogdan,

We are getting closer 😉

Ok, so the colour to get it boxed thanks, that is going to help then I don’t have to set an image.

Think of it this way, having ADSENSE as a background, so ADSENSE has advert tags and one for a background advert “takeover” as they call it. I need to have that as a background but selectively.

For now I am fine, I have hard coded the adsense (similar) tags in and set the categories where they need to display with a background image and the images are set to not display so they are not visible over the adverts.

If you look on this page, the background you see is an ADSENSE advert tag, the HEADER banner is it’s own advert adsense tag.

http://www.thesouthafrican.com/wine-south-africa/

I guess what would save time is to explain it this way…

Instead of just having image option for background, have adsense or your own JS/html insert option global and then also per category. Hope this explains it 😉

Post count: 22421

Hello,

I see you solved your issue and found a workaround for it. Unfortunately the background click ad was not designed to work with adsense. I will add this to our list of updates and in a future update maybe we will be able to improve our ad system. Thank you for your feedback and let us know if there is something we can help with if we can.

Thanks.

Post count: 97

Thanks Borgdan,

To list the features one would need

– Set global advert tag (like adsense) for background by virtue of YES/NO option then area to insert JS/html
– Set global fallback background colour and/or image (this is in case there is no banner displaying)

ON CATEGORY LEVEL

– Set advert tag for category and posts in that category by virtue of YES/NO option then area to insert JS/html
– Set category fallback background colour and/or image (this is in case there is no banner displaying)

By having this either globally it can be enabled or only per category.

The site I have on now uses Adtech by it’s part of Google’s DOUBLECLICK FOR PUBLSIHERS DFP, same as adsense but publishers manages it themselves and all of them require this so going to have to do the workaround for all of them.

Thank you for considering this for the update and all your support.

Regards

JC

Viewing 17 posts - 1 through 17 (of 17 total)
You must be logged in to reply to this topic.