Originally, on laptops and desktop computers, Huihui's background often couldn't be fully displayed, only half of the body could be shown. But when viewing my blog on a mobile phone, it's perfect...
So I used a personalized approach and set different backgrounds for different devices:
/* Detect 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;
}
}
/* Detect 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;
}
}
/* Detect 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;
}
}