Full width image header - but problem on mobile/smartphone

Hi,
I want to use a full width image header , approx 950px wide 150px high

I have used the following code in the custom CCS area:-

.header{ background-image:url(/header2.png) !important;
height:150px;
background-size:100% 100%; background-position:center; }
.header .logo{display:none;}


It works great until I view the site on a mobile/smartphone, it is fine on ipad and desktop
but the header image distorts on the smartphone.
Any suggestions on how I can modify the code to make the image automatically
scale to small space available when viewed on a smartphone.
I am some what lost at the moment. any suggestions warmly received.

Thank you, kindest regards
Andrew

 

Hello,

Could your please share your website link so that we will provide you exact solution.

 

www.playonref.com

The header image isnt the actual image that will be used in the live site, but the dimentions are correct.
Hope you can help.

Many thanks
Andrew

 

Hello,

You can paste the following code in your Custom CSS in stead of previous code.
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

.header {
background-image: url(http://playonref.com/header2.png) !important;
background-repeat: no-repeat;
height: 150px;
background-size: 100% auto;
background-position: center;
}

This will solve your issue.

 

This is brilliant, thank you so much, it indeed has done exactly what I was looking for thank you.

I now realize the 'Tap To Call' button is right in the middle of the new mast head logo.
Any suggestions on how I can remove the 'Tap To Call' button.
Whist I am at it, it would also be useful to remove the telephone number and address if possible.
Just loving the theme and the support.

Many thanks
Andrew

 

Panic over, I have just been through some previous threads and I think I have worked out how to do it.

Thank you
Andrew