CSS Banner

A banner made completely from CSS

by spedwards

HTML

<div id="banner">Example Banner</div>

<div><p>Try resizing the result window</p></div>

CSS

#banner {
    background:url(http://thepatternlibrary.com/img/b.jpg); /* Tileable Image Background */
    
    width:75%; /* Set width of banner. Fixed widths are gross and non-responsive */
    
    height:5em; /* Set banner height */
    line-height:5em; /* Line height should be same as height to align text vertically center */
    text-align:center;
    
    color:#fff;
    font-weight:800; /* Bold text */
    font-size:x-large; 
    margin:0 auto; /* Centers banner horizontally and responsively */
}