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;
Problem courtesy of: Zzuum


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:

Solution courtesy of: Filly


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.