如何讓我的CSS背景圖像與窗口大小一起縮放？

-1

我正在建立我的第一個現場網站，我注意到背景圖像沒有隨着窗口的縮小而縮小。該網站的其餘部分縮放，但背景圖像看起來好像它的全屏。我只能假設這意味着它不會完全可見，但會在較小的設備中被切斷。是什麼導致這種情況發生，我該如何解決？這種幫助將不勝感激，謝謝如何讓我的CSS背景圖像與窗口大小一起縮放？

我剛剛發佈整個網站無響應的一部分共享我的CSS的通用部分，但其餘的是在的jsfiddle https://jsfiddle.net/zd00nmce/5/

html,body{ 
     min-height: 100vh; 
    } 
    body{ 
     margin: 0px; 
     background-image: linear-gradient(0, rgba(0,0,0,.8) 30%, rgba(0,150,255,.8) 100%), url("images/mainCover.jpg"); 
     background-repeat: no-repeat; 
     background-size: cover; 
    } 
    img{ 
     max-width: 100%; 
    } 
    h1,h2,h3{ 
     font-family: arial; 
     text-align: center; 
     margin: 20px auto; 
    } 
    ul{ 
     list-style: none; 
     text-align: center; 
     padding: 0; 
    } 
    a:visited,a{ 
     color: black; 
    } 
    section{ 
     margin: 5%; 
     color: white; 
    } 
    section > article{ 
     padding: 1em; 
     background-color: rgba(0,0,0,.5); 
     border-radius: 15px; 
     margin: 10px; 
    } 

    section h2, section h3{ 
     text-align: center; 
    } 
    section h2{ 
     font-size: 1.3em; 
     text-shadow: 3px 3px 3px rgba(0,0,0,.5); 
    } 
    section h3{ 
     font-size: 1.1em; 
    } 
    /*nav and header*/ 
    header{ 
     background-color: rgba(255,165,0,.8); 
     display: flex; 
     flex-flow: row wrap; 
     justify-content: center; 
     border-bottom: 8px solid black; 
    } 

    header h1{ 
     text-align: center; 
     margin: 0; 
     padding: 15px; 
     font-size: 1.5em; 
     text-shadow: 5px 5px 5px rgba(0,0,0,.3); 
    } 
    header h1, nav a{ 
     font-weight: 700; 
     font-family: arial; 
    } 

    header nav{ 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
     z-index: 1; 
     // background-color: rgba(255,165,0,.8); 
    } 
    .main-nav{ 
     margin: 0; 
     width: 100%; 
     color: white; 
     font-family: arial; 
     font-weight: 600; 
    } 
    nav ul li{ 
     text-align: center; 
     border: 1px solid white; 
     border-radius: 15px; 
     font-size: 1.2rem; 
     background-color:rgba(255,165,0,.8); 
     width: 100%; 
    } 
    .drop-menu-back{ 
     display: none; 
     width: 100%; 
    } 
    a{ 
     text-decoration: none; 
    } 

    nav a:visited, nav a,h1{ 
     color: white; 
    } 

    .main-nav .current-page { 
     background-color: rgba(0,0,0,.5); 
    } 

     /****drop down menu****/ 
    .characters:hover { 
       position: relative; 
       border-radius: 8px 8px 0 0; 
       } 

     .drop-menu{ 
       position: absolute; 
       visibility: hidden; 
       display: block; 
       top: 38px; 
       white-space: nowrap; 
       left: -2px; 
       background-color: rgba(255,165,0,.8); 
       border: 1px solid rgba(0,0,0,.02); 
       box-shadow: 5px 5px 5px 2px rgba(0,0,0,.3); 
       opacity: 0; 
       transition: opacity 300ms ease-in-out 0s; 
       z-index: 1; 
       } 
     .characters:hover .drop-menu{ 
       visibility: visible; 
       opacity:1; 
      }

來源

2017-06-15 alexis

請將您的示例代碼簡化爲[最小，完整和可驗證的示例]（https://stackoverflow.com/help/mcve），並解釋您試圖實現的目標，而不是實現目標。 *即*看起來您希望背景圖像「縮小」以適合，但是應該如何在電話上查看*例如*肖像;是圖像寬度和寬高比的優先級，還是背景覆蓋率;如果圖像保持完全可見或裁剪可接受*等*？ –

嘗試將其添加到身體在你的CSS：

background-position: center center;

這將居中您的形象，並保持調整大小時的縱橫比。

// Lars

來源

2017-06-15 22:16:02 Flotmand

CSS技巧有一個有用的解決方案。

https://css-tricks.com/perfect-full-page-background-image/

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

我相信這應該是你在找什麼。

來源

2017-06-15 22:51:25 hypern00b

謝謝background-size不完全支持？ – alexis

如何讓我的CSS背景圖像與窗口大小一起縮放？

回答

相關問題