I need help using CSS and/or HTML to add a picture to the right of the Web Part title

Question

I have this picture /SiteAssets/CalendarBar.jpg in SharePoint Online that I would like to add to the right of the title in a Web Part.

Can anyone tell me what code I need to put in a Content Editor Web Part in the same Zone to do that?

Here's the code for the Elements for this particular WebPartTitle and titleText:

    <span title="Guest Visit Calendar" id="WebPartTitleWPQ8" class="js-
    webpart-titleCell"><h2 style="text-align:justify;" class="ms-webpart-
    titleText"><a accesskey="W" href="/Lists/Guest%20Visit%20Calendar">
    <nobr><span>Guest Visit Calendar</span><span id="WebPartCaptionWPQ8">
    </span></nobr></a></h2></span>

    <h2 style="text-align:justify;" class="ms-webpart-titleText"><a 
    accesskey="W" href="/Lists/Guest%20Visit%20Calendar"><nobr><span>Guest 
    Visit Calendar</span><span id="WebPartCaptionWPQ8"></span></nobr></a>
    </h2>

Here's a screenshot. The picture is currently in a CEWP in the same Zone as the Guest Visit Calendar Web Part. I want that picture to show up in the gray area to the right of the text "Guest Visit Calendar".

---

Here's a screenshot. The picture is currently in a CEWP in the same Zone as the Guest Visit Calendar Web Part. I want that picture to show up in the gray area to the right of the text "Guest Visit Calendar". Thanks

Answer 1

Try <img src="/path/to/image.png" style="float: right;">, /path/to/image.png should be replaced with the path to your image.

Answer 2

Unless you manage to get a div/img inside the .ms-webpart-chrome-title or #WebPartWPQ8_ChromeTitle through coding, I don't think it's possible with CSS alone (or I must have missed something). When trying, I could only get an image in there set as background-image, but this is not enough to achieve your goal.

If you succeed this with CSS only, I'd be very curious to know how!