html background image change to css?

Question

created one Existing project its non responsive web site.Now i need to change Responsive site. i need to change my logo image responsive site? i changed but its not working?'

   <td colspan="2"  style="background-image:url('site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right" >

this code my site logo image how to change this image to full responsive logo?

i have created class file in html like

  <td class="img1">

My css code:

  @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  {

    .img1{
         background-image:url('site_conf/images/det_banner.jpg');
         background-repeat:no-repeat; 
         background-position:center; 
         width:100%;
         Height:100;
      } 
}

its not working in responsive ? any mistake my code ?

Answer 1

.img1 class is assigned to <td> so background-size property should be added to make the image occupy 100% size of the width.

CSS

.img1 {
    background-image: url('site_conf/images/det_banner.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% ;
    width: 100%;
    Height: 100px;
}

Note: As your existing code is in Table structure I am not 100% sure that my solution will work. but you can give it a try. if you can create a fiddle then it will be easy to guide you.