CSS "background-position: bottom" Less than ideal performance on Mobile Browsers

body
{
  background-color: #000000;
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Aurigids_-_Jeremie_Vaubaillon.jpg/1280px-Aurigids_-_Jeremie_Vaubaillon.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center bottom;
  background-size: cover;
}

a
{
  color: #ffffff;
}
<a>Hello, world!</a>

As I develop my website, I encounter an issue where the background image fills the viewport but is anchored to the bottom. While it works fine on PC, mobile browsers on Android display the background image anchored to the bottom of the last element if the content does not fill the screen, resulting in a blank space below. How can I address this problem and ensure that the background image properly fills the screen on Android devices?

htmlcssweb

Answer №1

With the help of a friend, I was able to resolve this issue. The cause was that the body element was smaller than the viewport, resulting in extra blank space. By moving the background properties to the html selector and including "height: 100%;" in the code snippet below, the problem was solved.

html
{
  background-color: #000000;
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Aurigids_-_Jeremie_Vaubaillon.jpg/1280px-Aurigids_-_Jeremie_Vaubaillon.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center bottom;
  background-size: cover;
  height: 100%;
}

a
{
  color: #ffffff;
}
<a>Hello, world!</a>

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

Switch or toggle between colors using CSS and JavaScript

Greetings for taking the time to review this query! I'm currently in the process of designing a login form specifically catered towards students and teachers One key feature I'm incorporating is a switch or toggle button that alternates between ...

javascriptjqueryhtmlcss

What is a clear indication that a <div> is filled with text?

Picture a scenario where a website contains an element that needs to be filled with random text using JavaScript. Once the div is completely filled, it should reset and begin again. It may sound odd, but the question is: how will the JavaScript determine w ...

javascripthtmlcss

css issue with opacity transition not functioning properly

My website is designed to display images in a table, but some of them are Stock Photos, so I need to indicate the source. I want the source to appear when the user hovers over the picture. For this purpose, I have assigned the source tag to a class (.PicSo ...

htmlcsshoveropacity

What is the best way to incorporate a fadeIn effect while using the .attr method?

I am working with a line of code that switches between classes class1 and class4 to update the background of my website. I would like to incorporate a fadeIn effect each time the class changes. Can you help me with this? Thank you! Below is the code snipp ...

jqueryhtmlfadein

Adjust the border color of a TextField in react/material ui based on whether props are required

If a value is required, the TextField border color will be red. Once a value is entered, the red border will disappear. Check out the images by clicking on the links below: Entered Value Without Value with Required field ...

cssreactjsmaterial-ui

Tips for focusing on a background image without being distracted by its child elements

I am trying to create a zoom effect on the background-image with an animation but I am encountering issues where all child elements are also animated and zoomed. When hovering over the element, I want only the background part to be animated and zoomed, and ...

htmlcsstwitter-bootstrapcss-selectors

Ways to adjust the anchor and h1 elements using CSS

I'm working on an HTML document with some markup, <a class="home-link" href="index.html" rel="home"> <h1 class="site-title">John Arellano's Personal Website</h1> </a> While styling the site title, I encountered a problem ...

htmlcss

Is it possible to send a search query to thesaurus.com using HTML code on a webpage?

I've created an HTML page with a text field and a submit button. When the user enters a word in the text field and clicks submit, a servlet fetches the input using request.getParameter(). Now, I need assistance implementing functionality to send this ...

javahtml

Cropper.js, effortlessly populating a container with a perfectly centered image

I took inspiration from the cropper.js library website but made modifications. You can check out the original example here. Here's my version of the modified example: CodePen Link var image1 var cropper1 var image2 var cropper2 ...

javascriptcsscropperjs

The transition property in CSS and JavaScript does not seem to be functioning properly in Firefox

Recently, I integrated a Slide in menu script on my website using a Slide in menu script. After following all the instructions provided, the menu started working flawlessly on Chrome and Safari browsers. However, my main goal was to make it function on Fir ...

javascripthtmlcss

Having trouble with Simplemodal showing link content in the modal window

Having trouble getting the modal window to display content from another link? I'm pretty sure I've connected them correctly using the right classes. This is the basic JavaScript provided by . jQuery(function ($) { // Load dialog on page load //$ ...

javascriptjqueryhtmlcsssimplemodal

Utilizing Host Styles in Angular2 Components

In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...

cssangular

I need the PHP code to ensure that only checkboxes can

I keep encountering what seems like a simple issue in my html form with checkbox groups. I am trying to ensure that at least one checkbox is selected from each group, and if not, display an error message using PHP code. However, despite multiple attempts, ...

phphtmlmysql

Discover the seamless method of transferring data from an HTML5 form to a PHP page for processing without the need to refresh the page or manually navigate to the PHP file

When creating a website, I encountered an issue with a form that requires the user to select three options from select elements and then click a search button to search the database. The problem is that PHP does not retrieve the form data unless the button ...

phphtml

Strange Data List Phenomenon

Presented here are two distinct datalists, one containing patient filenumbers and the other containing states. <input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number"> <datali ...

htmlinputhtml-datalist

Issue with displaying Git remote repository on list item element (ul) not appearing

My attempt to showcase my GitHub repositories via their API is not displaying on my webpage, even though the exact same code works perfectly fine here on JSFiddle Upon debugging, it seems that the script is being invoked but the content is not loading wit ...

javascriptjqueryajaxhtmlgithub-api

Event triggered when a Socket.IO connection is disconnected

Everything seems to be working well with my code when a new user joins, but I'm encountering issues when a user leaves as it doesn't display anything. Can someone point out the error in my code? Below is my server-side code: const express = requ ...

javascriptnode.jsexpresswebsocket.io

Column that adjusts to different screen sizes

In the realm of responsive web design, what methods are suggested to achieve the specified CSS display? My main requirement is to have a maximum of three columns. The content should be divided evenly among these three columns. I prefer using SCSS and wel ...

htmlcss

Tips for sending a string as HTML content in VueIn Vue, you can send a string as

I am attempting to pass the value for exp by using this code snippet. However, the form of selectedChannel.explanation appears as "channel name". Is there a way for me to display exp as channel name? computed: { channel: { get() { ...

htmlvue.js

Create a full-width slider using Materialize CSS framework

When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...

javascriptjqueryhtmlcssmaterialize