Question

我制作了一个简单的登录页面，并将图像设置为背景，但它不适合浏览器屏幕。我正在使用html，我应该如何使图像适合浏览器屏幕。请详细描述。< / p>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional
//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSP Page</title>
</head>
<body>
<h1>Login Page</h1>
<center>
<h2>SignUp Details</h2>

<body background="Indian_wallpapers_205.jpg">
<form action="LoginCheck.jsp"method="post">
</br>Username:<input type="text" name="username">
</br>Password:<input type="password" name="password">
</br>
<input type="submit" value="Submit">
</form>
</center> 
</body>
</html>

Answer 1

您可以通过创建.css文件并在<head>（关闭标题标记）之后链接到</title>标记来实现您的目标。

高分辨率图像使用效果很好，约为2112x1584像素，但请考虑文件大小，因为它对页面加载时间很重要。

在打开<body>标签时，只需删除背景属性，因为它将通过.css文件声明。

图像准备就绪后，将此代码放入.css文件

body {
background-image: url(imagePAth/Indian_wallpapers_205.jpg); /*You will specify your image path here.*/

-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: top center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}

完成.css文件后，您可以将其链接到<head>标记。它看起来像这样：<link rel="stylesheet" type="text/css" href="yourCSSpath/yourCSSname.css" />

这就是我如何制作适合浏览器屏幕的背景图像。

Answer 2

使用背景大小：封面属性。它会全屏显示。

body{
background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

here is fiddle link

Answer 3

找到一种更简单的方法来设置它。这是html和css：

<style>
    #body {
        *background: url(../Images/abcd.jpg) no-repeat center center fixed; /* For IE 6 and 7 */
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

<body id="body">
    <nav class="navbar navbar-default" id="navColour">
        <div class="container-fluid">
            <div class="navbar-header">
                <a id="clr" class="navbar-brand" href="#">Summer Haze Festival</a>
            </div>
            <div>
                <ul class="nav navbar-nav" >
                    <li id="clr" class="active"><a href="#">Home</a></li>
                    <li id="clr"><a href="#">Page 1</a></li>
                    <li id="clr"><a href="#">Page 2</a></li>
                    <li id="clr"><a href="#">Page 3</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

url（../ Images / abcd.jpg）是存储在解决方案中的图像，名为Images。希望能帮助到你。 注意：我使用了id＆＃34; body＆＃34;因为导航栏以某种方式覆盖了我的背景图像。

Answer 4

在样式表中添加此css

body
    {
        background:url(Desert.jpg) no-repeat center center fixed;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        margin: 0;
        padding: 0;
    }

FIDDLE

Answer 5

试用此代码： 它可能会帮助你

<html>
    <head>
<style>
    body
        {
            background:url('images/top-left.jpg') no-repeat center center fixed;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            margin: 0;
            padding: 0;
        }

    </style>
</head>
    <body>
    <form action="LoginCheck.jsp"method="post">
    </br>Username:<input type="text" name="username">
    </br>Password:<input type="password" name="password">
    </br>
    <input type="submit" value="Submit">
    </form>
    </center> 
    </body>


</html>

Answer 6

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

Answer 7

已经指出background-size: cover的一些答案在案例中很有用，但没有人指出浏览器支持的详细信息。这是：

将此CSS添加到样式表中：

body {
    background: url(background.jpg) no-repeat center center fixed;
    background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
    -webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
    -moz-background-size: cover; /* optional for Firefox 3.6 */ 
    -o-background-size: cover; /* for Opera 9.5 */
    margin: 0; /* to remove the default white margin of body */
    padding: 0; /* to remove the default white margin of body */
}

-moz-background-size: cover;对于Firefox是可选的，因为Firefox从版本3.6开始支持值cover。如果您还需要支持Konqueror 3.5.4+，请添加-khtml-background-size: cover;。

当您使用CSS3时，建议您将DOCTYPE更改为HTML5。此外，建议在我们的样式表之前添加HTML5 CSS重置样式表，以提供一致的外观和对现代浏览器的感觉。

参考：background-size at MDN

如果你需要支持IE 8或更低版本的旧浏览器，你仍然可以选择Javascript way（向下滚动到jQuery部分）

最后，如果您预测您的用户将使用手机浏览您的网站，请不要对移动网站使用相同的背景图片，因为您的桌面图片的文件大小可能很大，这将成为移动网络使用的负担。使用媒体查询来分支CSS。

Answer 8

我遇到了和你一样的麻烦，这是我的解决方案。

body {
    background-image: url(image/background.jpg);
    background-size: 100% 100%;
}

Answer 9

body
{
    position: fixed;  /*fixes the image in background*/
    top: 0; /*fixes the image at top*/
    left: 0; /*fixes the image at left*/
    min-width: 100%; /*fixes the image width to 100% of screen*/
    min-height: 100%; /*fixes the image height to 100% of screen*/
}

如何使用html设置适合浏览器的背景图像

9 个答案: