0

I'm trying to use the background link css property selector within WordPress for the image appear on it's page http://launique.co.uk/services-float/

First I used the default image link and entered the link to the default image, which I had uploaded to the media library:

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

That didn't work.

Then after some research, I created a separate "images" folder within the child themes folder in my cpanel.

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

But still to no avail...

This is the whole like of code:

.page-services h1::after { 
 content: ''; 
 display: block; 
 height: 40px; 
 width: 40px; 
 background: url(images/fold.gif) no-repeat 0 0; 
}
Tristan
  • 3,301
  • 8
  • 22
  • 27
Saqib
  • 1
  • 1

2 Answers2

0

I inspected the HTML code on your site and I didn't find a H1 child elememt in the parent element div.page-services. Therefore your CSS rule will not work. There is, however, an H3 child element. When I altered your code in the debugger to .page-services h3::after{ ... } the image appeared.

Jon Wilson
  • 86
  • 6
  • This is incorrect. The spec does not require quotes. See: http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary – rnevius Jul 29 '16 at 23:01
  • Hi there, appreciate the attempt but that use of quotation marks didn't make a difference. Any other ideas? – Saqib Jul 30 '16 at 10:07
  • **YES!!!** That's the one, you're the man @Jon Wilson! Thank you very much! – Saqib Jul 30 '16 at 14:04
0

UPDATED: This should definitely work.

.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; 
}
Steven Ventimiglia
  • 886
  • 1
  • 11
  • 19
  • Thanks @Steve Ventimigilia, changing the header tag from H1 to H3 worked. – Saqib Jul 30 '16 at 14:05
  • You can always test this type of thing by right-clicking on the page and choosing Inspect Element. Then, by right-clicking on the HTML and selecting "Edit As HTML", you're always free to use that as a temporary sandbox (where the changes will disappear once you refresh the browser.) Adding tags with CSS inside of them will give you the freedom of experimenting without accidentally saving too many changes in a file (aka 'bloat'.) I primarily use Firefox (which is kind of the in-between browser with neutral cross-compatibility), and you can simply right-click and type "Q". – Steven Ventimiglia Jul 30 '16 at 16:17
  • Appreciate the tips @Steve Ventimigilia I'll make a note of it. – Saqib Jul 31 '16 at 11:55