This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Masthead background Photo size

Open 7 replies premiumthemetheme-vantage
Joseph Herman
11 years ago · Last reply by Andrew Misplon 11 years ago

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.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Andrew Misplon Staff 11 years, 8 months ago

    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;
}
  2. Joseph Herman 11 years, 8 months ago

    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.

  3. Andrew Misplon Staff 11 years, 8 months ago

    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;
}
  4. Joseph Herman 11 years, 8 months ago

    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.

  5. Andrew Misplon Staff 11 years, 8 months ago

    Under Appearance > Theme Settings > Navigation de-activate Sticky Menu. There is unfortunately no way to avoid that in the Customizer.

  6. Kiesha Michelle Falchenberg 11 years, 8 months ago

    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

  7. Andrew Misplon Staff 11 years, 8 months ago

    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

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread