Slider using background image

I've implemented sliders in a couple of wordpress websites and I am not happy about the implementation so I would like to know some ideas of people with more experience. I have a policy of trying not to use a lot of plugins especially when I can have a lot of more control if I do it on my own and it's kinda easy to implement. My main problem is that many of the best sliders I've found use background image on CSS to put them on the DIVs. This is especially useful because you have options like cover in CSS that you can't have with the IMG element on HTML. My question is... What is the best way to dynamically put this images on CSS? I thought about the following solutions: 1) Put them on the header with a conditional statement to load them only in specific pages inside a

<style></style>

2) Create a CSS file that would need to be regenerated everytime a new image is added to the slider through a custom field or a gallery. Then load this CSS with a conditional statment in the functions.php

I've implemented the solution 1) but I'm not happy with it. I feel dirty using loops on the header.php, plus since I don't want to repeat the same loop again in the page template I just used a global string to save all the HTML produced by the loop and echo it later on the page template. (not really sure if wordpress caches my previous loop or something like that).

About the solution 2) I was thinking in calling a script of my own every time I update the images or galleries on the backoffice but... how the hell do I do this in a simple way? =P Plus I am kind of afraid that pre generating this CSS and giving it classes like item-1{}, item-2{}, and so on... would go wrong if the loop I use to generate the CSS doesn't get the images in the exact same order as the loop I use to echo it on the page template. EDIT: Ok this was kind of stupid I could just name like item-{IMG-ID} or similar.

Would love some thoughts on this... Especially from Zac Gordon if possible :D