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

Question

提问by Make

I have made a simple login page and set an image as background but it is not fitting to browser screen.I am using html for this purpose what should I do fit the image to browser screen.Kindly please describe in detail.

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

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

回答by Kiel Labuca

You can achieved what you want by creating a .css file and link to your <head>tag just after the </title>(closing title tag).

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

Hi-Resolution image will be good to use, around 2112x1584 pixels but consider the file size because it will matter for the page load time.

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

On the opening of your <body>tag, just delete the background property as it will be declared through the .css file.

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

When your image is ready, put this code to your .css file

当您的图像准备好后，将此代码放入您的 .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;
}

When your .css file is done, you can link it to the <head>tag. It will look something like this: <link rel="stylesheet" type="text/css" href="yourCSSpath/yourCSSname.css" />

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

That's how i make a background image to fit the browser screen.

这就是我制作背景图像以适合浏览器屏幕的方式。

Answer 2

回答by Ashisha Nautiyal

use background size: cover property . it will be full screen .

使用背景尺寸：cover 属性。它将是全屏的。

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

here is fiddle link

这是小提琴链接

Answer 3

回答by Lebone Mcdonald

Found an easier way to set it. Here's the html and css:

找到了一种更简单的方法来设置它。这是 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) being the image stored in your solution in a folder called Images. Hope it helps. Note: I used the id "body" because the navigation bar was somehow overriding my background image.

url(../Images/abcd.jpg) 是存储在解决方案中名为 Images 的文件夹中的图像。希望能帮助到你。注意：我使用了 id“body”，因为导航栏以某种方式覆盖了我的背景图像。

Answer 4

回答by Meric

I encounter same trouble as you, this is my solution.

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

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

Answer 5

回答by Raptor

Some answers already pointed out background-size: coveris useful in the case, but none points out the browser support details. Here it is:

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

Add this CSS into your stylesheet:

将此 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;is optional for Firefox, as Firefox starts supporting the value coversince version 3.6. If you need to support Konqueror 3.5.4+ as well, add -khtml-background-size: cover;.

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

As you're using CSS3, it's suggested to change your DOCTYPE to HTML5. Also, HTML5 CSS Reset stylesheet is suggested to be added BEFORE your our stylesheet to provide a consistent look & feel for modern browsers.

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

Reference: background-size at MDN

参考：MDN 上的背景尺寸

If you ever need to support old browsers like IE 8 or below, you can still go for Javascript way(scroll down to jQuery section)

如果您需要支持 IE 8 或以下的旧浏览器，您仍然可以使用Javascript 方式（向下滚动到 jQuery 部分）

Last, if you predict your users will use mobile phones to browse your website, do not use the same background image for mobile web, as your desktop image is probably large in file size, which will be a burden to mobile network usage. Use media query to branch CSS.

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

Answer 6

回答by Priya jain

Try This Code:It may help you

试试这个代码：它可能对你有帮助

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

回答by Kumar Shanmugam

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 8

回答by Karuppiah RK

add this css in your stylesheet

在你的样式表中添加这个 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 9

回答by Vijay Patel

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 如何使用html设置适合浏览器的背景图像

提问by Make

回答by Kiel Labuca

回答by Ashisha Nautiyal

回答by Lebone Mcdonald

回答by Meric

回答by Raptor

回答by Priya jain

回答by Kumar Shanmugam

回答by Karuppiah RK

回答by Vijay Patel

相关推荐

最近更新

标签

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

提问by Make

回答by Kiel Labuca

回答by Ashisha Nautiyal

回答by Lebone Mcdonald

回答by Meric

回答by Raptor

回答by Priya jain

回答by Kumar Shanmugam

回答by Karuppiah RK

回答by Vijay Patel

相关推荐

Html 你能在图像上覆盖一个透明的div吗

Html HTML5 视频不能仅在 Chrome 中播放

Html 无法在 chrome 中寻找 html5 视频或音频

如何防止我的 html 表格拉伸

相关推荐

最近更新

标签