Home>Support>Full Width Header Image

Full Width Header Image

By Steve Fletcher, 10 years ago. Last reply by Andrew Misplon, 9 years ago.

I am currently running the free version of Vantage, and am very impressed with it. I can put a logo in, and header text. Is there a way for me to incorporate these items into a single large header i.e. will the Premium version support A large single header?

thanks

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Steve

    Thanks for running Vantage. You’ll lose the Support Text/Header widget area but you can now combine the menu and logo by going to Appearance > Theme Settings > Layout: Masthead Layout and changing it to Logo in Menu.

    There are no changes of this nature in the premium version.

  2. 10 years, 1 month ago Steve Fletcher

    Andrew, thanks for that. Is there no way to put a JPEG that covers the width of the page in the header section?

    thanks
    Steve

  3. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Steve

    Our premium version allows a masthead background image to be inserted from Appearance > Customize > Page: Masthead Background Image.

    In our free version you could insert the following into a Custom CSS module like the one included with Jetpack, and edit as required:

    header#masthead {
background-image: url(“http://localhost/so/wp-content/uploads/2014/08/wallpaper-2628182.jpg”);
}

    Where users go wrong here is not knowing where to grab the image url. Upload your image to the media library, navigate to it and grab the url from the right column box. Use that and replace my demo url above.

    To stop your masthead background from repeating use:

    /* Masthead Background Image */

header#masthead {
background-repeat: no-repeat;
}

    And if you’d like your masthead background to cover the header use this:

    /* 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;
}
  4. 9 years, 8 months ago Iresh Dilshan

    Hi. Andrew

    header#masthead {
    background-image: url(“http://localhost/so/wp-content/uploads/2014/08/wallpaper-2628182.jpg”);
    }

    an you tell me where to place this code.is it in header.php .i want to add a image to the header. im using vantage free version

    • 9 years, 8 months ago Andrew Misplon
      Hi, I Work Here

      Hi Iresh

      Any Custom CSS you see on the forum should go under Appearance > Custom CSS (Vantage Premium) or into your own Custom CSS plugin like Jetpack Custom CSS (Vantage Free).

      For further help, please open a new support thread:

      Page: New Thread

      Thanks

  5. 9 years, 8 months ago Iresh Dilshan

    Hi Andrew
    above codes i have inserted in custom css. but i didnt work.Why?
    im sure i used the correct url from the media library. but the image doesnt appear in header. pls help me
    thank you
    hear are code which i used

    header#masthead {
background-image: url(“http://localhost/wordpress/wp-content/uploads/2015/02/everrest-header.jpg”);
}
/* Masthead Background Image */

header#masthead {
background-repeat: no-repeat;
}
/* 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;
}
    • 9 years, 8 months ago Andrew Misplon
      Hi, I Work Here

      Hi Iresh

      Head to your media library, click on the image in question and grab the url from the right column metabox. Right now your CSS still says http://localhost, that’s my local demo. You’ll need to replace that url with the full url from your media library.

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More