2016-07-29 9 views
0

Ich versuche, den Hintergrund Link CSS-Auswahlmenü in Wordpress für das Bild auf seiner Seite erscheinen zu verwenden http://launique.co.uk/services-float/Background-Eigenschaft (CSS) nicht funktioniert, Bild nicht angezeigt

Zuerst habe ich die Standard-Bildlink verwendet und den Link zum Standardbild eingegeben, die ich in die Medienbibliothek hochgeladen hatte:

background: url(http://launique.co.uk/wp-content/uploads/2016/07/fold.gif) no-repeat 0 0;

, die nicht funktionierten.

Dann habe ich nach einigen Recherchen einen separaten Ordner "images" innerhalb des Child Themes-Ordners in meinem cpanel erstellt.

background: url(images/fold.gif) no-repeat 0 0;

aber noch ohne Erfolg ...

das Ganze wie der Code Dies ist:

.page-services h1::after { 
content: ''; 
display: block; 
height: 40px; 
width: 40px; 
background: url(images/fold.gif) no-repeat 0 0; 
} 
+0

Für was ist die '0 0'? – RamenChef

+0

Ich habe meine Antwort nach dem Test über Inspect Element bearbeitet. http://stackoverflow.com/a/38668570/4298604 –

Antwort

0

ich den HTML-Code auf Ihrer Website überprüft und das finde ich nicht ein H1-Kindelement im Elternelement div.page-services. Daher wird Ihre CSS-Regel nicht funktionieren. Es gibt jedoch ein H3-Kindelement. Als ich den Code im Debugger auf .page-services h3 :: geändert habe, nachdem das [...] Bild erschienen ist.

+0

Dies ist falsch. Die Spezifikation erfordert keine Anführungszeichen. Siehe: http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary – rnevius

+0

Hallo, schätzen Sie den Versuch, aber die Verwendung von Anführungszeichen hat keinen Unterschied gemacht. Irgendwelche anderen Ideen? – Saqib

+0

** JA !!! ** Das ist der eine, du bist der Mann @ Jon Wilson! Vielen Dank! – Saqib

0

AKTUALISIERT: Dies sollte definitiv funktionieren.

.page-services { 
    display: block; 
    position: relative; 
} 
.page-services h3::after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 40px; 
    width: 40px; 
    background: url('http://launique.co.uk/wp-content/uploads/2016/07/fold.gif') no-repeat; 
} 
+0

Dank @Steve Ventimigilia, änderte die Header-Tag von H1 bis H3 gearbeitet. – Saqib

+0

Sie können diese Art von Sache immer testen, indem Sie mit der rechten Maustaste auf die Seite klicken und Element prüfen wählen. Wenn Sie dann mit der rechten Maustaste auf den HTML-Code klicken und "Als HTML bearbeiten" wählen, können Sie diesen als temporäre Sandbox verwenden (wobei die Änderungen nach dem Aktualisieren des Browsers verschwinden). Hinzufügen von Tags mit CSS in ihnen gibt Ihnen die Freiheit zu experimentieren, ohne versehentlich zu viele Änderungen in einer Datei zu speichern (aka 'Bloat'.) Ich benutze hauptsächlich Firefox (das ist der Zwischen Browser mit neutraler Kreuzkompatibilität) und Sie Klicken Sie einfach mit der rechten Maustaste und geben Sie "Q" ein. –

+0

Schätzen Sie die Tipps @Steve Ventimigilia Ich werde es notieren. – Saqib