Page Background Image

Add these codes to Custom CSS Box and click Save

Desktop Only

/* Desktop Only */
@media screen and (min-width:768px) {
body {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}}

Mobile Only

/* Mobile Only */
@media screen and (max-width:767px) {
body {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

Blog Page (list)

/* Blog Page (list) */
[class*="type-blog"].view-list {
  & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

Blog Post

/* Blog Post */
[class*="type-blog"].view-item {
   & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

Event List

/* Event List */
[class*="type-event"].view-list {
   & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

Event Detail

/* Event Detail */
[class*="type-events"].view-item {
   & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

Shop/Category

/* Shop/Category */
[class*="type-products"].view-list {
    & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

Individual Product

/* Individual Product */
[class*="type-products"].view-item {
    & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

Cart Page

/* Cart Page */
body#cart {
   & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

Homepage Only

/* Homepage Only */
body.homepage {
   & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

Other pages (exclude homepage)

/* Other pages - exclude homepage */
body:not(.homepage) {
    & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

When the burger menu is open

/* When burger menu is open */
body.header--menu-open {
  & {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
}

One Page

Add this code to Page Header Code Injection and click Save

If you use a Personal Plan (doesn’t support Code Injection), you can add code to Code Block.

<!-- Page Background Image - One Page -->
<style>
body {
  background-image: url(https://cdn.pixabay.com/photo/2024/01/15/19/40/animal-8510775_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.section-background, .section-border, section {
  background-color: transparent !important;
}
</style>