怎样用css 使背景图片覆盖整个页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样用css 使背景图片覆盖整个页面相关的知识,希望对你有一定的参考价值。

这是我的代码:
body
margin:0px;padding:0px;
background-image:url(8.jpg);
width:100%;

但显示的结果是图片并不能覆盖整个页面,请各位高手指点下。最好没有repeat,只要拉伸图片即可。

覆盖整个页面也就需要图片占据整个屏幕或者占据整个html元素;
在css3出来之后,有一个属性background-size;
这个属性可以给背景图片设置大小,当值为100% 100%的时候也就是说把图片宽高都设置成百分百,然后元素有多大,图片就会伸展多大,也就是说的整个页面
参考技术A 你这么设置就可以了。 我刚刚用你的这个代码了, 完全好用。 如果说你的图片太小
就得设置Repeat了。 如果 图片尺寸正好能够满足你整个网站设计尺寸的需要,就不用设置了。

希望对你有帮助。追问

是图片太小的问题,但要用repeat的话,网页中会有痕迹。

追答

这个 你只能用Ps 对图片做修改了。 代码解决不了你的需求了。 或者说你从新照一张大图来做你的背景。

追问

嗯 好的,也只能这样了 谢谢啊。

追答

呵呵, 没事, 以后有问题可以问我。 共同进步

参考技术B 如果你不是想平铺的,那你把8.jpg这个图片改大就行了。例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body
background-image: url(http://www.50css.com/temp/home7/images/bg.png);
background-repeat:no-repeat;
background-position:center top;
background-color:#e6e6e6;

</style>
</head>
<body>
123<br />
123<br />
123<br />
123<br />
123<br />
123<br />
123<br />
</body>
</html>
这个的背景在大部分情况下都是覆盖整个页面的,也没有平铺。
参考技术C 加一段css
html, bodyheight:100%
参考技术D repeat 或者background-size:100%

CSS:设置 background-size:cover 属性以覆盖 div 而不是整个屏幕

【中文标题】CSS:设置 background-size:cover 属性以覆盖 div 而不是整个屏幕【英文标题】:CSS: Set background-size: cover property to cover div instead of whole screen 【发布时间】:2017-12-13 01:01:53 【问题描述】:

我知道 CSS 中的 background-size:cover 属性使背景图像尽可能大,以覆盖整个屏幕。但是,因为这会在大屏幕上扭曲图像,所以我希望能够使背景图像覆盖它所在的 div 容器的宽度和高度,而不是整个屏幕的宽度。我不知道该怎么做。即使将我的图像放在 HTML 中的 div 中,background-size:cover 属性仍会将图像扩展到整个屏幕。

我的 CSS 是:

.main 
  height: 30vh;
  text-align: center;
  background: url("https://i.imgur.com/6FYizew.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover

我的 HTML 是:

<div class = "container" style = "padding-top: 5vh">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class = "active hidden-xs"></li>
  </ol>
  <div class="carousel-inner">
<div class="item main active">
    <div class = "hidden-xs" style = "width: 80%; max-width: 1200px; margin: auto; position: relative; top: 15%; padding-top: 30px; padding-bottom: 40px; background-color: rgba(255, 255, 255, 0.8);">
        <h1 class = "hidden-xs" style = "font-size: 5em; font-weight: normal; color: #0b3c5d; font-weight: bold">TITLE</h1>
        <hr class = "intro-divider hidden-xs" style = "width: 550px; background-color: #232f3f">
        <h4 class = "hidden-xs" style = "margin-top: 15px; font-size: 1.5em; color: #232f3f"><em>SUBTITLE</em></h4>
    </div>
</div>

请告诉我如何将封面设置为仅覆盖一个容器而不是整个屏幕。谢谢!

【问题讨论】:

你可以在这里摆弄吗 在此处更新您的 html 代码。实际上,如果我们将该背景图像放在 css 类中,然后如果我们从部门调用它,它将仅显示在该部门中。我希望我能帮助你 @SumithChalil 我在上面添加了我的 HTML。你打电话给部门到底是什么意思? 【参考方案1】:

你没有设置宽度...添加宽度大小,它只会覆盖 .main div

如果你没有在 div 中设置宽度,那么它使用自动宽度属性,这意味着你的 div 覆盖整个剩余的地方...当前你的主 div 覆盖整个页面,这就是你在整个页面上看到背景图像的原因

【讨论】:

嗨,我在上面的 CSS 中添加了 width: 1200px。然而,它并没有改变背景跨越的宽度,它只是改变了主 div 本身的宽度,而背景仍然跨越了整个屏幕。【参考方案2】:

您想将背景显示到容器分区 &lt;div class="container"&gt; 并且在这里您没有调用该类的背景图像,并且如果您检查元素,您可以看到您的容器分区正在填充整个屏幕。 所以只需浏览上面的屏幕截图,如果我们将图像添加到容器分区,那么它看起来就像上面一样。如果您正在寻找,那么只需添加 容器类的样式如下

<style>
.container 
  background: url("https://i.imgur.com/6FYizew.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover

</style>

我认为这不是您真正想要的,所以只需在纸上画一个布局并发送它,我们可以做到。

【讨论】:

以上是关于怎样用css 使背景图片覆盖整个页面的主要内容,如果未能解决你的问题,请参考以下文章

怎样用css控制整个网页的文字背景是一样的!请高手指点!谢谢~

css样式实现整个页面背景使用一张图片

CSS:设置 background-size:cover 属性以覆盖 div 而不是整个屏幕

css 问题 如何使子层背景覆盖父层背景

css文件 如何使背景图片大小适应div的大小

在CSS中怎用设置可以使背景图片全屏显示?