Centric Pro Header and background tweaks

[JC2]

Hello!

I've added a background image to the top widget area in Centric Pro (as opposed to the solid color in the demo) on http://sketchtoshelf.com, but that image is now showing behind the page titles on all pages. (http://sketchtoshelf.com/build-your-six-figure-business/)

Where would I change the backgrounds to *all* pages (other than the home page) to a solid color or no color? Can I also adjust the padding of that title area? It's a bit generous out of the box, and I'd like less top ad bottom.

I do use Design Palette Pro, but it's not easy to see what parts of the site correspond to their adjustment areas. So direct CSS tweaks are probably better.

Thanks!

http://sketchtoshelf.com/

[Ginger]

Hi there,

My suggestion would be don't use the Background image loader in the customizer....instead add this to your style.css file near the other .home-featured code. Assuming the image you want to use is in your media library, go there, click on the image and copy/paste the full path, then put that below where you see the place holder "YOUR URL". You may have to tweak the CSS further but this should get you started.

.home-featured {
   background-image: url("YOUR URL");
   background-attachment: fixed;
   background-size: cover;
}

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[cmgswg]

Thank you Ginger! - that worked

Philip

[cmgswg]

Ginger - that worked, but now my next hurdle is getting that image to resize all the way down to a mobile device. It resizes some but then stops before getting to mobile device size.

Thanks,
Philip

[Ginger]

I don't see any image? I can offer some tips if it's on your site to troubleshoot.

Worse case you'll just to add additional styling to your mobile entries found at the bottom of the file style.css.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[cmgswg]

Here is site under development - http://rv.savwebguy.com/

Primarily the top image to resize. I used same code for the next bg texture image as well.

Thanks,
Philip

[Ginger]

I see what you mean. In other themes, backstretch takes care of this. However, here, my suggestion would be to create additional image sizes for the smaller screens, and add that same block of CSS to those media query sections at the bottom of your style.css file. The only difference would be the URL for the image, would be the new smaller size for that screen....then you have all of your bases covered.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Author]

Posts