# Homepage Sections Background Color
You can add a unique touch to your home page by assigning custom background colors to each section. This feature utilizes CSS variables, making it simple to apply your desired colors across different sections.
### List of variables by sections:
* **1 + 2 light background**
```scss
--section-one-plus-two-light-bg
```
* **1 + 2 dark background**
```scss
--section-one-plus-two-dark-bg
```
* **1 (Featured) + 2 light background**
```scss
--section-one-featured-plus-two-light-bg
```
* **1 (Featured) + 2 dark background**
```scss
--section-one-featured-plus-two-dark-bg
```
* **1 + 3 light background**
```scss
--section-one-plus-three-light-bg
```
* **1 + 3 dark background**
```scss
--section-one-plus-three-dark-bg
```
* **1 (Featured) + 3 light background**
```scss
--section-one-featured-plus-three-light-bg
```
* **1 (Featured) + 3 dark background**
```scss
--section-one-featured-plus-three-dark-bg
```
* **List with sidebar featured posts light background**
```css
--section-list-sidebar-with-featured-posts-light-bg
```
* **List with sidebar featured posts dark background**
```css
--section-list-sidebar-with-featured-posts-dark-bg
```
* **List with sidebar latest posts light background**
```css
--section-list-sidebar-with-latest-posts-light-bg
```
* **List with sidebar latest posts dark background**
```css
--section-list-sidebar-with-latest-posts-dark-bg
```
* **List with sidebar (with image) featured posts light background**
```css
--section-list-with-img-sidebar-with-featured-posts-light-bg
```
* **List with sidebar (with image) featured posts dark background**
```css
--section-list-with-img-sidebar-with-featured-posts-dark-bg
```
* **List with sidebar (with image) latest posts light background**
```css
--section-list-with-img-sidebar-with-latest-posts-light-bg
```
* **List with sidebar (with image) latest posts dark background**
```css
--section-list-with-img-sidebar-with-latest-posts-dark-bg
```
* **Posts with date + sidebar featured posts light background**
```css
--section-posts-with-date-sidebar-with-featured-posts-light-bg
```
* **Posts with date + sidebar featured posts dark background**
```css
--section-posts-with-date-sidebar-with-featured-posts-dark-bg
```
* **Posts with date + sidebar latest posts light background**
```css
--section-posts-with-date-sidebar-with-latest-posts-light-bg
```
* **Posts with date + sidebar latest posts dark background**
```css
--section-posts-with-date-sidebar-with-latest-posts-dark-bg
```
* **Categories (tags) tabs light background**
```css
--section-categories-tabs-light-bg
```
* **Categories (tags) tabs dark background**
```css
--section-categories-tabs-dark-bg
```
* **Grid 2 column light background**
```css
--section-grid-two-column-light-bg
```
* **Grid 2 column dark background**
```css
--section-grid-two-column-dark-bg
```
* **Grid 2 column + sidebar with featured posts light background**
```css
--section-grid-two-column-sidebar-with-featured-posts-light-bg
```
* **Grid 2 column + sidebar with featured posts dark background**
```css
--section-grid-two-column-sidebar-with-featured-posts-dark-bg
```
* **Grid 2 column + sidebar with latest posts light background**
```css
--section-grid-two-column-sidebar-with-latest-posts-light-bg
```
* **Grid 2 column + sidebar with latest posts dark background**
```css
--section-grid-two-column-sidebar-with-latest-posts-dark-bg
```
* **Grid 3 column light background**
```css
--section-grid-three-column-light-bg
```
* **Grid 3 column dark background**
```css
--section-grid-three-column-dark-bg
```
* **Grid 4 column light background**
```css
--section-grid-four-column-light-bg
```
* **Grid 4 column dark background**
```css
--section-grid-four-column-dark-bg
```
* **Big slider light background**
```css
--section-big-slider-light-bg
```
* **Big slider dark background**
```css
--section-big-slider-dark-bg
```
* **Medium slider light background**
```css
--section-medium-slider-light-bg
```
* **Medium slider dark background**
```css
--section-medium-slider-dark-bg
```
* **Slider 2 posts light background**
```css
--section-slider-two-posts-light-bg
```
* **Slider 2 posts dark background**
```css
--section-slider-two-posts-dark-bg
```
* **Small slider light background**
```css
--section-small-slider-light-bg
```
* **Small slider dark background**
```css
--section-small-slider-dark-bg
```
* **Medium posts + small posts light background**
```css
--section-medium-small-posts-light-bg
```
* **Medium posts + small posts dark background**
```css
--section-medium-small-posts-dark-bg
```
* **Membership light background**
```css
--section-membership-light-bg
```
* **Membership dark background**
```css
--section-membership-dark-bg
```
* **Subscribe banner light background**
```css
--section-subscribe-banner-light-bg
```
* **Subscribe banner dark background**
```css
--section-subscribe-banner-dark-bg
```
* **Author name with image and bio light background**
```css
--section-with-author-light-bg
```
* **Author name with image and bio dark background**
```css
--section-with-author-dark-bg
```
* **Subscribe banner with benefits light background**
```css
--section-subscribe-banner-with-benefits-light-bg
```
* **Subscribe banner with benefits dark background**
```css
--section-subscribe-banner-with-benefits-dark-bg
```
2. Access your website's CSS file or an area where you can input custom CSS, often found within the site settings or theme customization panel.
3. Define the desired background color for the section by using the CSS variable. For example, to change the 1 + 2 light background color to a soft pink, you would write:
4. ```css
:root {
--section-one-plus-two-light-bg: #ffc0cb;
}
```
4. Save your changes. This will apply the new background color to the specified section across your website. Repeat these steps for any other sections you wish to customize.
### To customize a section's background color, follow these steps:
1. Identify the CSS variable associated with the section you wish to customize. Each section has a designated variable, such as `--section-one-plus-two-light-bg` for the **1 + 2 light background** section.
2. Go to **Settings > Code injection** from the admin panel
3. Open **Site header** tab
4. Specify your preferred variables along with their corresponding colors in the following manner:
```html
```
5. Click **Save**
This method provides you with the flexibility to experiment with and update the aesthetics of your home page.
### To customize the sidebar's banner widget input's background color, follow these steps:
1. Go to **Settings > Code injection** from the admin panel
2. Open **Site header** tab
3. Add the following **code** and specify your preferred color
```html
```
4. Click **Save**
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://highfivethemes.gitbook.io/digital-nomad-user-documentation/custom-settings/homepage-sections-background-color.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.