Problem with Media Queries CSS

Question

Problem with Media Queries CSS

Navigation

#1 by (0 votes)

0

Good morning, comrades. I come with the following question.

I have a half query to put a wallpaper on my master, located in the body .

body {
    background : url('../../escritorio.png');
    background-size : cover !important;
    background-repeat : no-repeat !important;
    background-position : center center !important;
    background-attachment : fixed !important;
    background-color: #464646;
}

@media only screen and (max-width:768px) {
    body {
        background : url('../../movil.png');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
}

In desktop issues everything is perfect but when using Safari mobile or even, the same Chrome mobile. In Safari the image appears outdated, as if I was using the image for browsers while Chrome does not even show me the image.

As a bonus, I already have the meta tag included in my master.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

P.D. In the only browser that works for me it is in IE of Win 10 mobile.

P.D.2 Annex images of how it looks in IE of Win 10 mobile and how it looks in Android's chromme mobile

html css3 asp.net

asked by IngErick 16.03.2017 в 17:48

source

1 answer

Print from Glassfish server Error in Yii2, Setting unknown property: kartik \ widgets \ DatePicker :: saveFormat

score 0 · Accepted Answer

After changing style after style, I finally found the combination that worked for me, I can not assure that it works for everyone or that it is the best answer but here is the CSS code:

html, body {
    height: 100%;
}

html {
    overflow-y: hidden;
}

body {
    overflow-y: scroll;
    background: url('escritorio.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

@media (max-width:768px) {
    body {
        background: url('movil.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

I hope you help!