2016-04-02 10 views
1

Ich versuche, einen Hintergrund nach dem Laden der Seite zu laden, aber es scheint, dass es nicht funktioniert, wie ich es erwarte.-webkit-Hintergrund-Größe funktioniert nicht mit jQuery Css

Mein Code vor in CSS war:

html { 
    background: url(<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-color: #0c1d31; 
} 

Jetzt versuche ich es mit jQuery:

jQuery(document).ready(function() { 

    jQuery('html').css({ 
     'background-image': "url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')", 
     'background-size': "cover", 
     'background-color': "#0c1d31", 
     '-webkit-background-size': "cover", 
     '-moz-background-size': "cover", 
     '-o-background-size': "cover", 

    }); 
}); 

Es scheint das '-webkit-Hintergrund-size' und ‚-moz-Hintergrund- Größe 'und' -o-Hintergrundgröße 'funktionieren nicht mit jQuery.css. Die anderen css-Eigenschaften funktionieren gut.

Irgendwelche Ideen bitte?

+0

Fügen Sie einen Startpunkt im Code hinzu, um eine richtige und schnelle Antwort auf Ihre Frage zu erhalten. Siehe auch http://StackOverflow.com/Help/Mcve – Roy

+0

@Roy Ich verstehe nicht, was ist los mit meiner Frage? – zeflex

+0

Warum stört es Sie, da Browser dafür seit geraumer Zeit keine Präfixe benötigen? – Rob

Antwort

0

Sorry, es war mein Fehler. Ich vermisse etwas Code in meinem JS ...

jQuery('html').css({ 
     'background-image': "url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')", 
     "background-repeat": "no-repeat", 
     "background-position": "center center", 
     "background-attachment": "fixed", 
     'background-size': "cover", 
     'background-color': "#0c1d31", 
     '-webkit-background-size': "cover", 
     '-moz-background-size': "cover", 
     '-o-background-size': "cover", 
    }); 

Ist gut.

1

Wenn Sie versuchen, mit nur "-webkit-background-size":

jQuery(document).ready(function() { 

    jQuery('html').css({ 
     '-webkit-background-size': "cover" 
    }); 
}); 

Sie werden sehen, dass Ihr Element wird wie folgt aussehen:

<html style="background-size: cover;"> 

Das ist also nicht das Problem .

Sie sollten wahrscheinlich für Ihre URL aussehen:

"url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')" 

Wenn Sie Chrome verwenden, innerhalb des Netzwerkes Registerkarte in f12 überprüfen, um zu sehen, ob es nicht ein Fehler ist.

+0

Nein, das Problem ist nicht da. Das Hintergrundbild lädt gut. Es ist nur das Problem mit der Zentrierung (Abdeckung), die versagt. Ich habe meine Frage mit dem normalen CSS-Code aktualisiert. – zeflex

+0

Mein Fehler Ich habe Code in meinem jQuery verpasst ... Ich füge die Antwort hinzu ... – zeflex