Background property (css) not working, image doesn't display

Hi there,

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; }

Would appreciate some help.

Cheers,

Saqib

Hi Saqib,
Managing the WordPress media files is almost always a pain! But the first URL you’re using is working just fine.

I was looking into your code/site. Still not sure what you’re trying to accomplish. However, using this code:

.page-services h3::before {
    content: '';
    display: inline-block;
    height: 40px;
    width: 40px;
    background: url(http://launique.co.uk/wp-content/uploads/2016/07/fold.gif) no-repeat 0 0;
}

I managed it to look like this:

The image is showing, there are two things I modified:

display: block; for `display:inline-block;` so you can show it side-to-side without being overlapped.

and instead of an ::after pseudo, I used ::before so it’s shown to the left. This is, of course, depending on how you’d like it to appear.

1 Like

Thank you @lesthertod!

Yes it is, why is it so bothersome!?!

Fyi I was following a tutorial on Lynda.com, it’s a lesson on learning to combine pseudo-elements and graphics, I’ll need to use a darker purple of course.

Well not being an English native speaker, I had a hard time differentiating after and before (for common use) and with the pseudos was worse! Just something on my brain didn’t click.
After several runs to the dictionary and such got it right and now everything makes sense!

Get a cheat sheet with the display properties and while you’re there wrap your head around the box model. It’s something that needs a bit of grinding and exercise to figure out.

Good to know that I was able to help you out with your problem.

1 Like

Thanks again, appreciate the link and will take note of your tips, thanks again!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.