Zzuum Zzuum - 1 year ago 70
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 Source

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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download