Challenge with Making Backgrounds Responsive on Android Chrome

I’m facing an issue with the responsive background on Android Chrome. It displays correctly on PC browsers like Safari, Firefox, and Opera, as well as in Firefox on Android. However, I am encountering a problem with Chrome on Android where it doesn’t appear fullscreen.

https://i.sstatic.net/ukZc4.jpg

Any suggestions on how to resolve this? I’ve exhausted all my options so far...

CSS and HTML code samples:

.background {
    background-image: url("images/bgsky2.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="background">

</body>
</html>

androidhtmlcssgoogle-chrome

Answer №1

This problem was first reported many years back!

Check out this link for more information:

http://code.google.com/p/android/issues/detail?id=3301

I also recall using this code snippet that helped me:

    html{
 height:100%;
 min-height:100%;
}
body{
 min-height:100%;
}

Answer №2

Give this a shot: 

   body { 
      background-image: url(images/background.jpg) center center no-repeat fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

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

Best practices for coding in HTML and CSS

Creating my first website for an internship has been quite a learning experience. Throughout my training, I was always advised to avoid embedding styles directly into the HTML code. However, now that I am actually developing a site, I can't help but f ...

htmlcss

Responsive Design and the Importance of Setting Min-Width in Bootstrap 3

After doing some research on Stack Overflow about defining a minimum width for a responsive layout in Bootstrap3, I encountered conflicting answers related to "media queries." My goal is to make my layout responsive up to a certain point. Once it reaches, ...

htmlcsstwitter-bootstrap

Improper application of Angular bindings in Chrome when navigating to a page using the browser's back button

Have you encountered this issue before? I have a few textboxes generated within an ngFor loop: <tr *ngFor="let tableRow of lineItems; trackBy:trackByIndex; let rowIndex = index; "> <td class="psavingsSmallerGridCell"><input c ...

angulargoogle-chrome

Issues with HTML structure across various devices

Being a novice in web development, I've been experimenting with creating a modal body. https://i.sstatic.net/Qk5BR.png The code snippet below represents my attempt at structuring the modal body: <div className="row modalRowMargin textStyle" > ...

javascripthtmlcssbootstrap-4

Mastering the art of using transitions in conjunction with display properties

I'm trying to achieve a fade-in effect with the CSS property display:block. Here's my HTML code: <div>Fade</div> And here's my CSS code: div { display: none; transition: 2s; } div:hover { display: block; } Unfortunately, thi ...

htmlcss

Creating a unique tab spacing effect using HTML and CSS

I'm currently working on my personal website and I'm looking to create a tab-like effect (similar to word processors) for showcasing projects along with their descriptions. Here's an example layout: ReallyLong NameProject Project1 Descr ...

htmlcssformatting

Remove the footer from the main section

I'm facing an issue with the web page layout of my website. Here is a snippet of the structure: <body> <div class="container"> <div class="sidebar"> </div> <div class="content"> </div> </div> < ...

htmlcss

alerting my application when a contact undergoes changes via a content observer

In the process of developing my android application, I have a specific module focused on contact synchronization. This module allows users to sync their contacts with the app and filter them against a server contact list, similar to popular messaging platf ...

javaandroidandroid-contactscontactscontract

What is the best way to ensure jQuery loads before CSS code on a website

I am currently working on a blog project that allows visitors to customize the background color by simply clicking on one of five available buttons. $(function(){ //Checking if a color scheme has already been selected var chosenColor = ...

javascriptjqueryhtmlcss

Place attribute value directly under the border of an HTML element using a combination of JavaScript and CSS

I'm currently working on a JavaScript script to scan the DOM for elements that have a specific custom attribute called example-type. The goal is to apply CSS styling to draw a border around these elements and then display the value of the example-type ...

javascripthtmlcss

Steer clear of using absolute positioning in Material-UI and React for better styling and layout

Is there a way to achieve the same layout without using position: absolute for the "Hello There" button? I want to remove that CSS property while keeping the design intact. Any better suggestions? Feel free to check out my codesandbox: CODESANDBOX -----&g ...

cssreactjsmaterial-ui

Scrolling through four limited list items automatically

Hey there! I am currently working on a design project. You can check it out here. I'm trying to replicate a section from another site, which you can see here. <div class="latest-winners-container"> <h3 class="header">Latest Winners< ...

javascriptjqueryhtmlcsstwitter-bootstrap

CSS only rendering in Firefox, not displaying in other browsers

After all the hard work I put into my website, I have encountered an issue while conducting browser compatibility checks. There seems to be something strange happening with the CSS of a specific link. I have applied a CSS class and included some PHP code ...

phphtmlcsscross-browser

The feature to swap out the thumb of a range slider with an image is currently not

I'm attempting to design a unique range slider using CSS. <style> .slide-container { width: 300px; } .slider { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: #FFFFFF; outline: none; opacity: ...

htmlcssslider

Tips for customizing the appearance of an HTML dropdown menu

Here is the code snippet: <select name="xyz" id="abc"> <option value="x">10/Page</option> <option value="y">20/Page</option> <option value="z">30/Pa ...

htmlcss

How to delete an element from an ArrayList of strings in Java

Hello, I am new to Java and I have created an ArrayList containing a list of strings. I want to remove certain elements from each string in the list below: ArrayList<String> data = new ArrayList<String>(); data.add( "ksh10,000"); data.add( ...

javaandroid

What could be causing my Android app to unexpectedly close overnight?

I am grappling with understanding the life cycle of my Android App. I have noticed that when I leave my app running in the background overnight, and then reopen it in the morning, the splash screen appears as if the application is restarting. However, the ...

android

How can the value of a button be displayed in an input box using an onclick function?

When the button '1' is clicked, it displays the value "1" inside a <!p> tag. However, the second button '2' does not display the value "2" in the input box. Even though both functions are identical. //Function with working func ...

javascripthtmlbuttoninputcalculator

`Why won't my xpath expression function properly?`

<DOC NUMBER=1> <DOCFULL> --> <br><div class="c0"> <p class="c1"><span class="c2">Document 1 of 3</span></p> </div> <br><div class="c0"> <br><p class="c1"><span class="c2"&g ...

htmlrxpath

What is causing compatibility issues between Firefox and the provided CSS code?

I am experiencing an issue with the page layout in FireFox. The widths are not displaying correctly and the upload button does not work. However, I have no problems when using IE or Chrome. I have reviewed the code but cannot find any errors. Here is the ...

htmlcssinternet-explorergoogle-chromefirefox