Jump to content

Problem with background-position: center center;


pinchacas

Recommended Posts

Hi everyone!

I have a problem with background-position: center center; on @media only screen and (max-width: 600px)... if background-position: center center; is activated, @media not work for my...

Look at: This work perfectly:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-image: url(fondo.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media only screen and (max-width: 750px) {
  body {
    background-image: url(750.jpg);
	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}
</style>
</head>
<body>

</body>
</html>

But if write background-position: center center; @media not work:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-image: url(fondo.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}

@media only screen and (max-width: 750px) {
  body {
    background-image: url(750.jpg);
	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}
</style>
</head>
<body>

</body>
</html>

Why???

Help me please! Thx! 

 

Link to comment
Share on other sites

What is wrong? You expected center center not to work in media query? You'd  be wrong, it would carry on from position styling from default non media query styling, as does background size, attachment and repeat. If you want to reset to default value use background-position: initial; in media query.

  • Thanks 1
Link to comment
Share on other sites

18 hours ago, dsonesuk said:

What is wrong? You expected center center not to work in media query? You'd  be wrong, it would carry on from position styling from default non media query styling, as does background size, attachment and repeat. If you want to reset to default value use background-position: initial; in media query.

background-position: initial; on @media work!

U are amazing! Thank u! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...