I am using the Vantage premium theme and trying to add a background photo to my masthead. Depending on the size photo I use it either only displays part of the photo, or it displays it twice side by side. I would like to know what dimensions to crop the photo to so it displays correctly? Thanks for any help.
Masthead background Photo size
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Joseph
If you’re running the Full Width layout then there isn’t a correct resolution as the masthead will adjust the display it’s being viewed on. Here are some helper selectors that you can insert under Appearance > Custom CSS to get a better result, give it a try.
If you just want to stop the repeating then use this:
/* Masthead Background Image */ header#masthead { background-repeat: no-repeat; }If you want to the masthead background image to cover, which is the most responsive way of dealing with it, then paste this under Appearance > Custom CSS:
/* Masthead Background Image Cover */ header#masthead { background-repeat: no-repeat; background-position: center center !important; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }Thank you for help, but I guess I need a bit of clarification, being a complete novice. I am using the full width layout and I am trying to get a single image to fill the masthead. I don’t really understand much about coding, if you could help I would appreciate it. Are you saying that in order to do what I want I just need to copy and paste one of these in the custom CSS menu, and it should work? Nothing else needs to be done? I tried making using the image as my logo, but no matter how large I made it it left a border. Thanks for any help.
There are to options above. If you paste the first option under Appearance > Custom CSS your background will stop repeating.
If you paste the second option under Appearance > Custom CSS your background will stop repeating and cover the entire space, irregardless of it’s size. It will do this while maintaining ratio.
However the masthead background image shouldn’t be used for a logo as it’s not linked so users can’t click on it to go home. If you want your logo to take up the entire header you should consider changing to the fixed width layout and then applying the following to Appearance > Custom CSS:
/* Full header logo */ header#masthead { padding: 0 !important; } header#masthead hgroup { padding: 0 !important; } header#masthead hgroup .logo img { width: 1080px; } .main-navigation { margin: 0 !important; } body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar { display: none !important; }I pasted the second set of codes into my custom CSS and the photo did fill the masthead. My only problem is that if I scroll down, instead of the masthead moving up off the screen the menu bar rises to cover up the masthead. Is there a way to stop this? Also, when I change the background photo, I cannot seem to pick a photo from my library and I have to upload it again. How do I avoid having to do this? Tanks again for all your help.
Under Appearance > Theme Settings > Navigation de-activate Sticky Menu. There is unfortunately no way to avoid that in the Customizer.
Hi,
I have no clue what to do as you probably understand I am not a internet techie..
I pasted the second to last code under Appearance >> Custom CSS
“/* Masthead Background Image Cover */
header#masthead {
background-repeat: no-repeat;
background-position: center center !important;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}”
in my custom CSS and uploaded a picture to the header but it cut off everything, here is the link to see it:
http://teamfinallymakeitonline.com/ILN/
It’s supposed to look like this: http://teamfinallymakeitonline.com/ILN/wp-content/uploads/2014/07/22lightintree2TFMIO1.jpg
I have no idea how to get this to work, any help would be greatly appreciated =)
Kiesha Michelle
Hi Kiesha
Please remove the Custom CSS you used and use this rather:
/* Full header logo */ header#masthead { padding: 0 !important; } header#masthead hgroup { padding: 0 !important; } header#masthead hgroup .logo img { width: 1080px; } .main-navigation { margin: 0 !important; } body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar { display: none !important; }Please open a new thread if you need further assistance and I’ll jump in there.
Thanks