【问题标题】:How to resize a html background picture inside body tag如何在body标签内调整html背景图片的大小
【发布时间】:2014-10-28 14:13:02
【问题描述】:

我想在我的 html 中添加一个背景图片 (bg.png),但我想调整该图片的大小,以便它始终填满整个页面。我是这样做的:

.stretch {
width:100%;
height:100%;}

#background {
width: 100%; 
height: 100%; 
position: fixed; 
left: 0px; 
top: 0px; 
z-index: -1; }

身体内部:

<div id="background">
<img src="bg.png" class="stretch">  
</div>

所以我现在在网站上使用 CMS (e107),并且我想要我的 html 中的背景,我更改了图片但我不知道如何在那个 css/php 文件中使用它。

这是在主题的 css 中:

body 
{
font-size: 12px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 87%;
border-color: #39393b;
border-width: 0px;
border-style: solid;
color: #C0C0C0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #444440;
text-align: center;
background-image: url(images/bg.png);
background-repeat: repeat-x;
}

我怎样才能在这个 css 中添加这个拉伸?

【问题讨论】:

  • 您可以使用背景尺寸:封面;在你的身体上设置整个元素上的 bg.png。

标签: html css image background content-management-system


【解决方案1】:

这可能就是你要找的东西

body { 
    background: url('images/bg.png') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
}

【讨论】:

  • 请注意 background-size 属性与 IE9+ 兼容,尽管对于 IE8,Mozilla Doc 说“可以使用非标准的 -ms-filter 函数来模拟其某些功能”,请参阅 @ 987654321@
猜你喜欢
  • 2020-04-23
  • 1970-01-01
  • 2011-03-18
  • 1970-01-01
  • 2022-07-12
  • 2021-02-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多