Add a image using Href Id , using CSS

user_5791024 0
Viewed 208

I am working on a wordpress website ,

Where i need to add a image before Hyper link , but i am failed to do so.

enter image description here

I have this for href , and i need image above these links

enter image description here

but i am failed , so far i tried to write css is

 background: url("outline.png") no-repeat 6px center;
  width: 100px;
  height: 100px;
  display: block;

but its not showing perfectly, also somepart of image going in background , i also tried Z-Index : 99999 , to show on top.

css html jquery
2 Answers

you can try using :before element. Here is the code based on your site

a#launch-tab-4:before {
    content: " ";
    width: 100px;
    height: 100px;
    display: block;
    background: #00aa00;
}
a#development-tab-4:before {
    content: " ";
    width: 126px;
    height: 100px;
    display: block;
    background: #eeaaff;
}
a#planning-tab-4:before {
    content: " ";
    width: 100px;
    height: 100px;
    display: block;
    background: #00eeff;
}
a#brainstorming-tab-4:before {
    content: " ";
    width: 100px;
    height: 100px;
    display: block;
    background: #000;
}

it should look like this screen shoot

replace the colors with your images and you may adjust the width and height

user_86203330

Try adding style background-size:cover or background-size:contain

I hope this helps

user_86362170
Related