Search code examples
htmlcssstylesstylesheet

How to add background color to Header Banner

I have set all the featured images as the banner of each page in my site.Here is the link - http://constantin-entertainment.info/fixitnow/about-us/ .What I need is to have a background colour like the one I have in my home page which is a slider.Here is the link to home page http://constantin-entertainment.info/fixitnow/ . I have tried putting a div and named a class as featured-img-bg before the image and set the background color which didn't help.Also I have tried adding width which also didn't help.Can please any one help me doing this.Thanks!! This is the code I have written

 <div id="content">
   <div class="container clearfix">


   <div class="featured-img-bg"><a href="http://constantin-entertainment.info/fixitnow/about-us/" title="Permalink to About Us"> <img width="1000" height="390" src="http://constantin-entertainment.info/fixitnow/wp-content/uploads/2014/04/slider.jpg" class="alignleft featured_image wp-post-image" alt="slider"></a></div></div>

and the css that I have tried is

.featured-img-bg{background: none repeat scroll 0 0 #E4E4E4 !important;width:1349px;}
Solution

  • you have to paste the below code just after the div #header closed.

    <div class="featured-img-bg">
<a href="http://constantin-entertainment.info/fixitnow/about-us/" title="Permalink to About Us"> <img width="1000" height="390" src="http://constantin-entertainment.info/fixitnow/wp-content/uploads/2014/04/slider.jpg" class="" alt="slider"></a></div>

    CSS would be like this..

    .featured-img-bg {
    background: none repeat scroll 0 0 #E4E4E4 !important;
    overflow: hidden;
    text-align: center;
    /*width: 1349px;*/ /*Not Required*/ 
}
.featured-img-bg img{float:none} /*Remove the by default added `float:left`*/

    Check the screenshot for more clearance. enter image description here