Html 减小浏览器大小时重复图像_Html_Css

Html 减小浏览器大小时重复图像

html css

Html 减小浏览器大小时重复图像,html,css,Html,Css,在我的登录页面中，只要减小浏览器大小，背景图像就会自动重复。我再次搜索，并应用所有可用的建议和代码，但未能删除重复。所以请帮我消除这种重复 <html> <head> <meta charset="UTF-8"> <title>Login</title> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user- s

在我的登录页面中，只要减小浏览器大小，背景图像就会自动重复。我再次搜索，并应用所有可用的建议和代码，但未能删除重复。所以请帮我消除这种重复

<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>


登录
.alertify notifier.ajs-message.ajs-error{
颜色：白色；
}
登录

如果没有小提琴或类似的东西，很难看出哪里出了问题，但是有一个CSS属性，名为，这可能就是您正在寻找的。如果要避免背景图片平铺在

div

的整个区域上，应将其设置为

no repeat

根据您的评论，您还需要

背景尺寸：封面

，以保持尽可能大的尺寸。请注意，如果背景图像的纵横比与容器大小不相同，则这将剪切掉背景图像的一部分。

如果没有可用的小提琴或类似的东西，很难看出哪里出了问题，但有一个名为CSS的属性，这可能就是您正在寻找的。如果要避免背景图片平铺在

div

的整个区域上，应将其设置为

no repeat

根据您的评论，您还需要

背景尺寸：封面

，以保持尽可能大的尺寸。请注意，如果背景图像的纵横比与容器大小不同，则这将剪切背景图像的一部分。

添加如下样式

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


身体{
背景图像：url（'../../../Images/BackgroundImages/Login.jpg'）；
背景重复：无重复；
背景尺寸：封面；
}

添加如下样式

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


身体{
背景图像：url（'../../../Images/BackgroundImages/Login.jpg'）；
背景重复：无重复；
背景尺寸：封面；
}

根据您试图实现的100%覆盖率，您还需要在样式中使用

背景尺寸：覆盖

。您还可以使用

background position

属性来定位背景图像，因为当您使用封面时，它将以不同的大小进行不同的裁剪，因为它被设置为无论大小都填充。我通常将媒体查询与

背景位置

结合使用，以确保它在不同尺寸下看起来都不错

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

根据您试图实现的100%覆盖率，您还需要在样式中使用

背景尺寸：覆盖

。您还可以使用

background position

属性来定位背景图像，因为当您使用封面时，它将以不同的大小进行不同的裁剪，因为它被设置为无论大小都填充。我通常将媒体查询与

背景位置

结合使用，以确保它在不同尺寸下看起来都不错

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

尝试使用

背景大小：包含和背景重复：无重复

<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()">



要查看contain
和cover之间的差异，请参见此处：
尝试使用背景大小：包含和背景重复：无重复

<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()">



要查看contain
和cover之间的差异，请参见此处：
请仅显示相关代码。你试过背景重复：无重复吗？我想只要在你的体型中设置背景重复：无重复，然后就可以了。使用jQuery的最好方法是创建多个类，并根据屏幕大小添加/删除类，这将解决您的问题您也可以这样想：）您也可以使用背景大小：封面
是的，我也尝试过背景重复：否重复它的工作，但当我减少浏览器宽度时，图像高度比浏览器高度减少得多请仅显示相关代码。你试过背景重复：无重复吗？我想只要在你的体型中设置背景重复：无重复，然后就可以了。使用jQuery的最好方法是创建多个类，并根据屏幕大小添加/删除类，这将解决您的问题您也可以这样想：）您也可以使用背景大小：封面
是的，我也尝试过背景重复：不重复，这是有效的，但当我减小浏览器宽度时，图像高度比浏览器高度降低得小得多35; Lazar_Ljubenvic是的，我也尝试过背景重复：不重复，这是有效的但是，当我减小浏览器宽度时，图像高度的减小比浏览器高度的减小要小得多。不知道你在没有复制的情况下想要什么。我使用了背景重复：无重复；背景尺寸：封面；但通过这些属性，当我调整浏览器大小时，图像高度受到干扰#Lazar_Ljubenvic是的，我也尝试过背景重复：不重复，这是有效的，但当我减小浏览器宽度时，图像高度的降低比浏览器高度小得多更新了答案。不知道你在没有复制的情况下想要什么。我使用了背景重复：无重复；背景尺寸：封面；但是通过这些属性，当我调整浏览器的大小时，图像的高度被干扰了，我使用了背景重复：无重复；背景尺寸：封面；但通过这些属性，当我调整浏览器大小时，图像高度受到干扰。#Suvana_Chavan问题仍然存在；背景尺寸：封面；但通过这些属性，当我调整浏览器大小时，图像高度受到干扰。#Suvana_Chavan问题仍然存在。