I have tried to use an image as a main header background for the Vantage theme. The image size is 1600 x 726 and I need it to fill the full width. I have now totally lost the masthead background and cannot get it back.
This is what I have for css.
/* Home */
.home #main {
padding-top: 0px;
}
/* 100% Width Header */
#masthead .hgroup.full-container {
max-width: 100% !important;
}
/* Logo */
@media (max-width: 680px) {
body.responsive #masthead .hgroup .logo img {
margin-bottom: -30px;
}
}
/* Logo */
@media (min-width: 680px) {
#masthead .hgroup .logo img, #masthead .hgroup .site-logo-link img {
padding-left: 50px;
}
}
Please help.
Cliff
Hi Cliffd
I have looked at the site and the background image for the header is showing fine for me. It may be your browser cache, please try clearing this and checking again.
One thing I will suggest would be to change the Masthead Background Image Layout to Cover. The current image you are using does not tile very well on Larger screens. To do this please navigate to Appearance->Customize->Theme Settings->Page and change the setting for Masthead Background Image Layout.
Regards
Magus
I need to have the image is the header fill the width and height of of the masthead area. I’ve tried using the Logo function with no success.
When I use the Masthead background it seems like that may be successful but will not show unless a logo image is present.
http://gots2.dallasmediaproduction.com/
How do I use the masthead as a full size background for the theme w/o using a logo?
Thanks,
Cliff
Hi Cliffd
The easiest way would be to use a transparent image. Just upload this instead of your logo. Make sure that the transparency is large enough to allow you background to be displayed fully.
Magus
I thought that might be a good idea but no matter what image I upload as a masthead background no image at all shows. It's simply scrolls the menu to the top of the page. Any idea on how to get a masthead to show?
Hi Cliffd
Using a transparent logo and having the background image set in Appearance->Customise->Theme Settings->Page should allow the masthead image to be shown correctly.
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
Thanks
Magus
This is a private message.
Sent you Admin access as new user.
The image I need to use is 936 x 425 OR 1080 x 490.
Thanks for all your support!
Cliff
I’ve also tried to Center Logo in Customization. teh Logo still has one side the has 50 more px than the other…the center feature is not centered. Any ideas on how to correct this as well?
Thanks,
Cliff
Hi Cliffd
I have added some CSS to adjust the Logo centring when viewed at screen sizes of 1080px and lower. I can see that you are using the same background for the masthead as for the page and this is showing correctly once the screen width exceeds 1080px.
Is this the image that you want to use or did you want the purple clouds that you were using before?
Magus
Magus,
Thanks for the help. The image that is there now is the only image we want to use. It must fill the entire area and adjust for mobile devices. Does not matter if it is clickable.
Thanks,
Cliff
Hi Cliffd
What I would suggest then would be to use an image of the fans and the logo only with a transparent background, then have the masthead background set to the purple clouds. Doing it this way will allow the purple cloud background to expand to fill the space gained by viewing on larger screens and still allow the main image to remain positioned in the centre. This way also retains the ability for the main image to resize on mobiles.
Magus
Magus,
I understand what your saying but that’s not what I’m looking for.
I need the fans logo to go full width. On the right side of the fans logo there is a corner cropped and I want that corner to go to the right edge while the opposite side goes all the way to the left of the screen.
The logo graphic will end up covering the entire screen which is the look I’m going for.
Ultimately, the end look needs to be where the fans graphic is full width…regardless if it is uploaded as a background or logo image.
Thanks,
Cliff
Hi Cliff
I see what you mean now. Please add the following to your Custom CSS
#masthead .hgroup .logo img, #masthead .hgroup .site-logo-link img { width: 100%; height: auto; }Magus