Opencart背景图片/颜色错误

Question

Afternoon Stack overflow,

My issue is with my website here

I'm using a module for the background image which works perfectly well on desktop computers and ipads, When a mobile user looks over the website, The background image which is maxed at 4000px stops and displays a white background instead. I've tied @media fixes but have had no luck. The only fix i found overlayed the content area remove the dripping effect at the top.

Device comparison

Thanks again, Steven

Answer 1

Solution: 1- Give background:#000; to the body in mobile situation(media query)

body {
    background: url('http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png') no-repeat center top #000 !important;
}

2-Give background-size: cover !important; to the body in mobile situation(media query)

body {
    background: url('http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png') no-repeat center top #000 !important;
background-size: cover !important;
}

Answer 2

You could just give

#content { background-color:#000; padding-bottom:30px; }

and remove

footer { margin-top:30px; }

Gives the same visual effect as if the image had covered it all.

Answer 3

Your background is just not responsive that is the issue here.I suggest trying to fix your backgound image

background: url(http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

Try putting this on your site As you can see it picks up the image and its responsive and everything in the background is responsive. Just play around with your background image make it smaller since its cutting in half ways from top to bottom

EDIT:

Your image is 1920x4252 ,make it 1920x1080 or something similar.