Page vs. Blog Backgrounds

[Boans]

I have been using your Starter: Hero header template and setting my website background as an image in the Customize Theme Options area. This allows my content to float above my background for the header, footer and sections.

This works great for the pages where I can use pro and place tint and other background colors over sections but in all of the blog related pages (and search etc) the background is too distracting because I don’t have that control.

Is there a way to use a fixed background image for just the pages? I tried to set an image to just the .page backgrounds but it scrolls with the content and doesn’t have the parallax effect.

[thai]

Hi @Boans,

You can simply disable the background image for blog & single post page by adding this custom CSS under Theme Options > CSS:

.blog .backstretch,
.single-post .backstretch {
    display: none !important;
}

Hope it helps

[Boans]

Thanks so much but I was hoping there was some CSS I could add to do the opposite and just have the background for the pages?

I tried to do something similar for .PAGE and it worked but the content didn’t scroll over it.

What you sent works but it seems like there is always another page that comes up that I didn’t include like the search template or register or something that wasn’t included in your CSS. Unless you have a snip that includes a few more of the common templates?

[ruenel]

Hello @Boans,

Please remove the background images which you have added in X > Theme Options > Layout And Designs because this will be applied globally. If you want to target just the pages, you may use this code:

body.page {
  background-image: url(http://placehold.it/600x600);
  background-size: cover;
  background-attachment: fixed;
}

Of course, you must supply the correct image url in the code above.

Please let us know how it goes.

[Boans]

Your code worked perfectly but I think I have been going about this the wrong way.

Thanks for being patient with me.

Unfortunately I didn’t realize that I still need the background image to appear in ALL of the site headers and footers and what I really need to do is just create an overlay background to go over the middle of ALL site templates EXCEPT for the pages. So I want to be able to see the site background through the .PAGE templates but for all other templates including the blog, search etc I want the ‘middle’ of the site to have a light grey back (something like RGB(243,243,243)

So what I need to do is apply the image globally in the Customize Theme Options but then add CSS that covers the content areas (the middle of the site) with a light grey for ALL the pages except the .PAGE templates. I am adding login credentials and a screenshot to a secure message.

[thai]

Hi @Boans,

Please try adding this custom CSS under Theme Options > CSS:

body:not(.page) .x-container.max.width.offset::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(0,0,0,0.6);
    top: 0;
    right: 0;
    display: block;
    bottom: 0;
    left: 0;
}

Hope it helps

[Boans]

Thanks a bunch, but we are almost there.

When I changed the background color to what I wanted RGB(243,243,243, .9) the middle of the page looked great and didn’t affect the .page files but it did affect the header and footer of all of the blog pages etc.

I attached another screenshot to show you what it is doing … my goal here is to just have the middle area affected and the header and footer still transparent.

[thai]

Hi @Boans,

Please update the previous CSS to this:

body:not(.page) .x-container.max.width.offset {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 35px 6%;
}
body:not(.page) .x-container.max.width.offset::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgb(87, 70, 65, 0.5);
    top: 0;
    right: 0;
    display: block;
    bottom: 0;
    left: 0;
}

Hope it helps

[Boans]

Perfect, thanks! One thing though, when I added that code it covered the side bar on the right so what I did was change the z-index to -1 and it fixed it.

Was that the correct way for me to fix that or will it cause other problems?

[paul.r]

Hi @Boans,

Yes, that is the correct way to do it,

Have a great day!