You are trying to specify a background image on img element. Try this:

@media screen and (max-width:767px) {
    a[title="example 1"] img {
        content: url('https://i.picsum.photos/id/480/200/300.jpg');
    }

    a[title="example 2"] img {
        content: url('https://i.picsum.photos/id/486/200/300.jpg');
    }
}

<ul id="homeslider">
    <li class="homeslider-container">
        <a href="example1.com" title="example 1">
            <img src="https://i.picsum.photos/id/490/200/300.jpg">
        </a>
    </li>
    <li class="homeslider-container">
        <a href="example2.com" title="example 2">
            <img src="https://i.picsum.photos/id/496/200/300.jpg">
        </a>
    </li>
</ul>

JSFiddle

I’m trying to change images on different screen sizes. I have below HTML but the CSS doesn’t work. Can I please get some help? Thanks!

HTML

<ul id="homeslider">
    <li class="homeslider-container">
        <a href="example1.com" title="example 1">
            <img src="image1.jpg">
        </a>
    </li>
    <li class="homeslider-container">
        <a href="example2.com" title="example 2">
            <img src="image2.jpg">
        </a>
    </li>
</ul>

CSS

@media screen and (max-width:767px) {
    a[title="example 1"] img {
        background-image: url('test 1.jpg');
    }

    a[title="example 2"] img {
        background-image: url('test 2.jpg');
    }
}