问题描述:

I'm building my first page where there is a partial red background. I'm using a div but am not able to set it at the desired height behing the slider. The desired look is the following;

Instead, the div goes lower and I had to change the font color to make it visible, as you can check here. I tried with position, background-origin but didn't get the desired result

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 size is 1400x600.

网友答案:

First you have to pull your <table> out of the #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/[email protected]/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>[email protected]</p></font>
                  </div>
                 </td>
              </tr>
            </tbody></table>

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

</tbody></table>

And the CSS :

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

Some notes :

  • You don't need a big image to fill an element with color. The background property will do the job
  • Never use <table> for your layout, only for tabular information. Your code is not standard and surely will break on some browsers
  • Respect the HTML flow. If you want an element to be independant of the flow (there : your red background), just put it out of the flow (don't include content in there )
网友答案:

In your css file use

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

you can adjust the top position as you want.

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

where 150px is top value of the background.

网友答案:

Also you can use right away background-position-y or background-position-x .

For instance you can use background-position-y:-10px; to push the background 10px to top.

网友答案:

This is very simple, use this code instead:

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

give me your feedback about this solution.

相关阅读:
Top