Responsive Header Image

@gregorywprice This could be a bit tricky because the size of the header would be independent of the background image. One possible solution would be to add some CSS that automatically covers the header area with the background image, but this means that the image would be larger than 100% on mobile devices.

Try adding this CSS:

.header-area-custom {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

Let me know if that works, or if you had something else in mind. If we come up with a good solution I’d like to add it to the theme ??

That centered the image but didn’t re-size it.

I added:
.header-area-custom {
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}

and it re-sized the image but centered it between the menu and top of page on mobile device.

Now I would like to have it positioned directly on top of the menu with no space above or below.

@gregorywprice I’m not sure how this should work. Do you want the header area to automatically resize based on the background, rather than its content?

The image re-sized fine and I’m happy with the size of it but just want it to sit directly above the menu with no space between the menu and the re-sized image.

@gregorywprice Like this?

.header-area-custom {
background-size: 100%;
background-position: center bottom;
background-repeat: no-repeat;
}

Yes worked perfectly!

Now anyway to remove the space above the header and top of page?

Sorry the space between the top of the header and top of the page?

@gregorywprice This is the tricky part. To remove space, we’d need to resize the header based on its background image (rather than the content, which is the logo and site title). There are no native CSS properties that do this automatically, since it’s technically a div with a background rather than an image.

I could suggest cropping the background image larger, so that it covers the space at the top when the div gets taller on mobile.

I don’t use a background image so its just the default light grey which surrounds the site.

How would I make the space white in colour?

I forgot to mention that I don’t use the logo or site title. I made an image banner which I am using at the top of my page.

@gregorywprice Ah that makes sense! Try this:

.header-area-custom {
background-size: 100%;
background-position: center bottom;
background-repeat: no-repeat;
background-color: #fff;
}

Awesome that worked.

Thanks for your help Brian!

If you could take a look at my other posts and see if you could help me that would be great.

We’ll check them and reply as soon as we can!

Kind Regards,
-Roch

Dear all,

how can i have access to the CSS codes? I want to resize my size title on Rookie theme (sportspress pro) so it fits better on mobile phones…

Thank you!!

Marco

• This reply was modified 8 years ago by driorio.

Hi Marco!

If it’s something simple we’ll be able to help you. Please open a new ticket with an example.

Thanks!

Kind Regards,
-Roch