CSS - Problem with background image appearing stretched on Samsung mobile devices

Is the Samsung default "Internet Browser" based on another build? It seems to have trouble displaying stretched background images correctly, unlike desktop browsers or Chrome for mobile.

Here is the CSS and HTML I am using:

#bk_img {

    height:100%;
    min-height: 100%;
    min-width: 1024px;


    width: 100%;
    height: auto;

    position: fixed;
    top: 0;
    left: 0;
}


<img src="background.jpg" id="bk_img">

When scrolling down, a white area appears below the background image, approximately 30px high.

css

Answer №1

height: auto; adjusts the image aspect ratio based on width:100%. If your image is resized but you have a scrollbar, the height will be adjusted to maintain the aspect ratio with width:100%.

Answer №2

It's possible that the browser is applying default margin or padding. Have you tried the following code?

#bk_img {
    height:100%;
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}
html, body, img {
    margin: 0;
    padding: 0;
}

<img src="http://sublantic.net/forge/demos/img/code_canyon/scale.png" id="bk_img">

Check out the JSFiddle here: http://jsfiddle.net/5Q4U3/

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

Issue with Material Design Lite input floating label not functioning properly post page navigation

I am currently developing a mobile hybrid application using Material Design Lite, but I have run into a small issue. When I add input field elements to my pages, the floating text and placeholder do not function properly. In my application, I am utilizing ...

angularjshtmlcssmaterial-design-lite

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

My page contains dynamic HTML content that I want to incorporate. The dynamic content consists of only HTML and CSS, without any JavaScript. However, I have some custom global CSS styles and JS logic that need to be implemented along with this dynamic con ...

javascripthtmlcssweb-componentshadow-dom

Clicking on an absolute HTML element will instantly scroll back to the top of the page

Working on a website, I've designed a custom menu that is hidden with 0 opacity and z-index -1. When a button is clicked, the menu will appear on the screen. You can visit to see the site in action. The issue I'm facing is that every time I cl ...

javascriptjqueryhtmlcss

What is the best way to combine a top <div> with a bottom <div> in an image without creating unsightly white gaps?

I need help overlapping two divs on top of an image in HTML. The first div should cover part of the top area of the image, while the second div should cover part of the bottom area of the image. These divs should be displayed over the image without leaving ...

htmlcssweb-frontend

Slider text in Master not adjusting properly for mobile devices

I am at my wits' end trying different solutions to make this work properly. The text on the slider of my homepage appears jumbled up when viewed on a mobile device. I suspect it might be related to responsive design? Could someone please take a look ...

htmlcsswordpressmobilemasterslider

Emphasize a specific portion of the text

While developing a project similar to Google Search using React.js and GoogleAPI, an issue arose. For instance, when searching "tea" on Google, the results display "Searches related to tea" at the bottom. The term "tea" appears in bold. How can this be imp ...

htmlcssreactjsgoogle-api

Is it possible to insert IE conditionals within functions.php in WordPress?

One common practice is to include the following script in the <head> section specifically for Internet Explorer 9. <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Wh ...

phpcsswordpressinternet-explorer-9

An error keeps popping up in the console saying "Module not found"

import React from 'react' import './sidebar.css' import logo from './images/' const sidebar = () => { return ( <div className='sideBar grid'> <div className='logoDiv flex&apo ...

cssnode.jsreactjsjsx

How can we ensure that specific criteria are displayed once a selection is made?

Users have multiple options to choose from. When a user selects one option, I want to display additional options that are dependent on the initial selection. For example, if the user can select between 1 or 2 gates, upon choosing a number I will show all t ...

phpjqueryhtmlcss

Displaying a div based on the response after it is received using an if/else statement

In my form, each question is on a separate page (div), with the ability to show and hide pages. If a user receives a response from the API with a status of "accepted", they are redirected to a URL. I'm currently trying to display a div if their status ...

javascriptjqueryhtmlcssjson

The image will come to life with animation as the background position is adjusted using Skrollr

Trying to create a div that switches the background image every X pixels scrolled. Initially experimented with changing the background-image, including using sprites and adjusting background position, but encountered a distracting "flickering" effect. Exa ...

javascriptjqueryhtmlcssskrollr

Is there a way to modify the color of a checkbox within MUI?

I'm currently customizing the checkbox color in Material UI while using FormIk for data submission. I aim to change the default checkbox color to red, but I'm unsure about how to achieve this. <FormGroup> <Box display=" ...

cssreactjsformsmaterial-uiformik-material-ui

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

javascriptcsshtml

The edges of the cube are not joined together

Looking for a 3D transform cube that can freely flip left and right, with the button fitting into it perfectly. I've found the CSS code to achieve this, but when I set the width of the ".cube" below 200px, the borders of the cube don't connect. I ...

htmlcss

Why does this inner HTML table always adjust its width based on the content within it? Is there a way to make it match the width of its container instead

I'm not very familiar with HTML and CSS, and I've come across a problem. Here is the CSS structure in question: <!-- TECHNICAL REFERENCE: --> <div id="referenteTecnicoTab"> <table width="800px" class="standard-table-cls table-he ...

htmlcsslayoutxhtmlhtml-table

Is there a way for me to extend an absolute div to the full width of its grandparent when it is within an absolute parent div?

Here is a structured example of my HTML and CSS: <div class="grandparent"> <div class="row">...</div> <div class="absolute-parent"> <div class="absolute-child">...</div> ...

javascripthtmlcsscss-position

Creating an Unordered List in GWT that Includes List Items

I've hit a roadblock while trying to create a css-driven menu in GWT. The menu should be rendered exactly like this: <div class="topbar"> <div class="container fixed"> <h3> <a href="" class="logo">test& ...

htmlcssgwttwitter-bootstrap

Numerous elements positioned absolutely are overlapping

I am working on a website with a unique slide layout design. I am currently focusing on two specific slides: https://i.stack.imgur.com/xngF4.png and https://i.stack.imgur.com/W19tJ.png My goal is to include a button on each individual slide, similar to th ...

htmlcsscss-position

Issue with scrolling to the bottom of collapsed sections in Bootstrap

I have a bootstrap collapse panel and I've added a toggle link at the bottom to allow users to expand and collapse the content with a click. The Issue My problem arises when the menu expands, causing it to scroll all the way to the bottom of the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Bootstrap dropdown functionality is not working properly and fails to open when clicked

Can anyone help with this Navber code issue? <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;"> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <a class="navbar-brand" ...

htmlcss