Add Background Color to Header

Add these codes to the Custom CSS box and Save

Desktop Only

/* Desktop Only */
@media screen and (min-width:768px) {
header#header {
    background-color: #f1f !important;
}
}

Mobile Only

/* Mobile Only */
@media screen and (max-width:767px) {
header#header {
    background-color: #f1f !important;
}
}

Blog Page (list)

/* Blog Page (list) */
[class*="type-blog"].view-list header#header {
    background-color: #f1f !important;
}

Blog Post

/* Blog Post */
[class*="type-blog"].view-item header#header {
    background-color: #f1f !important;
}

Event List

/* Event List */
[class*="type-event"].view-list header#header {
    background-color: #f1f !important;
}

Event Detail

/* Event Detail */
[class*="type-events"].view-item header#header {
    background-color: #f1f !important;
}

Shop/ Category

/* Shop/Category */
[class*="type-products"].view-list header#header {
    background-color: #f1f !important;
}

Individual Product

/* Individual Product */
[class*="type-products"].view-item header#header {
    background-color: #f1f !important;
}

Cart Page

/* Cart Page */
body#cart header#header {
    background-color: #f1f !important;
}

Homepage Only

/* Homepage Only */
body.homepage header#header {
    background-color: #f1f !important;
}

Other Pages (exclude homepage)

/* Other pages - exclude homepage */
body:not(.homepage) header#header {
    background-color: #f1f !important;
}

On Scroll Only

/* On Scroll Only */
header#header.shrink {
    background-color: #f1f !important;
}

All Pages

/* Header background - all pages */
header#header {
    background-color: #f1f !important;
}

One Page

Add this code to Page Header Code Injection and click Save

<!-- One Page -->
<style>
header#header {
    background-color: #f1f !important;
}
</style>

Result

And finally, you will have a result like this

Add Background Image to Header

Add these codes to the Custom CSS box and Save (you can change the example image URL to the URL that you want)

Desktop Only

/* Desktop Only */
@media screen and (min-width:768px) {
header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

Mobile Only

/* Mobile Only */
@media screen and (max-width:767px) {
header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

Blog Page (list)

/* Blog Page (list) */
[class*="type-blog"].view-list header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Blog Post

/* Blog Post */
[class*="type-blog"].view-item header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Event List

/* Event List */
[class*="type-event"].view-list header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Event Detail

/* Event Detail */
[class*="type-events"].view-item header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Shop/ Category

/* Shop/Category */
[class*="type-products"].view-list header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Individual Product

/* Individual Product */
[class*="type-products"].view-item header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Cart Page

/* Cart Page */
body#cart header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Homepage Only

/* Homepage Only */
body.homepage header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Other Pages (exclude homepage)

/* Other pages - exclude homepage */
body:not(.homepage) header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

On Scroll Only

/* On Scroll Only */
header#header.shrink {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

All Pages

/* Header image - all pages */
header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

One Page

Add this code to Page Header Code Injection and Save

<!-- One Page -->
<style>
header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/10/11/44/tulip-8244705_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Result

The result is like this