css - Background is not showing up when content is added? -


for reason when add width , height .left-section, .section-page-layout-container doesn't expand , show background, if add height .section-page-layout-container background gradient repeats , every pixel filled.

i tried messing around code nothing seemed work. must stupid mistake.

hopfully folks can me out :)

thanks in advance!

my html

    <section class="section-page-layout-container">         <div class="section-page-layout">             <div class="left-section">                 <header>                  </header>             </div>             <div class="right-module-section">              </div>         </div>     </section>     <div class="clear"></div> 

my css

.section-page-layout-container {     background:#984b09;     background: url('../img/section-page-oj_gradient-background.png') repeat-y;     background-size:contain;     width: 100%; } .section-page-layout {     width: 1280px;     position: relative;     margin: 0 auto;     height: auto; } .left-section {     width: 585px;     height: 500px;     background: #000000;     float: left; } 

use overflow: hidden

.section-page-layout-container {     background:#984b09;     background: url('../img/section-page-oj_gradient-background.png') repeat-y;     background-size:contain;     width: 100%;     overflow: hidden; } 

when have floated object inside object container collaps, thats why u need clearfix


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -