Changing html background image to css?
created one existing project for his insensitive website. Now I need to change the response site. Do I need to change my responsive logo site? i changed but didn't work? '
<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 is my site logo code, how do I change this image to a fully responsive logo?
I created a 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;
}
}
does it not work in react? any error in my code?
+3
source to share
1 answer
Class
.img1 is assigned <td>
, so adding the image requires the size of the background property so that the image is 100% sized.
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. Since your existing code is in a table structure, I'm not 100% sure my solution will work. but you can try. if you can create a violin, then it will lead you easily.
0
source to share