Ảnh nền CSS không hiển thị trên thiết bị Android

Tao đang mới học làm web dev thôi, tự làm cái website riêng. Website vào đây xem thử nè

https://www.shafirpl.com/

Vấn đề là khi tao load trang web trên iPhone (cả Chrome lẫn Safari) hay máy tính để bàn (như MacBook) thì ảnh nền hiện lên bình thường. Nhưng mà trên điện thoại Android (tao thử trên Pixel XL và Samsung Galaxy S8+) thì ảnh nền lại không hiện. Kì lạ hơn nữa là tao dùng Chrome trên iPhone 7 Plus thì ảnh nền load ngon lành, nhưng dùng cùng trình duyệt Chrome đó trên Pixel XL lại không load được ảnh nền.

Tao đã include phần code HTML và CSS liên quan rồi. Website chạy trên server Express (Node.js), và tao dùng cả Bootstrap lẫn CSS tự viết.

Đây là file CSS:

body{ background: url(/images/image3.jpg); background-size: cover; background-position: center; font-family: 'Lato', sans-serif; color: orange; } #content{ text-align: center; /* This will bring down the content to the middle of the page Instead of giving a hard number, using percentage will make it more responsive, since it will resize the padding to 25% according to the screen view or avialable screen area */ padding-top: 25%; /* This will set the blur effect */ text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); }

Đây là code EJS/HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Shafi</title> <!- This is the google font lato -> <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"> <!- Bootstrap Cdn -> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!- This is our own style sheet, we are adding it after bootstrap so that it has highest precedence compared to bootstrap, remember in css, the one comes late has more precedence -> <link rel="stylesheet" href="/stylesheets/homepage.css"> <!- Fontawesome cdn -> <link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"> </head> <body> <!- The navbar -> <nav class="navbar navbar-inverse"> <div class="container"> <!- Brand and toggle get grouped for better mobile display -> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Shafi</a> </div> <!- Collect the nav links, forms, and other content for toggling -> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <!- This active class will make the home appear highlighted or active -> <li class="active"><a href="/">Home</a></li> <li><a href="/about">About Me</a></li> <li><a href="/experience">Work Experience</a></li> <li><a href="/protfolio">Protfolio</a></li> <li><a href="/education">Education</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/resume" target="_blank"><i class="fas fa-file"></i> My Resume </a></li> <li><a href="/contact"><i class="fas fa-envelope"></i> Contact</a></li> </ul> </div><!- /.navbar-collapse -> </div><!- /.container-fluid -> </nav> <!- This is for the background image -> <div class="container"> <div class="row"> <div class="col-lg-12"> <!- Centering everything with this div -> <div id="content"> <h1>Hello World! This Is Shafi</h1> <h3 class="bolder">Student & Passionate Software Engineer</h3> <hr> <a href="/about"><button type="button" name="button" class="btn btn-default btn-lg" href="/about"><i class="fa fa-laptop-code"></i> About Me</button></a> </div> </div> </div> </div> <% include ../partials/footer.ejs %>

Có ai giúp được không?

Thanks!

Link nội dung: https://melodious.edu.vn/anh-nen-sans-a94546.html