如何设置链接的背景图片？

Question

The code below is a link which has a class through which I want to add a background image. I am not able to display background image however same code sets background color correctly so what I am missing here? I don't want to use <img> tag inside link because I want to change background image on hover.

 .dropbtn{background: url(http://images.freeimages.com/images/previews/356/cubes-1425949.jpg) 50px 50px no-repeat;} 

 <a class="dropbtn">image</a> 

Answer 1

See Clearly i used class and in css,me use background-image.It is not necessary to do 1 thing from only one method.there are many options to do any anything

Answer 2

You can try this way.Wrap the <a> with a div then style below this way.Hope this will help you.

 .hello { width: 100%; background-image: url(http://images.freeimages.com/images/previews/356/cubes-1425949.jpg); height: 700px } 

 <div class="hello"><a class="dropbtn">image</a> </div> 

Answer 3

You are showing 50px 50px Is your link 50px heigh? My guess is that you should start with 0 0 and see where the image is. Is there a lot of transparent or white space on the canvas so the actual image is not in view especially with the 50px right and top positions added also?

Add height to your link and remove the image positioning by using left top.

Answer 4

you are using wrong class for css use below code

.dropbtn{background-image:url( http://images.freeimages.com/images/previews/356/cubes-1425949.jpg ) 50px 50px no-repeat;