How can I add another header image on the top of the front page
-
Hi there,
I would like to add another header image on the top of the front page, before the logo and site title.
Also I would like to move the existing header image so it can appear just after the site’s tagline and before the main bar. PS; I’m using the “Exhibit” Theme.The blog I need help with is: (visible only to logged in users)
-
Either check if your theme provide such features or else you will need to add custom CSS for it
-
-
Yes it is, do you know how to add custom css, please note wordpress.com premium and business plan offer custom css addition
-
@yurieando, this may be a bit challenging. If you can provide a link to the image (upload it to your media library if you have not already) you would like to use, I would be happy to see what I can do.
-
@yurieando, I did a little bit of playing and pulled an image from your Media Library. Add the following to your custom CSS and see what you think. You can replace the URL of the image I have in this example with whichever image you desire to use.
.branding-menu { background: url('https://sensoryeducationproject.files.wordpress.com/2017/08/cropped-pattern_sep1.jpg') no-repeat scroll center top; } @media screen and (max-height: 799px) { .home .masthead .branding-menu { padding-top: 10.5em; } } -
Use this instead of the above. I’ve adjusted the CSS selectors so that this gets added to all pages.
.masthead .branding-menu { background: url('https://sensoryeducationproject.files.wordpress.com/2017/08/cropped-pattern_sep1.jpg') no-repeat scroll center top; } @media screen and (max-height: 799px) { .masthead .branding-menu { padding-top: 10.5em; } } -
@thesacredpath, thank you for your help. It looks good and you picked the right image file, however I would like it to behave responsively to the changes in screen size like the original header image.
-
Hi there, let’s change what I had given you to the following and see what you think. It has the original URL for the image I used as the one you had in the CSS was returning an error.
.masthead .branding-menu { background:url('https://sensoryeducationproject.files.wordpress.com/2017/08/cropped-pattern_sep1.jpg') no-repeat scroll center top / contain; } @media screen and (max-height: 799px) { .masthead .branding-menu { padding-top:10% !important; } } -
Buenas, no sé qué es exactamente CSS, he empezado ahora con una página http://www.cotopelayo.com y me gustaria cambiar la palabra ”vino” que aparece en la parte superior y no sé como hacerlo.
Por otro lado mi plantilla no me aparece como la he comprado. es diferente y no sé como cambiarla.
Gracias
-
@thesacredpath, Thank you again! It definitely looks better, just not exactly as wide as the original header image when the screen is very wide (it has the same width as the main bar and the new header on the top seems cropped on the sides).
Another topic, I would like to have your help is, how do I change the image file you have picked? I tried to just change the name file on the code you gave me, but nothing happens (I made a little change on the pattern). Thank you very much. -
yurieando – first step is to upload your new image to your Media Library. Once that’s done, copy out the image path from the URL and swap it in the CSS code.
Let me know how it goes.
cotopelayomarketing – this forum is for sites hosted here on WordPress.com, but your site is running the WordPress software on your own hosting. If you need further help, please post over at WordPress.org:
https://wordpress.org/support/
You’ll need a free WordPress.org account to post – if you don’t already have one, you can register here: -
kathrynwp- yes, thank you! It worked!
With regards to having similar behaviour with my two images, maybe I just need to add another image like the one on the top of the page and then delete the header image. I would like the second image to be just before the main bar, instead of just after (how it is now). Is that possible? -
You could try this to widen the image at the top:
.home .container { max-width: 1500px; } -
You might also want to add this media query so the logo doesn’t cut into the top strip on smaller screens:
@media screen and ( max-width: 1600px ) { .masthead .site-logo-link img { margin-top: 30px; } } -
Hi again,
I would like to add another header image on the top of the front page, before the logo and site title. I have the word ”vino”
Also I would like to move the existing header image so it can appear just after the site’s tagline and before the main bar. PS; I’m using the’Vino” Theme.The blog I need help with is http://www.cotopelayo.com
-
cotopelayomarketing – as I mentioned earlier, cotopelayo.com doesn’t look like it’s hosted here on WordPress.com. This forum is for WordPress.com sites. You can try posting over at WordPress.org:
https://wordpress.org/support/
You’ll need a free WordPress.org account to post – if you don’t already have one, you can register here:
https://wordpress.org/support/register.php
Since this looks like a premium theme, you can also try getting help through the theme’s developer, Elated Themes: http://themeforest.net/user/elated-themes
- The topic ‘How can I add another header image on the top of the front page’ is closed to new replies.
WordPress.com Forums 