Zzuum Zzuum - 21 days ago 5
CSS Question

Responsive background CSS position

I have a problem with my background on mobile phones.

I use media query and I can't make position of that background image.

Here you can see a background image.

This is my media query code:

@media only screen (max-device-width : 360px) {

.sidebar {
display: none;
}

li#menu-item-631 a {
width: 100px;
}

#navmenu {
margin-top: 20px;
margin-left: 0;
margin-right: 0;
}

.content {
width: auto;
height: auto;
margin-left: 0;
margin-top: -130px;
}

.contentsing {
width: 500px;
height: auto;
margin-left: 20%;
margin-right: 5%;
margin-top: -150px;
}
}


And this is my background code

body {
background: url() no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: AntonioLight;
font-size: 1em;
padding: 0;
margin: 0;
}

Answer

If you want your background image to adapt to different screen sizes (priorizing the center of the image, for example), you might be looking for something like this: http://johnpatrickgiven.com/jquery/background-resize/