Non-responsive image

Asked

Viewed 70 times

1

inserir a descrição da imagem aqui

On larger screens the image duplicates and I want that not to happen.

I’m using the following code:

background-image: url("../assetsimages/book.jpg");
    background-repeat: repeat;  
    max-width:100%;
    height: auto;

It’s still not working

html css

3 answers

2

Not to repeat use:

background-repeat: no-repeat;

Or

background-size: 100% auto; //Largura e altura respectivamente

  • tried and didn’t try see: http://ami.responsivedesign.is/? url=http%3A%2F%2Funn-w17015779.newnumyspace.co.uk

2

This code should work. If it doesn’t work it’s because there’s some other class overwriting your.

Documentation about the background: https://www.w3.org/TR/css-backgrounds-3/

Note that to function you have to determine a height for the <body> and to the <div>

See below the example covering 50% of the screen without repeating, even though Dive having 100%

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.bg {
    background-image: url("http://placecage.com/800/600");
    background-repeat: no-repeat;  
    background-size: 50%;
    background-color: aqua;
    background-position: center;
    width: 100%;
    height: 100%;
}
<div class="bg">
    
</div>

0

try this code There is background-size property: cover; That makes the background fill the full size of the element

background-image: url("../assetsimages/book.jpg");
background-position:center center;
background-size:cover;
max-width:100%;
height: auto;

  • http://ami.responsivedesign.is/? url=http%3A%2F%2Funn-w17015779.newnumyspace.co.uk still not giving!

Browser other questions tagged html css

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