Unresponsive image

Question

Unresponsive image

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (0 votes)

1

OnlargerscreenstheimagedoublesandIwantittonothappen.

I'musingthefollowingcode:

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

It's still not working

html css

asked by anonymous 08.03.2018 / 11:21

3 answers

For inside For (Explanation) Select with like detailed

score 3 · Answer 1

3

To not repeat use:

background-repeat: no-repeat;

Or

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

08.03.2018 / 11:23

score 3 · Answer 2

This code should work. If not, it's because you have some other class overriding yours.

Background documentation: link

Notice that to work you have to determine a height for <body> and for <div>

See below the example covering 50% of the screen without repeating, even the 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>

score 0 · Answer 3

try this code There is the background-size property: cover; Which causes the background to fill the entire element size

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