イメージを繰り返してブラウザサイズを小さくする

ログインページで、ブラウザのサイズを小さくするたびに、バックグラウンドイメージが繰り返し表示されます。私はもう一度それを検索し、利用可能なすべての提案とコードを適用しましたが、繰り返しを削除できませんでした。だから私はこの繰り返しを取り除くのを助けてください。イメージを繰り返してブラウザサイズを小さくする

<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

関連コードのみを表示してください。 'background-repeat：no-repeat'を試しましたか？ – Justinas

私はちょうどあなたの体のスタイルの後に背景リピート：no-repeatを設定したと思う。 – Anami

jQueryを使用して処理し、複数のクラスを作成し、画面サイズに基づいてクラスを追加/削除するには、 –

それは働いフィドルや似たようなことなく、間違っているものを見ることは非常に困難ですが、あなたが探しているものはおそらくですbackground-repeatと呼ばれるCSSプロパティがあります。 divの全領域に背景画像がタイル表示されないようにするには、no-repeatに設定する必要があります。

あなたのコメントに基づいて、他に必要なものは、サイズを最大に保つためにbackground-size: coverです。コンテナサイズと同じアスペクト比でない場合、これはバックグラウンドイメージの一部を切り捨てることに注意してください。

出典

2016-08-31 10:41:24

#Lazar_Ljubenvicはい私もバックグラウンドリピートを試みました：それは仕事ですが、ブラウザの幅を小さくすると、画像の高さはブラウザの高さに比べてはるかに小さくなります –

答えを更新しました。あなたが再生していない後に何をしているか分からない。 –

私はbackground-repeat：no-repeatを使っています。背景サイズ：カバー;しかし、これらの属性を使って私のブラウザのサイズを変更すると、画像の高さが乱れる –

はあなたが、あなたのスタイルでbackground-size: coverを使用する必要があり、100％のカバレッジを達成しようとしているものに基づいて

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

出典

2016-08-31 10:47:07

私はbackground-repeat：no-repeat;背景サイズ：カバー;ブラウザのサイズを変更するときにこれらの属性を使用すると、画像の高さが乱されます。 –

#Suvana_Chavanの問題はまだ存在します。 –

以下のようにスタイルを追加します。カバーを使用すると、サイズに関係なく塗りつぶすように設定されているため、異なるサイズで別々に切り取られるため、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

イメージを繰り返してブラウザサイズを小さくする

答えて

関連する問題