How to leave an image placed by responsive css.?

Asked

Viewed 41 times

-1

Hello guys I have a little problem here, it’s as follows...

I made the footer of the site all right, with 100% fluid width but I started doing the desktop version and the background img that I put with the same width of the page. I put the background img, from the footer through css.

But when I lower the screen, the DIV of the footer that contains the decrease img, but the img does not decrease. Each time I decrease the screen, my footer div decrease more and my image does not.

The image is contained within the parent element, without going beyond, but not diminishing.

My code:

HTML

< footer >
Contém as redes sociais e quem somo... 
< /footer >

CSS

footer{
width:100%;
 height:250px;
Background-image url("_img/index/banner-rodapé. Jpg" ) 
Background-repeat:no-repeat;
}
html css responsive-layout

  • Friend without your code does not help you, edit and include the code. No more you can try putting the image width at 100% to see if it solves...

  • @hugocsl posted the code...

1 answer

0

For the image to decrease along with the element you applied the css property background-image, you need to apply the same property element background-size.

Example

.image {
  width: 100%;
  height: 400px;
  background-image: url('https://cdn-images-1.medium.com/max/2600/0*UR0r5pSLQbvP_yUo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
}
<div class="image"></div>

Tip

Try running the code snippet above without the properties background-size and background-position to see the difference.

References

Browser other questions tagged html css responsive-layout

You are not signed in. Login or sign up in order to post.