Home › Forums › Pro Themes › Blog Diary Pro › Remove or reduce header image.
- This topic has 20 replies, 6 voices, and was last updated 4 years, 2 months ago by wensolutions.
-
AuthorPosts
-
December 28, 2019 at 5:52 pm #112707Nikita WardParticipant
I’m looking to resize or remove outright the large header image that dominates each page in the theme.
Thank you.
December 30, 2019 at 2:21 am #112789wensolutionsKeymasterHello,
As per your query regarding the header image, to hide the header image you can follow the path Appearance > Customize > Header Image and hide the image.
To resize the image you can add the CSS following the path Appearance > Customize > Additional CSS
#header-banner-image { height: 200px; }
You can manage height as per your requirement from above CSS in order to resize.
To remove the header image in the theme, you can add CSS following the path Appearance > Customize > Additional CSS
div#header-banner-image { display: none; }
Hope this helps.
If you have further queries, let us know.
Thank you.
January 24, 2020 at 6:22 pm #114778Simon SelmerParticipantHi
This CSS code manages the background picture behind the title in the top.What I think Nikita asks for, and what I now also need, is how to reduce or remove the picture (which is the same as behind the title), that is behind the breadcrumb. Because of of the box, that picture is very large, so on every page you have to scroll way down to get to the actual content.
January 27, 2020 at 2:26 am #114904wensolutionsKeymasterHello,
To remove the picture that is behind the breadcrumb, you have to add CSS following the path Admin Panel > Appearance > Customize > Additional CSS,
div#page-site-header{ display:none; }
To reduce the picture that is behind the breadcrumb, you have to add CSS following the path Admin Panel > Appearance > Customize > Additional CSS,
#page-site-header { padding: 298px 0; }
You can adjust the picture by padding size.
Hope this helps.
If you have further queries, let us know.
Thank you.
January 27, 2020 at 8:43 am #114944Simon SelmerParticipantHi, thank you.
This
div#page-site-header{
display:none;
}removes the whole breadcumb block, including the headline. Not just the the background picture.
Can you suggest the CSS to just remove the background picture please?
January 28, 2020 at 1:55 am #114983wensolutionsKeymasterHello,
To remove the background image but not the breadcrumb and the title, you can add the CSS following the path Admin Panel > Appearance > Customize > Additional CSS,
.single #page-site-header{ background-image: none !important; background-color: transparent; padding: 0px; } .single .overlay{ background-color: transparent; } .single #page-site-header .page-title{ color: #191e23; } .single .trail-items li a { color: #191e23; } .single .trail-items li{ color: #191e23; } .single .trail-items li:not(:last-child):after{ color: #191e23; } .single .trail-items { margin-bottom: 20px; } .single #content { padding: 25px 0; }
Regards.
January 28, 2020 at 2:13 am #114986Simon SelmerParticipantHi
The code didn’t work at first, but removing the .single in front of them seems to have the correct effect.
Thank you
January 28, 2020 at 2:35 am #114988wensolutionsKeymasterHello,
Glad you found the workaround.
If you have further queries, let us know.
Thank you.
May 8, 2020 at 3:08 am #122773redhouseParticipantI just used this successfully to reduce the image but it does it on every page. Is it possible to reduce on one page and keep large on another. eg Blog page small, contact page large?
Also changing the image, i worked this out by changing featured image but it doesnt work on the blog page. when looking to edit the page is shows the new image but when i look at the published page it still the same image as the header image.
https://managersstudy.com/blog/
thank youMay 8, 2020 at 7:27 am #122791wensolutionsKeymasterHello,
Regarding your query, you can add below given CSS following the path Admin Panel > Appearance > Customize > Additional CSS, to decrease the featured image.
.blog #content #page-site-header { padding: 50px 0; }
Hope this helps.
If you have further queries and if this won’t help you please provide us with the screenshots of specific pages so that we can help you with a precise fix.
Regards.
May 17, 2020 at 9:12 am #123545redhouseParticipantThanks
that worked with size of image but how do I change the image under the header image on the blog page?
thanksMay 18, 2020 at 12:23 am #123578wensolutionsKeymasterHello @redhouse,
The image that is added under the header is the image that comes from the option of customizer “Header image”. The image will be displayed at the top of the page and below it.
Hope this clears the confusion.
Thank you.
August 21, 2020 at 7:01 am #131933bjbundyParticipantHello
Is it possible to keep the title but remove the beadcrumb and the background image on all pages but show it on one certain page?
Thank you in advance
August 21, 2020 at 8:20 am #131950wensolutionsKeymasterHello @BJBUNDY,
Regarding your query, please provide us with the URL of the specific where you want the image and where you don’t with all the details so that we can help.
Regards.
August 25, 2020 at 12:26 pm #132225bjbundyParticipantHi
As my website is currently in a „Coming soon“ mode I’ve made a few screenshots to explain my question.
This screenshot shows my backend and as one can see I work with Titles and a subtitle.
Currently my website looks like this:
My aim is that the site looks like this:
But this is only on a few pages of my website, not on the whole website. So it would be great if I would have the chance to select where the title and the subtitle is shown.
Thanks in advance!
-
AuthorPosts
- You must be logged in to reply to this topic.