CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
E.Hamed
E.Hamed

Reputation: 97

how to set responsive background-image of element using css?

whenever I set the background-imagefor an <a> , it always requires to specify the width and height in the stylesheet file. which make the urlimage not responsive, and when I try the solutions I found here in another questions such as background-size: cover; background-color: transparent;

or using class row and specify col or using max-height and max-width the image disappears.

Here is my current code which is not responsive at all:

<div class="container-fluid" style="position:absolute; bottom:50px;">
    <a class="urlImg" href="~/Home/Wall"></a>
</div>

and for the .css file

.urlImg {
 background-repeat:no-repeat;
 height:243px; 
 width:1022px;
 display:block; 
 background-image:url(../img/2.2.png);

} 

.urlImg:hover {
     background-image:url(../img/2.1.png);

} 

.urlImg:active {
     background-image:url(../img/2.3.png);

} 

.urlImg:visited {
     background-image:url(../img/2.2.png);

}

how to make this urlimages responsive?

Upvotes: 2

Views: 330

Answers (1)

Sachin
Sachin

Reputation: 2765

I made a fiddle to make it more clear
https://fiddle.jshell.net/ywzwk1z0/

.container-fluid{
  height:50%;
  width:50%;
}

Also added background-size:contain;

Upvotes: 2

Related Questions