如何使带有背景图像的div可选？

Question

I have an image in my page and it's loaded as background of a div. I want this div to communicate with user as if it was an <img scr="..." with. How do I make this div selectable? User can easily select img but not div w/o content. I tried different values of user-selectable but it seems it doesn't div in any way.

Disclaimer: I can't use <img src=""/> because my image url is located in css file. I can't use img tag with content css property because it doesn't work as expected in some browsers.

 div { background: url("https://static.pychat.org/images/dark_wall.png") no-repeat 0 0; width: 50px; height: 50px; margin:100px; } 

 this text is selectable but image below is not. Click run snippet to see it yourself. <div></div> 

Answer 1

Because you are using a <div> element to render your image, selecting it simply isn't possible in the way you are describing. You can, however, use the URL located in your CSS file in an <img> tag via the src attribute as done in the following snippet:

 img { width: 50px; height: 50px; margin:100px; } 

 By using an img tag, the image is selectable. <img src="https://static.pychat.org/images/dark_wall.png"> 

This produces the exact same results, though the image is also selectable by the user. Using an image instead of a <div> tag would be a better choice in countless ways including web accessibility (a screen reader would have a very difficult time comprehending the empty div element).

That being said, if it truly is necessary that you use an empty, block-level element (though I wouldn't recommend it), there is a workaround. If you were to place the HTML entity   (a single space) in your div element, the space would make it selectable in some sense. Using the space character, you can also prevent browsers from not rendering the element. Note that this may not provide the intended results as only the space will be selected.

 div { background: url("https://static.pychat.org/images/dark_wall.png") no-repeat 0 0; width: 50px; height: 50px; margin:100px; } 

 Your div element <div> &nbsp; </div>