How do I make my header image fit all platforms?

[KeepSwimming]

So on my website at (www.Auditionwell.com)Im trying to use the image currently on my header.It appears fine on my screen and on the website but on other devices like my Iphone 6 or laptop-The header image text is cut off.Im working on a 2560 x 1440 monitor but have a second monitor with a lower resolution.So I used that monitor to fit the header.It worked and looked good but now on my 1440 monitor the text is cut off .Im just wondering how do I make this image fit on all resolutions?When I used the blank header with just text it fits perfect on all screens.The demensions for the image im trying to useis 2153 x 1038.Any help would be greatly appreciated.

[Adam7 · Accepted solution]

I think you might be able to get what you need by using a standard image instead. Try using a solid color for the background of your header that makes the grey color, then adding your header image as a regular image to that.

[MarijkeD]

What if you want an image across the screen (full width)?

I've had the same problem. 

[Bernadette3]

Hey there. Do you mind posting your website link so we can take a look?

[WomeninBusiness]

Hello there, 
I am trying to figure out how to make my website background (http://www.womeninbusinessisu.com/) fit all devices; it keeps getting cut off on mobile devices. Can you help?

Thanks!

[Adam7]

To get more of the header image to display on a mobile device, you'll need to reduce the height of the header area. Basically the less the image needs to fill vertically, the smaller it will be and so more of the sides will be shown. Try doing this:

1. Add the Hide app to your site: https://www.weebly.com/app-center/hide

2. Add the title element you have in your header area to a hide element and set that to display on large screens

That should hide the title element on mobile devices so the height of your header area shrinks.

[WomeninBusiness]

Thanks for the help! It appears to look slightly better- but still looks wacky on mobile. I have it so it shows it on small and extra small. How could I make it so it fills the whole screen on mobile? Thanks!

[Bernadette3]

Hey @WomeninBusiness. I found this that might help you. Can you add the following to the SEO header section of the Setting tab? Just make sure to save and publish. I was advised this still may need some tweaking, but let's see where it gets us.  

<style>
@media screen and (max-width: 767px) {
.wsite-section.wsite-header-section.wsite-section-bg-image > .wsite-section-content
{
height:150px !important;
}
}
</style>

[WomeninBusiness]

Thank you so much! It looks great now I appreciate the quick responses! Issue resolved.

[Adam7]

That's great, @WomeninBusiness!

[Annieface]

Hi, I tried this solution and it worked perfectly for my phone but not my (12.9 inch) ipad. Do you know how to make the header code work universally for any device size? (Trying to get a header image to stretch to any-width device.)

Thanks!

[Adam7]

Hi @Annieface - can you post a link to the page of your site where you see that? It'll help our Community members figure out what to change.

[Annieface]

Thanks, Adam.

My website is www.annieink.com. I'd like my banner image to stretch to fit the width of whatever device is being used. Instead, the image gets cropped in weird ways. I feel like this has to be possible, but I can't find a solution. Any help would be appreciated!

[BJ5]

I think this should do it for you @Annieface

<style>
    .wsite-section-bg-image
    {
        background-size: 100% !important;
        background-position: 0% 0% !important;
    }
    .wsite-header-element
    {
        background: #fff;
    }
</style>

Add that to Settings > SEO > Header Code, and it will force the header image to always use the full image to fill. When the header are is taller than the image itself (like in portrait mode on a mobile device), it will fill the extra space with white.

[Annieface]

@BJ, thank you so much for reaching out! I really appreciate it. 

The code is so close to being what I need...It fixed the width of the image, but it created a black bar underneath the image on smaller devices (see the attached picture from my iphone.) Do you know how to remove the black bar as well? 

Thanks again for your help!

Annie

[BJ5]

Oh! I think I made a typo. Try this code instead:

<style>
    .wsite-section-bg-image
    {
        background-size: 100% !important;
        background-position: 0% 0% !important;
    }
    .wsite-header-elements
    {
        background: #fff;
    }
</style>

[Annieface]

THANK YOU SO MUCH!! That fixed it! 

Really grateful you took the time to help.

Annie

[Bernadette3]

Bj is such a  welcome helper to the community.

[MWF]

I am having the same issue as well....will try it...and get back to you....thank you so much for your time & effort!

[Bernadette3]

Let us know how it goes.