Background picture behind content with full width header and footer in pro

[iTurtle]

hi there,
i wonder how i could achieve this:
having a background picture behind the content with full width header and footer. that would mean the background picture is covered by the content/text but would be visible to the left and right side of the browser window while the header and footer are still full width.
another way to put it: full width for header and footer but boxed for the content in the middle.
is that possible?
thanks a lot! kai
ps: like this but with full width header and footer… http://www.ostersymposium.ch/2018/?s=grusswort

[paul.r]

Hi Kai,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

[iTurtle]

thanks paul. please see secure note kai

[albrecht]

Hi Kai,

You can add this CSS in Theme Options > CSS

.entry-wrap {
    background: url(https://www.planwallpaper.com/static/images/Alien_Ink_2560X1600_Abstract_Background_1.jpg) no-repeat fixed;
}

.x-container {
  padding: 0 20px;
  background: #fff;
 }

Replace the url of the image to the image you want to use.

Hope this helps.

[iTurtle]

thanks a million @albrecht!
that is what i was looking for. so this is not possible with the provided settings in pro?
can the background picture also be scaled v=100% and h=100%?
something else. can the footer be attached always to the bottom of the browserwindow?
if the page has only little text the footer shows white space below it (start page).
thanks a lot! kai

[friech]

Hi There,

Yes, we can only do that with a custom CSS because that is actually a combination of boxed and full-width layout. It would not even possible if the layout started as boxed.

On the first block of CSS provided above, you can add the line below to keep the bg-image 100% in height and width.

background-size: 100% 100%;

But keep in mind that by doing this, we are forcing the bg-image to stretch and possible that your bg-image will look distorted.

If your page has only little text. You can add the line of CSS on the Section’s inline-css field, that way the section will always cover the available vertical space.

min-height: calc(100vh - 192px);

Hope it helps,
Cheers!

[iTurtle]

hi @friech! thanks so much! we are coming closer to what is should look like
your min-height code works, but pushes the footer out of sight. if i delete the space after the “-” the code stops working completely. so how to get the footer back if - 192px does not do it?
thanks again for your great help! kai

[albrecht]

Hi @iTurtle

Try this CSS

    min-height: calc(100vh - 360px);

Let us know if it works.

Thanks

[iTurtle]

thanks a lot @albrecht!
that was easy but not obvious to me
i made my footer now 130px in height but i need to deduct 320px to make it visible fully. how does this work? i would assume - 130px to move the footer into the visible area again.
please have a look at the link in the secure note:
how come i have white bars on the left and right hand side of the background picture?
this is not the case on the start page.
i set both pages to full-width template.
thanks a lot! kai

[friech]

Hi There,

Please use a Blank - Container | Header, Footer page template for your other pages just like on your home page.

The logic we use in that section’s min-height is simple, we just did subtract the height of your header and footer from the height of the screen (viewport).

screen height - (header's height + footer's height) = section height
100vh - (192px + 130px) = section's height

CSS calc() Function
Viewport Units

Hope this shed some lights,
Cheers!