My attempt to set an image as a background was successful on desktop, but unfortunately, it doesn't work on my phone. I have specified 'cover' as the background-size, expecting it to cover all the space on mobile as well.
Here is the code snippet:
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 displayed on my phone:
https://i.sstatic.net/DCefn.png
When using the Toggle device toolbar in Chrome, everything appears fine, but when accessed on my smartphone, the background image does not show. I have already cleared the cache, tried incognito mode, and tested on different mobile browsers, yet the issue persists.