I am trying to add a background image to the masthead that stretches the entire width of the page and is responsive to various devices. When I initially uploaded my image, it was 1080 px wide by 420px high. I set the masthead image, but it is showing up twice in the masthead (side by side).
I added the following CSS code:
header#masthead {
background-repeat: no-repeat;
}
and the image shows up only once, but does not stretch the full width of the page.
So I added this CSS code:
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;
}
Now the image is zoomed in and cut off, so you can’t see the entire image (but it does fit the width of the page now…)
So then I tried:
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;
}
And now the image is repeating again.
Is there another fix I can try? I am using the Premium Version 2.2.3)
Thanks!
Aleah
Also, this is the link to my photo.
http://www.1140balance.com/wp-content/uploads/2014/12/homeslider.jpg
In all of the CSS options mentioned above, the photo is not responsive on my iphone or ipad either.
Thanks!
Aleah
OK. I’ve read a ton of these threads on this topic. I changed the header padding to 210 and that seems to have finally fixed the problem. And things look good on my laptop and my ipad. However, the masthead image on my iphone is not resizing at all (so all I can see on the phone is the very center of the image). Is there a fix for that?
Thanks!
Aleah
Hi Aleah
Thanks for reaching out.
Remove all the Custom CSS you have for this now, back it up and try the following:
/* Header */ header#masthead { background-repeat: no-repeat; background-attachment: fixed; background-position: top center; } @media (max-width: 680px) { header#masthead { background-size: 100%; } }Hope that helps.
Hi Andrew,
It is SO much better, so thank you! The computer and ipad are perfect. On the iphone, the entire image now shows up, but there is a tremendous amount of white space beneath it. You have a scroll a bit before getting to any of the actual page info. Is there a way to reduce that white space (again, this only happens on my iphone).
Thanks again!
Aleah
You’ll need to re-adjust the header padding for mobile. Insert the following under Appearance >Custom CSS and adjust as required:
@media (max-width: 680px) { header#masthead .hgroup { padding-top: 210px; padding-bottom: 210px; } }Andrew,
Below is the only CSS I have (under Appearance > Custom CSS). I have changed the padding number to everything from 1px to500px and there is no change on the iphone. No matter what number I change it to, there is a large amount of white space below the header image. What am I doing wrong?
Thanks
Aleah
/* Header */
header#masthead {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
@media (max-width: 680px) {
header#masthead {
background-size: 100%;
}
header#masthead .hgroup {
padding-top: 1px;
padding-bottom: 1px;
}
}
Give this a try:
@media (max-width: 680px) { header#masthead .hgroup { padding-top: 210px !important; padding-bottom: 210px !important; } }You are a genius!! Thank you so much. Changed the top and bottom to 55px and it worked perfectly! Thanks again!
Awesome, glad that did the trick.