CSS selection not working around images

Question

I'm trying to change the selection colour on my website but it seems to be causing a problem when selecting around images. Essentially the white space around the images comes out in the default blue whereas everything else comes out in the correct yellow colour.

This is the HTML:

<h2>Achievements</h2>
<img src="img/atlassian.png" />
<p>The most reputable and successful start-up in Australian history. Led the design for Confluence over 4 years.</p>

This is the CSS:

::selection {
background: #fade70; /* Safari & Chrome */
color: #333;
}
::-moz-selection {
background: #fade70; /* Firefox */
color: #333;
}

Any idea how I could fix this? Really appreciate your help!

(I tried uploading an image but I didn't have the reputation points, sorry!)

Answer 1

I'm pretty sure it's because img is not a block element. You can either enclose it in a div

<div>
<img src="http://placekitten.com/200/200?image=3" />
</div>

or style the img with display:block, something like this.

<img class="block" src="http://placekitten.com/200/200?image=3" />

.block {
    display: block;
}

UPDATE: If you want it to be an inline element, you don't need a div or styling for the selection colour to be correct. For example,

<p>This text is before the image <img src="" /> and this text is after it.</p>