減少瀏覽器尺寸時重複圖片

在我的登錄頁面中，每當減少瀏覽器尺寸時，background-image都會自我重複。我再次搜索它，並應用所有可用的建議和代碼，但未能消除重複。所以請幫我刪除這個重複。減少瀏覽器尺寸時重複圖片

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Login</title> 
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no' name='viewport'> 
    <link href="~/Content/Site.css" rel="stylesheet" /> 
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <link href="~/Content/Themes/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
    <link href="~/Content/Themes/css/AdminLTE.css" rel="stylesheet" type="text/css" /> 
    <style> 
     .alertify-notifier .ajs-message.ajs-error{ 
    color: white; 
} 
    </style> 
</head> 

<body style="background-image: url('../../../Images/BackgroundImages/Login.jpg'); background-size: 100%,100%;" onload="authenticateuser()"> 
    <div class="form-box" id="login-box" style="box-shadow: 0 16px 32px 0 rgba(167, 172, 170, 0.62), 0 24px 80px 0 rgba(0, 0, 0, 0.2);"> 
     <div class="header"> 
      Sign In 
     </div> 

    </div> 
    <!-- jQuery 2.0.2 --> 
    <script src="~/Scripts/JQuery/jquery-3.1.0.min.js"></script> 
    <script src="~/Scripts/modernizr-2.6.2.js"></script> 
    <script src="~/Scripts/jquery.validate-vsdoc.js"></script> 
    <script src="~/Scripts/bootstrap.js"></script> 
    <script src="~/Scripts/alertify.min.js"></script> 
</body> 
</html>

來源

2016-08-31 M.K.S

請只顯示相關的代碼。你嘗試過「背景重複：不重複」嗎？ – Justinas

我認爲只是設置背景重複：不重複在你的身體風格然後完成。 – Anami

最好的方式來處理使用jQuery，創建多個類和添加/刪除基於屏幕大小的類，這將解決您的問題 –

這是非常困難的，看看有什麼錯誤沒有工作小提琴或類似的東西，但有一個名爲background-repeat CSS屬性這可能是你在找什麼。如果要避免背景圖片在div的整個區域上平鋪，則應將其設置爲no-repeat。

根據你的評論，你還需要什麼是background-size: cover保持最大的可能尺寸。請注意，如果與容器大小的長寬比不相同，則會剪切出背景圖像的一部分。

來源

2016-08-31 10:41:24

#Lazar_Ljubenvic是的，我也試過背景重複：沒有重複它的工作，但是當我減少瀏覽器寬度圖像高度減少了很多，比瀏覽器的高度更小 –

更新了答案。不知道你沒有複製後的情況。 –

我已經使用了background-repeat：no-repeat;背景尺寸：蓋;但通過這些屬性，當我調整我的瀏覽器的圖像高度不安 –

添加樣式如下

<style> 
body { 
    background-image: url('../../../Images/BackgroundImages/Login.jpg'); 
    background-repeat: no-repeat; 
    background-size:cover; 
} 
</style>

來源

2016-08-31 10:47:07

我已經使用背景重複：不重複;背景尺寸：蓋;但通過這些屬性，當我調整我的瀏覽器圖像高度干擾。 –

#Suvana_Chavan問題依然存在。 –

在你試圖用100％的覆蓋率，您還需要使用您的樣式background-size: cover完成什麼根據。您還可以使用background-position屬性來定位您的背景圖片，因爲當您使用封面時，它會以不同的尺寸進行不同的裁剪，因爲它被設置爲填充而不管大小。我通常將媒體查詢與background-position結合使用，以確保它在不同尺寸下看起來不錯。

<body style="background-image: url('../../../Images/BackgroundImages/Login.jpg'); background-size: cover; background-repeat: no-repeat" onload="Verify()">

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

來源

2016-08-31 10:50:41

嘗試使用background-size:contain和background-repeat:no-repeat

<body style="background-image: url('../../../Images/BackgroundImages/Login.jpg'); background-size: contain; background-repeat:no-repeat" onload="Verify()">

你可以寫它簡化爲：

<body style="background: url('../../../Images/BackgroundImages/Login.jpg') no-repeat scroll center center/contain transparent;" onload="Verify()">

看到之間的差異和cover請看這裏： Difference between background-size:cover and background-size:contain

來源

2016-08-31 12:02:50

回答

相關問題