Question

我正在构建我的第一页，其中有一个部分红色背景。我正在使用div但是无法将其设置在滑块上所需的高度。期望的外观如下; desired looks

相反，div会降低，我不得不更改字体颜色以使其可见，因为您可以检查here。我尝试使用位置，背景来源，但没有得到理想的结果

HTML code：

...

<body>

<div id="redBackground">

<table align="center">
    <!-- firsrt row -->
    <tr><td width="auto"></td></tr>
    <tr><td align="left" width="900"><img src="images/logoNoBackgroundSml.png" width="90" height="93" alt="Ecomir Logo"></td></tr>       

    <tr><td width="auto"></td></tr>
    <!-- second row -->
    <tr><td width="auto"></td></tr>
    <tr><td align="center" width="900">
                <!-- menu definition -->
          <ul id="main-menu" class="sm sm-simple" style="position:relative;z-index:100;">                
                <li><a href="index.html">Principal</a></li>
                <li><a href="historia.html">Historia y Evoluci&oacute;n</a></li>
                <li><a href="calidad.html">Calidad y Medio Ambiente</a></li>
                <li><a href="">Nuestra Actividad</a>
                   <ul>
                     <li><a>Obra Actual</a>
                        <ul>
                           <li><a href=""/>Rehabilitación</a></li>
                           <li><a href=""/>Edificaci&oacute;n</a></li>
                           <li><a href=""/>Obra Civil</a></li>
                        </ul>
                     </li>
                     <li><a href="">Obra Realizada</a>
                         <ul>
                           <li><a href=""/>Rehabilitación</a></li>
                           <li><a href=""/>Edificaci&oacute;n</a></li>
                           <li><a href=""/>Obra Civil</a></li>
                         </ul>
                     </li>  
                   </ul>
                </li>
                <li><a href="contacto.html">Contacto</a></li>
          </ul>

    </td></tr>  
    <tr><td width="auto"></td></tr>
   <!-- third row = space -->
   <tr><td width="auto"></td></tr>
    <tr><td align="left" width="900" height="20"></td></tr>
    <tr><td width="auto"></td></tr>

    <!-- fourth row SlidesJS -->
    <tr><td width="auto"></td></tr>
    <tr><td align="left" width="900">

     <!-- SlidesJS Required: Start Slides -->
          <!-- The container is used to define the width of the slideshow -->
          <div class="container">
            <div id="slides">
              <img src="images/slide/example-slide-1.jpg">
              <img src="images/slide/example-slide-2.jpg">
              <img src="images/slide/example-slide-3.jpg">
              <img src="images/slide/example-slide-4.jpg">
            </div>
          </div>


          <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
              <script>
            $(function() {
              $('#slides').slidesjs({
                width: 900,
                height: 506,
                play: {
                  active: true,
                  auto: true,
                  interval: 4000,
                  swap: true
                }
              });
            });
          </script>

          </td></tr>
    <tr><td width="auto"></td></tr>
...

CSS：

#redBackground{
    background: url(../images/redBackground.png) no-repeat center;
}

redBackground.png大小为1400x600。

Answer 1

这很简单，请改用此代码：

background: url(../images/redBackground.png) no-repeat top 310px center;

向我提供有关此解决方案的反馈意见。

Answer 2

在您的css文件中使用

#redBackground{
background: url(../images/redBackground.png) no-repeat center;
position:fixed;
top: 100px; 
}

您可以根据需要调整顶部位置。

Answer 3

#redBackground{
    background: url(../images/redBackground.png) no-repeat 150px center;
}

其中150px是背景的最高值。

Answer 4

您也可以立即使用background-position-y或background-position-x。

例如，您可以使用background-position-y:-10px;将背景10px推到顶部。

Answer 5

首先，您必须从<table>

中提取#redBackground

<强> HTML

<div id="redBackground"></div>

