css / attachment

-3

I have a problem. When I use any other attachment the image gets normal:

But when I use fixed to follow the scroll, it zooms absurdly:

CSS:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800');
/* CSS Document */
body { 
    background-color: #eeeeee;
    margin: 0; }
.background
{
    overflow: hidden;
    background: url(../images/fundo.png);
    background-position: top center;
    min-height:355px;
    background-repeat: no-repeat;   
    color: #000000;
    background-attachment: fixed;
    background-size: cover;

}

.background .links ul {
    padding:0;
    list-style: none;

}

.background .links ul li {
    float: right;
    display: inline-block;
    margin:0 20px 0 0;
}

.background .links ul li a {

    display: block;
    text-decoration:none; 
    padding-bottom: 30px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color:#ffffff;
}

.background .links ul li a:hover {
    color: #b0fafd;

}
    
asked by anonymous 24.12.2017 / 04:58

1 answer

1

The problem is not linked to background-attachment . The background size is set to background-size . Using cover , the background image will occupy the full width and height of the div (as its name means: cover ) and the image may suffer an increase for this, since cover will retain dimensions (if greater than div) and image ratio.

What you should do is set background-size to 100% . The% w / w% will adjust the width of the background image according to the width of the% w and% while maintaining the aspect ratio.

More info on background-size in MDN .

    
24.12.2017 / 19:21