Originally, on laptops and desktops, Huixi's background often couldn't be fully displayed, only half of the body could be shown. But on mobile phones, my blog looks perfect...
So I adopted a personalized approach and set different backgrounds for different devices:
/* Check if the user is using a mobile device */
@media only screen and (max-width: 767px) {
/* Change the style */
body {
background-image: url(https://img1.imgtp.com/2023/05/01/mhyoOtKF.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.mt-auto:after {
content: "You are currently viewing this webpage on a 'mobile device'";
font-style: italic;
font-weight: bolder;
color: wheat;
}
}
/* Check if the user is using a desktop computer */
@media only screen and (min-width: 768px) and (max-width: 991px) {
/* Change the style */
body {
background-image: url(https://img1.imgtp.com/2023/05/01/EiUP9R8D.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.mt-auto:after {
content: "You are currently viewing this webpage on a 'desktop computer'";
font-style: italic;
font-weight: bolder;
color: wheat;
}
}
/* Check if the user is using a laptop */
@media only screen and (min-width: 992px) {
/* Change the style */
body {
background-image: url(https://img1.imgtp.com/2023/05/01/EiUP9R8D.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.mt-auto:after {
content: "You are currently viewing this webpage on a 'laptop'";
font-style: italic;
font-weight: bolder;
color: wheat;
}
}