<table align="center">
    <!-- firsrt row -->
    <tbody><tr><td width="auto"></td></tr>
    <tr><td align="left" width="900"><img src="images/logoNoBackgroundSml.png" width="90" height="93" alt="Ecomir Logo"></td></tr>       

    <tr><td width="auto"></td></tr>
    <!-- second row -->
    <tr><td width="auto"></td></tr>
    <tr><td align="center" width="900">
                <!-- menu definition -->
          <ul id="main-menu" class="sm sm-simple" style="position:relative;z-index:100;" data-smartmenus-id="13940176605568179">                
                <li><a href="index.html">Principal</a></li>
                <li><a href="historia.html">Historia y Evolución</a></li>
                <li><a href="calidad.html">Calidad y Medio Ambiente</a></li>
                <li><a href="" class="has-submenu"><span class="sub-arrow">+</span>Nuestra Actividad</a>
                   <ul>
                     <li><a class="has-submenu"><span class="sub-arrow">+</span>Obra Actual</a>
                        <ul>
                           <li><a href="">Rehabilitación</a></li>
                           <li><a href="">Edificación</a></li>
                           <li><a href="">Obra Civil</a></li>
                        </ul>
                     </li>
                     <li><a href="" class="has-submenu"><span class="sub-arrow">+</span>Obra Realizada</a>
                         <ul>
                           <li><a href="">Rehabilitación</a></li>
                           <li><a href="">Edificación</a></li>
                           <li><a href="">Obra Civil</a></li>
                         </ul>
                     </li>  
                   </ul>
                </li>
                <li><a href="contacto.html">Contacto</a></li>
          </ul>

    </td></tr>  
    <tr><td width="auto"></td></tr>
   <!-- third row = space -->
   <tr><td width="auto"></td></tr>
    <tr><td align="left" width="900" height="20"></td></tr>
    <tr><td width="auto"></td></tr>

    <!-- fourth row SlidesJS -->
    <tr><td width="auto"></td></tr>
    <tr><td align="left" width="900">

     <!-- SlidesJS Required: Start Slides -->
          <!-- The container is used to define the width of the slideshow -->
          <div class="container">
            <div id="slides" style="overflow: hidden; display: block;">
              <div class="slidesjs-container" style="overflow: hidden; position: relative; width: 1170px; height: 657.8px;"><div class="slidesjs-control" style="position: relative; left: 0px; width: 1170px; height: 657.8px;"><img src="images/slide/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/" class="slidesjs-slide" slidesjs-index="0" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0; -webkit-backface-visibility: hidden; display: none;"><img src="images/slide/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/" class="slidesjs-slide" slidesjs-index="1" style="position: absolute; top: 0px; left: -1170px; width: 100%; z-index: 0; display: block; -webkit-backface-visibility: hidden;"><img src="images/slide/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/" class="slidesjs-slide" slidesjs-index="2" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 10; display: block; -webkit-backface-visibility: hidden;"><img src="images/slide/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/" class="slidesjs-slide" slidesjs-index="3" style="position: absolute; top: 0px; left: 1170px; width: 100%; z-index: 0; display: block; -webkit-backface-visibility: hidden;"></div></div>



            <a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a><a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a><a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a><a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop" style="">Stop</a><ul class="slidesjs-pagination"><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="">1</a></li><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1" class="">2</a></li><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2" class="active">3</a></li><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3" class="">4</a></li></ul></div>
          </div>
          <!-- End SlidesJS Required: Start Slides -->

          <!-- SlidesJS Required: Link to jQuery 
          <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
                End SlidesJS Required-->

          <!-- SlidesJS Required: Link to jquery.slides.j 
          <script src="jquery/jquery.slides.min.js"></script>
                 End SlidesJS Required -->

          <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
              <script>
            $(function() {
              $('#slides').slidesjs({
                width: 900,
                height: 506,
                play: {
                  active: true,
                  auto: true,
                  interval: 4000,
                  swap: true
                }
              });
            });
          </script>
          <!-- End SlidesJS Required -->
          </td></tr>
    <tr><td width="auto"></td></tr>
   <!-- =============================================================================== -->
<!-- =================          TEXT GOES UNDER THIS COMMENT       ================= -->
<!-- =============================================================================== -->

<!-- fith row -->
<tr><td width="auto"></td></tr>
<tr><td width="900" height="auto" align="center">
         <div class="columns">
             <div class="left-column">
                <div id="content">
                   <h1>Ecomir Estructuras S.L.</h1>
                   <h2>Página en construcción</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                   <h2>Texto</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>
        </div>
     </td></tr>
    <tr><td width="auto"></td></tr>    
 <!-- sixth row: footer -->

 <tr><td width="auto"></td></tr>
 <tr><td width="900" align="center">       
    <div id="footer" data-role="content">
            <table width="900" border="0" summary="Table to contain footer">

              <tbody><tr>
                <td width="300" align="left">
                <div class="left-footer" id="left-footer" data-role="content">
                <p></p>
                <p class="left-footer"><font size="+1">OFICINAS CENTRALES</font></p>
                <p></p>
                <p class="left-footer"><font size="-1">Almirantes Matos, 35</font></p>
                <p class="left-footer"><font size="-1">36002 PONTEVEDRA</font></p>
                <p class="left-footer"><font size="-1">Tlfo 986869940 Fax 98685362</font></p>
                </div>
                </td>

                <td width="300" align="center"><img src="images/eccWhite.png" width="300" height="100"></td>

                <td width="300" align="right">
                <div class="right-footer" id="right-footer" data-role="content">
                        <p><font size="+1">ECOMIR ESTRUCTURAS SL</font></p>
                        <p></p>
                        <font size="-1">
                        <p>estructuras construcciones y contratas</p>
                        <p>info@ecomir.es</p></font>
                  </div>
                 </td>
              </tr>
            </tbody></table>

    </div>
</td></tr>
<tr><td width="auto"></td></tr>

</tbody></table>

和CSS：

#redBackground {
background: red; /* not the exact color, fell free to change it. */
width: 100%;
position: absolute;
left: 0;
height: 700px;
top: 290px;
}

一些注意事项：

您不需要使用大图片来填充颜色的元素。 background属性将完成工作
永远不要将<table>用于您的布局，仅用于表格信息。你的代码不是标准的，肯定会破坏某些浏览器
尊重HTML流程。如果你想要一个元素独立于流（那里：你的红色背景），只需将它放出流程（不包括那里的内容）

DIV背景：如何修复位置

5 个答案: