How Do I Change An Image on an HTML Page via the CSS sheet?

The reason i want to do this from the CSS is that i have a script that loads A DIFFERENT css depending on region/where the visitor is coming from

ie i want to present a different image to those in different regions by loading different style sheets depending on the region.

I then simply change the image in each style sheet to suit.

I am trying to change an html image as indicated below:

The code below was taken by right clicking the image i want to change and choosing inspect element. THIS IS THE CODE OF THE IMAGE on an HTML page.

I want to REPLACE THIS IMAGE::

<img width="462" height="62" alt="" class="art-lightbox"

src="images/changethispicture.png" style="">

WITH THIS:

<img width="462" height="62" alt="" class="art-lightbox"

src="images/tothispicture.png" style="">

But i want to do it through the style sheet.

can This Be Done?

Please note i am not a programmer of any sorts so please speak in easy english. Thanks

PS, the index.html page loads the home.html page. If what i am trying to do could be applied to making a different choice of the home.html page, ie home2.html instead then id be interested to hear your thoughts on the ways this can be done.

Obviously the code wold have to override the default home.html with the new home2.html