CODEWITHSUNDEEP
htmlcssresponsive-designbackground
Crashy
Crashy

Reputation: 345

How to fill the Background in Mobile with an image

I tried to put an image as a background. On desktop it works very well but when I try with my phone it doesn't work. I can't understand why because I put cover as a background-size and on the mobile it should cover all the space.

this is the code:

CSS

body { 
    background-image: url('/nutickets/images/bluenight.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/nutickets/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

</body>

</html>

image on my phone:

enter image description here

If I check with the Toogle device toolbar of chrome everything is all right but when I try with my smartphone doesn't work. I flushed the cache, I tried in incognito, I tried with different mobile browser but nothing.

Upvotes: 0

Views: 422

Answers (1)

Bobby Speirs
Bobby Speirs

Reputation: 667

This worked for me on my android device - try forcing the html element to cover the full height of the device:

html {
    min-height: 100%;
}

Upvotes: 2

Related Questions