HTML如何让Body的背景图覆盖整个页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML如何让Body的背景图覆盖整个页面相关的知识，希望对你有一定的参考价值。
参考技术A需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，新增样式代码：background-image: url(image.jpg);background-size: 100%。
3、浏览器运行index.html页面，此时body的背景图片整个覆盖了页面，没有白框。
去除背景图片后首页底部的白色区域
【中文标题】去除背景图片后首页底部的白色区域【英文标题】：White area at bottom of home page after removing background image 【发布时间】：2015-07-31 04:41:28 【问题描述】：我有一个简单的问题，很可能会有一个简单的解决方案。我检查了其他线程，但似乎没有一个能正确解决我遇到的问题。
我的问题：我的主页底部有一个空白。
我的目标是有一个纯黑色背景和顶部导航栏的页面，黑色背景覆盖整个页面并且没有滚动条。目前，我无法让 body 元素覆盖黑色页面的高度，因此我在页面内容下方看到了一个大的空白区域。
我试过弄乱边距和填充，但我想我可能在错误的位置做。
我的网站：www.hallofheroclix.com（完成时颜色全黑）
非常感谢任何帮助。非常感谢您！
【问题讨论】：
你为什么不给 body 本身指定黑色背景色？ 【参考方案1】：您尚未为正文指定背景颜色。
请在正文中添加背景 CSS 属性：
body
color: #141412;
line-height: 1.5;
margin: 0;
background: #000000;
谢谢
【讨论】：
我不敢相信我忽略了这么简单的事情！那行得通！非常感谢。【参考方案2】：**Try this instead**
I have looked you coding, i have made some changes to html structure and added some css.You can add / update this css to your css file style.css.
**Css**
<style>
.navbar
text-align: center;
background-color: rgb(255, 242, 0);
position: static !important;
top: -230px;
html, body
height: 100% !important;
.main-container
background-color: red;
height: 301px;
#page
height: auto;
min-height: 100%;
background-color: #000;
</style>
**Html**
<header id="masthead" class="site-header" role="banner">
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<button class="menu-toggle">Menu</button>
<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
<div class="nav-menu"><ul><li class="page_item page-item-6"><a href="">BP</a></li><li class="page_item page-item-20 current_page_item"><a href="">Home</a></li><li class="page_item page-item-24"><a href="">Test Subject</a></li></ul></div>
<form role="search" method="get" class="search-form" action="">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
</header><!-- #masthead -->
<div class="main-container">
<a class="home-link" href="# title="My Site" rel="home">
<h1 class="site-title">My Site</h1>
<h2 class="site-description">Cool logo coming soon!</h2>
</a>
</div>
<div id="main" class="site-main">
【讨论】：
以上是关于HTML如何让Body的背景图覆盖整个页面的主要内容，如果未能解决你的问题，请参考以下文章