Background images in CSS

In each page of my website I have a section where there is the title of the webpage and where I would like to have a background image. I use different background images for most of the pages and I would like also to use a different image depending on the width of the screen of the user's device.

So this is my CSS:

#title1 {
      background-image: url("images/image1small.JPG");
   }

@media (min-width: 600px) {
    #title1 {
       background-image: url("/images/image1big.JPG");
    }
   }

In the HTML I write this:

<div id="title1">THIS IS THE TITLE</div>

So besides title1, I will have also title2, title3, etc in my CSS that will be used for other webpages. I like "my" CSS+HTML solution because it's very simple, but I am worried about the loading time of the page: is there any problem having something like 100 images listed in the CSS (even if just 2 (1 big and 1 small) are then used in each webpage)?

In another thread ( Loading CSS background images before normal images? ) I read that CSS background images are the last elements to be loaded (if I got it right), while I would like them to be the first ones. To solve this problem, I could use javascript... but at that point, is it worth having my CSS + HTML solution, or should I use javascript also to load different background images depending on the width of the screen?

I am new to CSS and HTML so I am happy to compare ideas... Thank you