two different header-images

Hello,

as I have a very long name in the header, I'd like to split it into two different images:

@media (max-width:3000px) {
.site-header .header-image {
display:inline-block; }
}
@media (max-width:768px) {
.site-header .header-image {
display: none; }
}
so far the long name dissappears, when getting small, but I don't know how to exchange the images??

I've tried background-image? A mess. I have no clue how that works??

Thanks for helping.