The image is not appearing on mobile devices, but it is displaying correctly on desktop computers

Having trouble with my landing page on compare.comxa.com. When I try to view it on my Android device, only the form shows up and the background image is nowhere to be found. Can anyone help me troubleshoot this issue? Here 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 friday deals, black friday deal compare">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
  <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>
  <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 Favorite Stores</h5>
                                    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
                                    <div class="mc-field-group"></div>
                                    <!-- Include additional form fields here -->
                                    <div id="mce-responses" class="clear"></div>
                                    <div style="position: absolute; left: -5000px;" aria-hidden="true"></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>
                </div>
            </div>
        </div>  
    </div>
</body>
</html>
      

Answer №1

It appears you are attempting to retrieve the background image from a secure ftp server. This method is only supported in the format

ftp://user:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a7a6b79797d65786e4a796f787c6f78247e666e">[email protected]</a>
However, this approach is not advisable due to the security risk of having the password exposed in plain text.

Instead of resorting to such risky behavior, it is recommended to transfer the file to the appropriate directory on the web server and simply reference it like this:

background-image: url(bkg1.jpeg);

Answer №2

The background image is not loading due to an inability to access your account where the image is located. Simply update the image URL to resolve the issue.

background: url("http://www.example.com/image.jpg") no-repeat center center fixed;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extracting information from a webpage by using Javascript to locate and interact

Seeking a way to retrieve the src attribute from an audio tag dynamically inserted into the DOM by third-party JavaScript without the ability to modify it. The goal is to back up these sounds by capturing their sources on the server side across multiple pa ...

JQuery not refreshing data values

function addToRewardDatabase() { var rewardValue = "98"; $.post("db/mkreward.php", { proid: getURLParameter("id") }, function(data) { rewardValue = "99"; alert(rewardValue); }); alert(rewardValue); return ...

Create movement in line art using the position of the cursor

I have created a skull lineart in illustrator and I am trying to make the lines fill in or erase based on mouse position. There are two possible ways to achieve this: Using lazy line painter to draw the lines and then finding a way to animate based on ...

How to add a subtle entrance animation to text (demonstration provided)

Apologies for the brevity, but I could really use some assistance with replicating an effect showcased on this particular website: My understanding is that a "fadeIn" can be achieved using jQuery, however, I am at a loss as to how to implement the 3D effe ...

Issue with Bootstrap: Nested column disappears upon reaching the breaking point

I want to create a grid with 3 columns, each containing a nested grid with 2 columns (one smaller than the other). When the breakpoint is reached, I want the columns to stack on top of each other. However, one of the nested columns disappears after the br ...

Utilize Meteor's ability to import async functions for seamless integration into method calls

Encountering an issue with this Meteor app where the error TypeError: vinXXX is not a function occurs when attempting to call an exported async function named "vinXXX" from within a method call in a sibling folder, which has been imported in the methods f ...

Shrink video size directly in the browser using JavaScript and HTML5 before storing or sharing it

Is there an optimal method for resizing and potentially trimming a video using Javascript, HTML5 or Webassembly in modern browsers before saving it to the Filesystem? What is the most effective way to edit a video within the browser? Here are some differe ...

Display a list in thumbnail format on Wordpress

On my website, , the homepage thumbnail post does not display the text in a bulleted list like it does when I enter the post directly at . Can you explain why this is happening? I want to note that the theme admin supports Custom CSS which allows me to ad ...

Ribbon design in LESS/CSS does not maintain its structure when resized in Google

My CSS/LESS ribbon is displaying perfectly in Firefox, but encountering issues in Chrome when resizing the window. At 100% zoom, everything looks good, but adjusting the zoom causes elements to become misaligned. To make it easier to troubleshoot, I' ...

Retrieving Remote Headers in Loopback.io Inbound HTTP Method

In my remote method, I have placed the application logic as shown below: module.exports = function(Entity) { HcpEntity.retrieveProfile = function(body, cb) { process.nextTick(function() { //TODO: Add Application Logic here } } } Also, he ...

canvasJS: unable to load the chart

This is my first time using canvajs, but unfortunately, it's not working as expected. Can someone please review my code? data.php <?php header('Content-Type: application/json'); include './traitement.php'; $data =array(); ...

Send a JavaScript variable to Twig

I am trying to pass a JavaScript variable to a twig path but the current method I am using is not working as expected. <p id="result"></p> <script> var text = ""; var i; for (varJS = 0; varJS < 5; varJS++) { text += "<a href= ...

Is it possible to interact with Java SE jars using JavaScript?

I need to integrate an API that is written in Java with a Client written in JavaScript. Is there any way to use this API, possibly along with other Java-SE JARs, in Webstorm? Any assistance would be greatly appreciated. Thank you! ...

Tips for Preventing Page Scrolling When Clicking on a Hashed A Tag in Content with a Fixed

Currently stuck dealing with a challenging problem related to hashed anchor links. Here's a basic representation of the HTML code: <div class="main-wrap"> <header></header> <aside> <nav> <ul> ...

Ways to execute the pdf.js node demonstrations?

I've been attempting to run the pdf.js node examples, specifically getinfo.js. Unfortunately, I encountered an issue that resulted in the following error: C:\Repositories\pdf.js>node getinfo.js node:internal/modules/cjs/loader:1080 thro ...

An error is thrown when trying to retrieve Objects: Uncaught TypeError - Object function ParsePromise()

By obtaining a Document object with its id, the following code proceeds to locate corresponding sections based on the object. The document identifies a Parse object and document.toJSON converts this into a Javascript object. Furthermore, sections represent ...

Guidelines for submitting and displaying content on a single page with jQuery and MySQL

Objective: To develop a Q&A Script using PHP, JavaScript, and jQuery that allows users to post questions and provide answers. Upon submitting a new answer, it should be stored in the database and automatically displayed in the answers section. Challenge: ...

Ensure that immutability is strictly enforced, or allow for partial immutability without the risk of silently failing

Is there a method to implement partial immutability on an object in a way that triggers an error if any attempt at mutation is made? For instance, consider let obj = {a: 1, b: 2}. I am interested in making obj.a and obj.b immutable while still allowing ad ...

Determine the altered props within the componentWillReceiveProps lifecycle method

During the process of debugging React code, it is common to come across situations where componentWillReceiveProps gets triggered unexpectedly, but identifying which prop change is causing this issue can be challenging. Is there a method available to easi ...

Leverage both props and destructuring in your Typescript + React projects for maximum efficiency!

Is it possible to use both destructuring and props in React? For instance, can I have specific inputs like name and age that are directly accessed through destructuring, while also accessing additional inputs via props? Example The desired outcome would ...