# Site Publication Cover

This feature is specific to the Elrond theme. For the visual integrity of the site, you need to fill in this area.

***

<mark style="color:green;">With</mark> <mark style="color:green;"></mark><mark style="color:green;">**Elrond 2.0**</mark><mark style="color:green;">, there are now two different cover styles available: the classic</mark> <mark style="color:green;"></mark><mark style="color:green;">**Icon**</mark> <mark style="color:green;"></mark><mark style="color:green;">style and a</mark> <mark style="color:green;"></mark><mark style="color:green;">**Full Background**</mark> <mark style="color:green;"></mark><mark style="color:green;">cover.</mark>

### Select Cover Style

1. In the Theme settings, choose the appropriate **Cover style** based on your uploaded image—select **Icon** for a classic logo look or **Full Background** to cover the entire area.
2. If you're using **Full Background**, the image will be masked to match the theme design. To make it more visible, adjust the `--cover-opacity` setting. To do this, open **Code injection** from the settings, then click on the **Site Header** tab.
3. Paste the following code into the section that opens:

<pre><code><strong>&#x3C;style>
</strong>  :root{
    --cover-opacity: 0.6;   
<strong>   }
</strong>&#x3C;/style>
</code></pre>

4. You can enter values between **0 and 1** in this field. If you're already using other codes inside `:root` in the Site Header area, simply add the `--cover-opacity` setting anywhere within that block.

### Adding a Cover

1. After clicking on the ⚙️ **Settings icon** in Ghost Admin, go to the **"Title & Description"** tab under the General Settings section.
2. In this **"Site description"** field, you create the text for your **Cover area**. Fill in this field appropriately, and then **save it**.
3. Afterward, click on the **"Design & Branding"** tab, scroll down in the opened window, and find the **"Publication cover"**. The image you add here will be displayed in the **Cover area**. You can add a icon, logo, or big image.
4. Finally, click on the **"Save"** button in the top right corner. That's it!

{% hint style="warning" %}
If you don't add an image to the Publication cover section, only the site description will be visible in the cover area on your homepage.
{% endhint %}

### How to change the Cover Image size for the *<mark style="color:purple;">Icon option</mark>*?

1. In previous versions, this was done directly through the Ghost panel, but now you’ll need to do it from the **Code Injection** section.
2. Open **Code Injection** from the Ghost settings, then click on the **Site Header** tab.
3. **Paste the code below** into the section that opens, and choose your desired Cover Image size.

```css
<style>
  :root{
    --cover-image-height: 100px; 
   }
</style>
```

4. Finally, click **"Save"**.

{% hint style="info" %}
You can also include other custom variables within the same `:root` block, such as `--header-logo-size` or `--footer-logo-size`
{% endhint %}