Beautiful Theme banner and background

[jmfoust]

Hello,

Can I add a different banner (the long colored banner under the logo) to each page?

Can I change it so a blue background appears on each page?

Thank you
Janet

http://catwilliford.com

[Lauren @ OnceCoupled]

Sure, you can edit the CSS and either (a) replace the image or (b) remove the image and just use a blue color code. The block you're looking for is:

.custom-background .site-header-banner {
     background: url(http://catwilliford.com/wp-content/themes/beautiful-pro/images/header-banner.png) #aecdef repeat left fixed;
}

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[jmfoust]

Hi Lauren,

How would I use a different image for that banner on each page? Is that possible?

Can I add an actual Background to the page, not the banner. If so, how?

Thank you again!
Janet

[Lauren @ OnceCoupled]

Hey Janet,

If you want to add different images to each page via CSS, you can use different body tags such as .home, .page, or in more specific cases, page-id-602. This may not be the most feasible option if you want every single page to have a unique image.

You'd follow the same process for either the banner or background, using either .home .custom-background .site-header-banner or .home body

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Brad Dalton]

Wrote about this recently http://wpsites.net/web-design/display-different-after-header-images-in-beautiful-pro-theme/

If you wanted a different image on every post/page, you would need to hand code a custom meta box and use custom fields or use a plugin like ACF.

---

Tutorials for StudioPress Themes.

[Author]

Posts