Hi – I’d like to use different background images for each of the different pages of my site. I don’t see any way to specify a header background image from Theme Panel > Header (other than to select the layout of the header area).
What would be the custom CSS to specify a header background image?
My site is https://piracymonitor.org
I searched in the TagDiv / Newsmag support pages but I could not find an answer
Thank you
Best regards,
– Steve
Above, I meant to ask if I can use different background images **in the header** (which would be “behind” the header ad).
PS – Looking at some of the Newsmag demo pages… This layout can also work for me – https://demo.tagdiv.com/newsmag_cars/
How can I see which Newsmag blocks and elements were used in it? Do you have a diagram?
Thanks
Hi,
You can use a css like this one to set a global background image on header -> https://i.imgur.com/Hh9JLEh.png -> https://i.imgur.com/dEQzO54.jpg
.td-header-row {
background-image: url("set your image url from media library")
}
If you want to have a different background on homepage you can use this css
.home .td-header-row {
background-image: url("set your image url from media library")
}
on category page
.category. td-header-row {
background-image: url("set your image url from media library")
}
on articles
.single .td-header-row {
background-image: url("set your image url from media library")
}
You can achieve that block by using tagDiv Composer, edit the page -> https://i.imgur.com/5BROogz.png and add the elements you need -> https://i.imgur.com/vxEmTvt.png -> https://i.imgur.com/Wo74sVq.png => https://i.imgur.com/1coUVEh.jpg
Thank you!
Hi – Thank you for the advice, for changing the background image in the header. It almost works, but not quite.
See screen shot – https://ibb.co/pRvwwQY
See how the image repeats in the top menu, header area, and main menu?
What is the CSS so that the image does NOT appear in all three areas, and only appear in the header area?
This is the CSS that I used, with the URL of the source image.
.td-header-row {background-image: url(“https://piracymonitor.org/wp-content/uploads/2020/02/Babbage-engine-topbar-3-1100×175-1.jpg”)}
Thank you
Hi,
Please provide me a link and I will provide you the necessary css to set the background image only on that section of header.
Thank you!
Hi – Thanks for the support! Which link are you asking for? Here is a link to the home page, which currently has no image in the header.
If that is not what you asked me for, please be more specific.
Also, there is no ad in the header. Only a logo (Theme panel > Header > Logo & Favicon > 272×80 and 544×180)
Hi,
I ask for a link where you have set a background image set on header to help you to achieve this -> https://ibb.co/pRvwwQY
The banner in the header can be set from here -> https://i.imgur.com/SlHREqw.png
Header ads -> https://forum.tagdiv.com/newsmag-header-ads/
Thank you!
Hi – Thanks for the reply. Let’s say that the background image that I want in the header is this image (I may use a different image later).
https://piracymonitor.org/wp-content/uploads/2020/02/site-header-logo-gradient-1100×175-enigma.jpg
The problem is that this header background image also becomes a background image in the top menu and the main menu. This is not my intention. I do not want any images in the menus at all. Only the light-colored menu text against dark menu background.
Because I do not see any way to set (or remove) this image for the menus in the Newsmag Theme Panel, I think this may be an error in Newsmag. If I am wrong, please tell me what to do.
Or, if there is a custom code or CSS to correct this, please provide me with it.
Thanks! PS – I believe that the template is up to date = v4.9.2.
Hi,
Please try this code -> https://i.imgur.com/OIuKtjG.png
.td-header-row.td-header-header {
background-image: url("https://piracymonitor.org/wp-content/uploads/2020/02/site-header-logo-gradient-1100x175-enigma.jpg")
}
If you want to have different header on category, or pages, just add in the class as in above example.
Hope this will help you!
Thank you!
Thank you Calin! As you suggested, I used LiveCSS to embed your code into the page header (using a different image). Works great!
One question: When I go to the Newsmag Theme Panel > Custom Code > Custom CSS, this code is not listed there. Someday I may forget that I have added this custom code to these pages. Is there a place in the Theme Panel where I can get a list?
Or instead of being lazy, I can write some documentation for myself… đ
Thanks
– Steve
Hi – One more question. I have placed a different header background image in each of my pages.
Is there CSS so I can define a background image for all Blog posts?
Thanks
Hi,
Unfortunately the code set in LiveCSS will be display only in LiveCSS, if you want you can move the code in Theme Panel > Custom Code > Custom CSS there will be no difference, but will be more easy to fine the code.
If you are referring to articles/pots then you can use this custom css, set it in Theme Panel > Custom Code > Custom CSS and will be set on all posts.
.single .td-header-row.td-header-header {
background-image: url("https://piracymonitor.org/wp-content/uploads/2020/02/site-header-logo-gradient-1100x175-enigma.jpg")
}
Thank you!
Hi Calin, What is the default width of headers (and pages) in Newsmag? I can’t find any reference in the online documentation.
I have been using images of 1100 x 175 px, but that size seems to be too wide for the theme. I had been using abstract images for this, but now I want to use a sports image and I can’t seem to size it correctly.
Or, what do I say in LiveCSS, to make sure that my images fit to width?
Thank you
Hi,
The width of Newsmag is 1068px width, now you can go for 1116px, but no further.
If you want to use a custom css this will be quit hard, here is a guide for it -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thank you!
