CSS to set background image fixed on android mobile phones?

how to set background image in mobile view
responsive background image css tricks
css background image size to fit screen
background image not scaling on mobile
mobile background image size
fluid background image css
best css background image
conditional background image css

I have set a fixed background image on my website and it looks fine on desktops and all browsers on desktop but on android phones it tiles and repeats it. I cannot find a work around this. Here is the code.. If someone has a fix for keeping a background image fixed without repeating on android Chrome please let me know.. thanks. Please exclude any comments that will not help.

the CSS:

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    width: 100%;
    background-image: url("images/320htmlbackground.png");
    background-attachment: fixed;       
}

also tried this but didn't work.........

html { 
    background: url("images/320htmlbackground.png") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Try this:

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    width: 100%;
    background-image: url("images/320htmlbackground.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;       
}

Hi, I'm trying to use background image that would auto resize (width and I've used the code below, however it doesn't work on smart phone (android). center fixed; -webkit-background-size: cover; -moz-background-size: cover; I've added following property to body and that seems to solved the issue on smart phone  According to caniuse Android has a problem with background-size. Android 2.1 doesn't appear to honor background-size, only -webkit-background-size, which requires both width and height to be

I just had a similar problem but I'm not sure if it's the same one or not. My problem was that the background image wasn't staying in the same place as you would expect from a fixed image. I.e. when I scrolled up and down the background image moved with the page.

It turned out that I had set the background on the body tag. It worked fine on all browsers except on my phone. I changed the background to be on the html tag and it stays where it should without moving as I scroll.

Hi I have a div with a background image set in css. .test1{ background: url("/dist​/img/4.svg") no-repeat top center fixed; background-size:  Select 'Set' then choose either 'Set Lock Screen,' 'Set Home Screen' or 'Both.' [full_width_ad] Method Two: Go to the 'Photos' app and select the photo you want to use.

For me this works well:

body{
    position: relative;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    @media screen and (max-width: 767px) {
        height: 100%;
        overflow-y: auto;
    }
}

I have several background images, handeled in css via… Strangely, on a mobile phone (Android, Firefox) the background images move 1- Create a Div, after header div, independent from your content div, and call it “image-hero-area” : How to Make Your Images Mobile-Friendly (Responsive Design) by Christopher Heng, thesitewizard.com. Images are standard fare on most websites. They are used either for aesthetic purposes or to convey information. However, since images have a fixed width and height, adjustments need to be made when they are displayed on the small screen of a

i would like to have a fixed image as the backdrop to my site. as i found out ( like so many others before me ) this does not work correctly on chrome on android: unless i use the overflow-x: hidden; on the body, html ( uncomment it in the the other option would be tp have an empty div with height:100vh  Hi I have a div with a background image set in css. But when I resize the page there seems to be a long padding underneath the div. you can see what I mean here:

Hello Support, the fixed background is not displayed on the phone. Do I have to devices. This is on purpose, I think, as the theme.css shows the following rule: CSS /* fix background images for sections */ .uk-background-fixed { background-attachment: fixed; } ist not working on android:-/ Whether it is  The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices we can use the following syntax: @media only screen and (max-device-width: 480px) { }

Most of the time, full-width images don't look that great on mobile view, because they In Beaver Builder 2.2, you can change the background image or any of the Open the row with the background image for editing. See the article on where to put custom CSS code. background-repeat: no-repeat;. Full size background image using CSS cover in mobile devices - fullscreen.css