Image in header splits into 3 or repeats when screen resized for mobile

Image in header splits into 3 or repeats when screen resized for mobile

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.header {
background: url(http://tmcstoneworks.co.uk/wp-content/uploads/2013/06/header3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

This will solve your issue.

 

It solved it but when full screen now it does not look right

Before Picture



After adding code u advised it now looks like this.



It has got rid off the header splitting into 3 but as you can see just is not right wrong aspect ratio

 

Hello,

The code provided above is prevent to repeating the image, Use large image for your header and adjust the image size as per your requirements, This will solve your issue.

 

I don't understand what you mean as the image is the size of top header 952 x 164 & i have tried tried bigger at twice the size of 952 x 164 still dosnt look right,only looks right when i don't use the snippet of code you provided but of course splits into 3 when on mobile