CSS - Footer image not resizing correctly when browser viewport changes -
i have mvc app image in footer. css looks follows:
footer { position:absolute; bottom:-150px; /* puts footer 100px below bottom of page*/ width:70%; height: 170px; /* height of footer */ background-image: url("/images/footer/footer3.png"); background-repeat: no-repeat; background-position: center; }
the problem have image not being resized correctly fit within width , height of container. parts of image cut off. , when resize browser viewport (shrink it), more of image cut off. image size 1000x175 if helps. image responsive , auto resized correctly within container.
did try
background-size: 100% 100%;
Comments
Post a Comment