# Versatile Banner

**URL:** https://meta.discourse.org/t/versatile-banner/109133
**Category:** Theme component
**Tags:** official, versatile-banner
**Created:** [February 14, 2019, 10:05am UTC](https://meta.discourse.org/t/versatile-banner/109133 "2019-02-14T10:05:24Z")
**Posts on this page:** 1
**Showing post:** 263

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [November 20, 2021, 2:07am UTC](https://meta.discourse.org/t/versatile-banner/109133/263 "2021-11-20T02:07:15Z")

</div>

Hmm, in that case you might be able to add something like the following to one of the Versatile Banner’s “content” settings:

```plaintext
<div class="xmas-banner-image"></div>

```

And then add some CSS to your main theme or a new component. Here’s an example where you can replace `LINK_TO_MOBILE_IMAGE` with the actual image link:

```plaintext
.mobile-view .xmas-banner-image {
  background-image: url("LINK_TO_MOBILE_IMAGE");
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.desktop-view .xmas-banner-image {
  background-image: url("LINK_TO_DESKTOP_IMAGE");
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

```

You’ll have to [tinker with the CSS](https://meta.discourse.org/t/how-to-make-css-changes-on-your-site/168101), but hopefully that gets you started.

---

_[View the full topic](https://meta.discourse.org/t/versatile-banner/109133)._