The background image on mobile devices is excessively zoomed in

My RWD page is experiencing a strange issue with the background image. The image has the following styles:

#background-image {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  background-image: url('../landing.jpeg');
  background-attachment: fixed;
  background-size: cover;
  background-position: 85% 50%;
  background-repeat: no-repeat;
}

When I view the page in mobile mode using Chrome DevTools (and FF too), everything appears fine:

https://i.stack.imgur.com/f4Jj7l.png

However, when I access the page on a real mobile browser, the background image becomes too large:

https://i.stack.imgur.com/myPdal.jpg

I am using Chrome 63 on Android for my mobile browser and Chrome 59 on Ubuntu for my desktop browser. What could be causing this discrepancy?

cssgoogle-chromeresponsive-design

Answer №1

The reason is that the setting background-attachment: fixed does not function correctly on mobile browsers...

To address this issue, try eliminating the background-attachment property and changing the position value to fixed, as shown below:

#background-image {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: fixed;
  z-index: -1;
  background-image: url('../landing.jpeg');
  background-size: cover;
  background-position: 85% 50%;
  background-repeat: no-repeat;
}

I hope this solution proves helpful...

Answer №2

Consider including the following snippet in the HEAD section of your code:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

Struggling to add a border to an HTML div element

I'm completely baffled as to why I can't seem to add a border around my div. Here is the link to my jsfiddle: http://jsfiddle.net/4HnKs/1/ It's possible that I've been staring at my computer screen for too long, but no matter how hard ...

csshtmlborder

Increasing space at the top with heading

As I scroll down, the header on my website remains in a static position and disappears. However, when I scroll back up, the header reappears wherever the user is on the page. While this functionality works well, I have noticed that as I scroll all the way ...

javascriptjqueryhtmlcss

What could be causing the extra space at the top of my div element?

My goal is to accomplish the following: However, there appears to be an unnecessary gap above the Social icons div. You can view the live page at This is my current markup:- <header> <img src="images/home-layout_02.jpg" alt="Salem Al Hajri Logo ...

csshtml

Learn how to separate two SCSS files and compile them into individual CSS files

Currently, I have two SCSS files that need to be compiled into separate CSS files. For one of the SCSS files, my script looks like this: "watch:sass": "node-sass assets/stylesheets/custom.scss assets/stylesheets/custom.css -w", "compile:sass": "node-sass ...

cssnpmsasscompilationwatch

I developed a website and also created a mobile.html version, with the desire to seamlessly switch between the two based on screen

I have two files, home.html and mobilehome.html, and I am trying to switch between them when the screen width goes below a certain size. if (screen.width <= 600) { document.location = "HomeMobile.html"; } This approach works well in Respon ...

jqueryhtmlcssviewport

Dynamic use of a mixin in LESS allows for greater flexibility in

Is it possible to dynamically call a mixin in Less CSS? An interesting use case could be creating a style guide: // Define the mixin that needs to be called .typography-xs(){ font-family: Arial; font-size: 16px; line-height: 22px; } // A mixin att ...

csslessmixins

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

cssreactjsdomdom-events

Troubleshooting Limitation Problem with Bootstrap Multiselect

I recently created a multiselect dropdown menu using Bootstrap Multiselect. I successfully set a limit on the number of options that can be selected (in this case, 5), and once the limit is reached, the additional options become disabled. Everything works ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with ellipsis not functioning correctly on dynamic placeholders when they are in focus

When I focus on my dynamic placeholder input, the text-overflow: ellipsis property is lost for some reason. However, it is regained when blurred. Can anyone explain why this is happening? If you want to experiment with it, I have set up a stackblitz: htt ...

htmlcssangular

Tips for creating a subclass using jQuery

I am familiar with selecting the class "myClass" using $(".myClass"), but my question is how do I select the child link within an element with the class "myClass" using jQuery? Here is a sample of the code: <a href=#>Home</a> <div class ...

jqueryhtmlcss

An interactive top navigation bar paired with three dynamic columns housing scrollable content, all crafted seamlessly with Bootstrap 4

I recently updated my layout using bootstrap but I am facing a glitch. I want the layout to have fixed scrolling only within the columns, without affecting the entire page. Everything works fine until I add some text inside any of the columns, then the who ...

cssbootstrap-4

Modal Pop-ups Failing to Open on Subsequent Attempts

My table consists of buttons on the right-hand side for a menu. The first button in the menu is supposed to open a modal box upon clicking. However, the first buttons in the subsequent rows do not function as expected and fail to open the modal. Refer to t ...

javascripthtmlcss

Comparison of Head.js screen size and CSS3 @media query: benefits of prioritizing the former

What are the benefits of using Head.js screen size detection instead of CSS3 media queries? Head.js Screen Size Detection .lt-1024 #hero { background-image: (medium.jpg); } CSS3 @media query @media only screen and (max-width: 1024px) { #hero { back ...

csshead.js

"Encountered an issue with initiating the Chrome process" - Notification from Selenium WebDriver Error

Having trouble diagnosing why my Selenium isn’t functioning properly. I’ve been scouring through the Heroku documentation to figure out how to manage using a Selenium web driver when deployed on Heroku, but recently encountered this bug: Traceback (mos ...

pythongoogle-chromeselenium-webdriverselenium-chromedriverseleniummanager

What is preventing ShowViaLink() from functioning properly in Firefox and Internet Explorer?

I am facing an issue with my webpage where the navigation does not work on Firefox or IE, but it works perfectly fine on Chrome. I suspect that the problem lies in this code, as when I made changes to it, the navigation stopped working on Firefox & IE: ...

javascriptjqueryhtmlcss

Empty HTML elements

Is there a way to create empty HTML tags, meaning tags that have no predefined styling or effect on the enclosed content or its environment? For example, <p> creates a paragraph, <b> makes text bold, and <div> forms a container. I am in ...

htmlcsstags

Problem with items overlapping in hoverable drop-down menu

I have been attempting to create a hoverable dropdown menu, but I am encountering an issue where the items of the dropdown are overlapping. Despite my efforts to adjust the CSS classes, I have not been successful in fixing this problem. Additionally, I ha ...

htmlcss

Locator for finding compound text within a div class using Selenium WebDriver

I am struggling to select a specific button in the UI that shares similarities with other elements. Below is the code snippet for the button in question: <div class="ui green ok inverted button"> <i class="checkmark icon"></i> Yes </d ...

htmlcssseleniumxpathwebdriver

What is the process for obtaining Style.css, additional CSS, and JavaScript files from a live single page website?

I am currently facing a challenge with a live single page website where I need to make some fixes. Unfortunately, I am unable to access the Style.css file, along with other css and javascript files. Although I managed to save the html file by using Ctrl+s, ...

javascriptjqueryhtmlcss

Issue with the Ajax auto-complete feature in Internet Explorer

I am facing an issue with my "ajax suggestion list" getting hidden behind the "select menu" located right below the text box that triggers the ajax function. This problem only occurs in IE 6.0, while it works fine in other browsers. I have already disabled ...

javascriptcssajaxinternet-explorer