css / Attachment

Asked

Viewed 36 times

-3

I got a problem.
When I use any other Attachment the image becomes normal: inserir a descrição da imagem aqui

But when I use the Fixed to accompany the scroll it gives an absurd zoom: inserir a descrição da imagem aqui

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;

}
css

  • What are the dimensions of the background image? I think the problem is not in Fixed.

  • Opa these are the dimensions. width: 1800px; height: 358px;

  • this is the background image of the top of the site and not the body background image .

  • Try to use auto instead of cover

  • Mt thanks it worked, how can I compliment you around here?

  • I’ll put an answer

  • Quiet brother just for whom I vote .

Show 2 more comments

1 answer

1

The problem is not connected to background-attachment. The size of background is defined in background-size. Using cover, the background image will occupy the entire width and height of the div (as its name means: cover) and the image may be increased for this, because the cover maintain the dimensions (if larger than the div) and the image ratio.

What you should do is adjust the background-size in 100%. The 100% will adjust the width of the background image according to the width of the div maintaining the proportion of the.

More info about background-size on MDN.

  • Ready little brother I voted on 2 .

  • @Gabrielcosta Thanks! But the interesting thing is to score

Browser other questions tagged css

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