：2018-11-14 18:55
: TabKey9   ：0     ：0  

---

I wanted to find such an example of how to use [@ media] before, but I didn't find it until a long time later. I was not interested in it. I saved it first, and I was afraid I would lose it again.

 <! DOCTYPE html>

 < html  lang = "en" >

 < head >
     < meta  charset = "UTF-8" >
     < title > Using img to realize background image < / title >
     < style >
         *{
             margin: 0;
             padding: 0;
         }
         .bg-res {
             position: fixed;
             top: 0;
             left: 0;
             min-height: 100%;
             height: auto;
             min-width: 1440px;
             width: 100%;
         }
 /*In order to make the screen smaller than 1440, the picture can be displayed in the center*/
         @media screen and (max-width: 1440px) {
         .bg-res {
             left: 50%;
             margin-left: -720px;
         }
         }
     < / style >

 < / head >

 < body >
     < img  src = "bg-img.jpg"  alt = ""  class = "bg-res" >

 < / body >

 < / html >
 ---------------------
 Author: A fish_
 Source: CSDN
 Original text: https://blog.csdn.net/sinat_31102083/article/details/77431487
 Copyright notice: This is an original article of the blogger. Please attach a link to the blog for reprinting!

Add another link that may be helpful: https://www.cnblogs.com/tugenhua0707/p/5260411.html