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
Post a Comment