css - 如何让背景图像不重复并占据整个部分？-6ren

css - 如何让背景图像不重复并占据整个部分？

转载作者：太空宇宙更新时间：2023-11-04 04:42:51

29

4

我的站点位于 avidest.com/test。我试图让背景图片从页面顶部向下延伸到“我们的在线服务”部分。出于某种原因，它提前结束并且有一段页面可以看到黑体背景。我不想显示这个黑色部分。这是 CSS:

.header {
 /*background: #f0f7f7 url(images/header_bg.gif) top repeat-x;*/
    background: transparent;
    padding: 0;
    margin: 0 auto;
    height: 70px;
}

.block_header {
    margin: 0 auto;
    width: 980px;
    padding: 0;
    border: none;
}

.logo {
    float: left;
    padding: 0;
    margin: 0;
    width: 242px;
}

.uppercontain {
    background: url(images/slider_bg.gif) no-repeat;
    background-size: 100%;
    min-width: 1050px;
    min-height: 700px;
}

.slider {
/* background:url(images/slider_bg.gif) no-repeat; background-size: 100%; min-width: 1050px; */
    background: transparent;
    margin: 0 auto;
    padding: 0;
    height: 100%;
}

.slider .gallery {
    margin: 0 auto;
    width: 1050px;
    height: 383px;
    padding: 0;
} /*width was 880px*/
.slider .formbox {
    float: right;
}

这是它在页面上的显示方式:

<body bgcolor="#000000">
    <div class="main">
         <div class="uppercontain">
            <div class="header">
                 <div class="block_header">
                      <div class="logo"><a href="index.html"><img src="images/logo.gif" width="242" height="94" border="0" alt="logo" /></a></div>
                 </div>
            </div>
            <div class="slider">
                 <div class="gallery">
                     <div class="form box"> Form is here </div>
                 </div>
            </div>
         </div>
    Rest of content
    </div>

最佳答案

CSS3 添加了背景大小属性:http://www.w3schools.com/cssref/css3_pr_background-size.asp您可以在 IE9 及更高版本中使用 http://caniuse.com/#feat=background-img-opts

否则，您的选择是使用更大的背景图片或在内容后面使用带有图片的 div

关于css - 如何让背景图像不重复并占据整个部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15080642/

29

4

0

文章推荐： python - 合并/平均比给定半径更近的邻居

文章推荐： c - 使用 C 变量进行内存寻址

文章推荐： c - 如何心跳X11屏保？

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

css - 如何让背景图像不重复并占据整个部分？