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

jquery-enhanced tabs with versatile functionality

HTML: <ul class="tabs"> <li><a href="#tab-one" class="current">Residential</a></li> <li><a href="#tab-two">Commercial</a></li> <li><a href="#tab-three">Agricultural</a></li> < ...

jqueryhtmlcss

Is there a way to align my horizontal menu with the top of the screen without encountering the hover problem?

I'm trying to make my horizontal navigation bar stay at the top of the screen. The issue is that when I set the top property to 0, the menu sticks to the top but the initial menu item is obscured when hovered over. If I remove the top property, the ho ...

phphtmlcss

HTML div ID displaying incorrectly

My main div on the page has the attribute align="center", but it does not seem to align in the center. If you'd like to see the page for reference, click here. This is the CSS: #page{ background-color: #4C1B1B; width:85%; height:500px; ...

csshtmlalignment

The reverse is concealed following a CSS flip transition

After applying a CSS flip animation to a card, the backside isn't visible once flipped. Here is the HTML code for the card component named "ptree-card": <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- Rest of th ...

htmlcss

Tips for utilizing the viewport to ensure that mobile devices adjust to the width of the content

Currently, I am designing a book reader where the width of the book can vary, ranging from 1028px to 2000px to 560px. I want mobile devices to automatically scale the book to fit the screen width when viewing it. This is what I have been doing so far wit ...

htmlcssmobileviewport

The scrollbar remains unresponsive and fixed until the screen size is adjusted

Need some assistance with a website project for a client. The scrollbars on each page are not loading or changing height until the window is resized. I have a jQuery scrollbar in place, but disabling it does not solve the issue as the normal scrollbar beha ...

jquerycsshtmlscrollbar

Responsive dropdown menu in Bootstrap 5 navbar

Update: I successfully fixed the desktop version. Now, I just need to work on making it responsive for mobile. The problem I am encountering is that the dropdown menu doesn't function properly on both mobile and desktop. Although the styling looks go ...

htmlcssmenunavbarbootstrap-5

Responsive background styling with CSS

I'm currently learning how to create responsive websites, and I've encountered an issue. When I resize the website horizontally to a point just before the edge of the screen touches one of the elements, the background also shrinks, leaving white ...

htmlcssreactjs

Glowing semi-opaque about spotify?

Recently, I decided to challenge myself by recreating the Spotify homepage using only pure Javascript and SCSS as a way to test my front-end development skills. You can view my progress so far at this link, although please note that it's still a work ...

csshtml

How to align scrolling images with their scroll origin - a step by step guide

Curious to know the name of the effect where images scroll in a different orientation than the page, creating a 2D appearance. Take a look at the Google Nexus website and scroll down - do you see the effect? What is this effect called? Is it created usin ...

javascriptjquerycssanimation

The beautiful synergy between Vuetify's v-input component and overflow animation

I am having trouble implementing an overflow animation on vuetify's v-text-field component. Despite my efforts, I can't seem to make it work as intended: <script setup> const text = 'very long long long long long text' </scri ...

cssvue.jsvuetify.jsvuetifyjs3

Ways to change the default blue dropdown color in the Chrome browser

When you click on the drop-down menu, a blue color appears when hovered over. I want it to be red instead, but for some reason, it's not working in Chrome browser. Here is the CSS class that I have used: option:checked { box-shadow: 0 0 10px 100p ...

cssasp.net-mvc

Modify the class of rows in table 2 once a particular value of a radio button in table 1 has been selected

One issue I am facing is related to two tables with radio buttons. Each table highlights the corresponding row when a radio button is checked, working independently. However, I need a specific value from table 1 to un-highlight any previously checked rows ...

jqueryhtmlcss

Height of Bootstrap 4 footer aligned to the bottom

I've made a template that sets the height of the footer to 120px and specifies the line-height as well. Here is an example: .footer { height: 120px !important; line-height: 120px !important; } <!doctype html> <html lang="en"> &l ...

htmlcsstwitter-bootstrapbootstrap-4

How can you ensure your CSS code is functional across various browsers?

I have been exploring CSS and HTML for about a week now, but I am facing a challenge that has me stuck for the past thirty minutes. The issue lies in adapting this code to work smoothly across different browsers. While it aligns images in a row of four per ...

htmlcssimagecross-browser

Developing a custom CSS for React using clamp and focus attributes

I'm currently working on creating an object to be used in inline style, but I'm having trouble figuring out how to correctly write `clamp` and `after`. const PhoneInputStyle = { fontSize: clamp("13px", "1.111vw", "16px"), /*this particular ...

javascripthtmlcssreactjs

Arrange the items in the last row of the flex layout with equal spacing between them

How can I arrange items in rows with equal space between them, without a large gap in the last row? <div fxFlex="row wrap" fxLayoutAlign="space-around"> <my-item *ngFor="let item of items"></my-item> </div> Current Issue: htt ...

htmlangularcssflexbox

Adding some extra space inside a flex container using Bootstrap's padding

When attempting to use padding within a d-flex container to separate elements that are placed inline due to the d-flex class, I encountered an issue where the padding was not being applied and did not change anything. If I do not utilize the d-flex class, ...

htmlcsstwitter-bootstrapflexbox

Arrangement of items in a grid with various sizes

I have encountered a challenge that I cannot seem to overcome. In my grid system, there are 18 identical items/boxes. I am looking to remove 4 of those items/boxes and combine them into one large item/box. Refer to the wireframe below for guidance on how ...

htmlcss

Why is it important to incorporate the CSS property background-repeat: repeat; into our code?

It is believed that if you don't expressly mention the background-repeat in CSS styling, browsers will automatically set it as background-repeat: repeat. With this default behavior in place, one might wonder why there is even a need for a separate ba ...

htmlcss