# Image background in d-header

**URL:** https://meta.discourse.org/t/image-background-in-d-header/200398
**Category:** Support
**Created:** [August 14, 2021, 11:48am UTC](https://meta.discourse.org/t/image-background-in-d-header/200398 "2021-08-14T11:48:50Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Garrick](https://avatars.discourse-cdn.com/v4/letter/g/b9bd4f/32.png) [@Garrick](https://meta.discourse.org/u/Garrick)
#### Post date: [August 14, 2021, 11:48am UTC](https://meta.discourse.org/t/image-background-in-d-header/200398/1 "2021-08-14T11:48:50Z")

</div>

How would the proper way to add this be? Simple way with css to use the image?

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 14, 2021, 1:42pm UTC](https://meta.discourse.org/t/image-background-in-d-header/200398/2 "2021-08-14T13:42:11Z")

</div>

Hi Garrick,

This is very dependent the used image. You can use simple css code target `.d-header` class.

Create a new component on `/admin/customize/themes` and paste in common _(both desktop and mobile)_ css section or where you want to prefer use the background image desktop or mobile.

```plaintext
.d-header {
  background: url(your image url);
  background-repeat: no-repeat;
  background-size: cover;
}

```

Example

```plaintext
.d-header {
  background: url(https://i.imgur.com/SqObEfW.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}

```

Will looks like this ⬇

 ![Screenshot 2021-08-14 at 15.37.25](https://global.discourse-cdn.com/meta/original/3X/b/4/b418a817e50f9898d001c15e94c3979e1ac2c317.png)

More info about background property

> **[background | CSS-Tricks](https://css-tricks.com/almanac/properties/b/background/)**
>
> The background property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a shorthand

I hope this is helpful 🙂

---

<div class="post-metadata">

### Author: ![Garrick](https://avatars.discourse-cdn.com/v4/letter/g/b9bd4f/32.png) [@Garrick](https://meta.discourse.org/u/Garrick)
#### Post date: [August 14, 2021, 2:48pm UTC](https://meta.discourse.org/t/image-background-in-d-header/200398/3 "2021-08-14T14:48:01Z")

</div>

> [@Don](#):
>
> ```plaintext
> .d-header {
> background: url(https://i.imgur.com/SqObEfW.jpeg);
> background-repeat: no-repeat;
> background-size: cover;
> }
> 
> ```

Thank you Don! Just how I needed it.