background-image not showing on mobile but showing on desktop
Question
l got a landing page up and running here compare.comxa.com..when l try to view on my android device only the form shows,the background image is no where to be found. please can you help. this is the code
body { height:100%; background: url("http://bit.ly/1MOnMVB") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } #mc_embed_signup { background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; position:absolute; top:85px; left:35px; border-radius:5px; } h2 { color:orange; font-weight:bold; text-align:center; } h5 { color:#483D8B; text-align:center; }
<!DOCTYPE HTML> <html> <head> <title>black friday deals</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="author" content="ataga austin"> <meta name="keywords" contents="black friday,deals,black firday deals,black friday deal comapre"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <!-- Begin MailChimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class=" col-xs-12 col-md-12"> <div class="row"> <div class=" col-xs-12 col-md-4"> <div id="mc_embed_signup"> <form action="//comxa.us12.list-manage.com/subscribe/post?u=3380c08f529e58f0eadc50f43&id=ab83c00a63" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <h2>Best Black Friday Deals</h2> <h5>Compare Prices Across Your Favourite Stores</h5> <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> <div class="mc-field-group"> <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=" something@some.com"> </div> <div class="mc-field-group"> <label for="mce-FNAME">Name </label> <input type="text" value="" name="NAME" class="" id="mce-NAME" placeholder=" smith davis"> </div> <div class="mc-field-group"> <label for="mce-PRODUCT">PRODUCT </label> <input type="text" value="" name="PRODUCT" class="" id="mce-PRODUCT" placeholder="apple tv" > </div> <div class="mc-field-group"> <label for="mce-LNAME">FAVORITE STORE </label> <input type="text" value="" name="STORE" class="" id="mce-STORE" placeholder=" amazon"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"> </div> <div class="response" id="mce-success-response" style="display:none"> </div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3380c08f529e58f0eadc50f43_ab83c00a63" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success"></div> </div> </form> </div> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script> <script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='PRODUCT';ftypes[2]='text';fnames[3]='STORE';ftypes['3']='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> <!--End mc_embed_signup--> </div> </div> </div> </div> </body> </html>
2 answers
solution1
2 2015-11-24 10:46:59
It looks like you're trying to load the background image from a protected ftp server. That works only in the following format ftp://user:password@server.tld BUT that's clearly not recommended (password in cleartext!)
So rather than doing something stupid as that move the file to the right directory on the web server and just reference it like this: background-image: url(bkg1.jpeg);
solution2
1 2015-11-24 10:47:31
无法加载背景图片，因为它无法访问您拥有图片的帐户只需更改图片网址即可
background: url("http://www.wallpapereast.com/static/images/HD-Wallpapers1_Q75eDHE.jpeg") no-repeat center center fixed;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
having issue with background-image not showing
css background-image not showing at all
Randomize background-image on multiple divs without showing same image
“hiding/showing” elements and change button background-image
Element showing on Desktop but not on Mobile
Background-image in jQuery Mobile
Change background-image on mobile devices
CSS: background image not showing
background image not showing in React
Style background not showing an image
Related Tags