javascript - Replace <img> with CSS background image for parent element (using jQuery to separate style from content) -

i have div class, .event, supposed have background image (different images each instance of class). however, don't want edit css every time add div of class. want edit html, goal html5, separating styling content.

html:

<div class="event" id="meeting1">   <img src="img/dsc_0001.jpg">   <span>mon 19 oct</span> </div> <div class="event" id="booksale">   <img src="img/dsc_0004.jpg">   <span>wed 21 oct</span> </div> ... 

why don't inline styling?

<div class="event" id="meeting1" style="background-image: url(img/dsc_0001.jpg)">   <span>mon 19 oct</span> </div> <div class="event" id="booksale" style="background-image: url(img/dsc_0004.jpg)">   <span>wed 21 oct</span> </div> 

there situations inline styling frowned upon, in case, suitable.