Full page static, unique background image per page

Support
#1

I’ve tried searching support/forums for this topic, but am not coming up with much of anything. I’m pretty sure this is a common idea, so hopefully someone can point me in the right direction.

  1. I’d like to set the background of a given page to cover, static. I’ve found how to set a section to 100%, but not 100% height, so if the content lacks in length, the image cuts off. This request would be similar to this site and it’s pages:
    a. http://asula.com/how-we-help/chiropractic
    b. http://asula.com/resources
    c. and all the other pages there, etc… each page has a different image covering the background with the content on top.

  2. Is there a quick start guide or place with consolidated YouTube how-to videos? I’m new to this support format and am struggling to search for topics or how to get support.

I’m using Pro, btw.

Thanks

#2

http://a20.348.myftpupload.com/relaunch-coming-soon

I’ve faked the effect, I guess. I know that image is super huge, but I haven’t had time to optimize the images yet, just trying to get the landing page going in a general sense. I did this with a single section and added rows, but what if I want multiple sections on the page with the static background? How would I do that?

#3

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Conversation Forum (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

#4

Hi There,

Thank you for writing in! Each of the pages has the Background Image(s) option (https://prnt.sc/g6mcjl), where you can add a unique background image for a page. You can even add multiple background-image in there. Do not leave the Background image fade and background image duration empty.

Set the background-color of your Section to none or transparent so the page background image can be see-through.

Hope it helps,
Cheers!

1 Like
#5

Thanks for your reply. I’ll try that later today and let you know how that went. Cheers.

#6

So, I added the background image to the page:

Then I edit the page in Pro:

Tried both transparent and none, but the page still shows a white background:

Any ideas?
http://a20.348.myftpupload.com/relaunch-coming-soon/

Thank you.

And, thank you for moving my post to the proper forum and sharing the links…

#7

Hi There,

Yup, there is a white background on x-site div, please add this on Theme Options > CSS

.site, .x-site {
	background-color: transparent;
}

Hope it helps,
Cheers!

#8

Beautiful! Thanks so very much!!

#9

You are most welcome. :slight_smile:

#10

Is this something that should’ve been taken care of by the page inspector, or is this snippet required to be added for this effect? I guess I’m a little surprised that there wasn’t a WYSIWYG control for this. Still learning the ins and outs of this platform (loving it so far).

#11

Hello - we have the same issue in trying to create a landing page with a background image and i can work out how to do it as shown above - http://qmk.com.au/tradeshow-help/ but the image only shows when logged in…? Does it show for others?

#12

#13

http://qmk.com.au/wp-content/uploads/Logged-In.png

#14

@segnaro

Yes, that snippet is required to have the same effect.

The white background was intentionally added by design for renew stack.

@Quantum

I can see you have cache plugin installed.
Try clear your plugin cache and browser cache then check again.
If you are using cloudflare, login to your account and clear the cache from there.

Thanks

#15

@paul.r I have cleared the cache and it still doesnt show when logged out…? Are you seeing the background when you view the link?

#16

Hi @Quantum

Please open a new thread, briefly explain your situation and provide us login credentials in a secure note.

Thank you

#17

Has this been resolved? I know it’s an old topic but I am having the same issue right now and tried the CSS suggested above.

Have an image as the background for the entire page. I’ve added it in both Theme Options AND going Pages->background images outside of Cornerstone. I can see the background image fine but any sections that I create have a white background and I cannot make them transparent.

#18

Screen Shot 2022-04-06 at 6.17.40 PM
Screen Shot 2022-04-06 at 6.17.40 PM1188×1398 261 KB

Here you can see a section that has been created and one that I’m trying to create and then the map that is the background. All settings are set to transparent in SETUP for each element.

#19

Hello Michael,

Are you using the Ethos stack, Icon stack or the Renew stack? Perhaps these old threads can help you:

For Ethos stack:

For Icon and Renew stacks:

Kindly let us know how it goes.

#20

Got the same problem. Ethos stack. Suggested css from 2017 doesn’t work.

Edit: I somehow found the solution by adding this css

.x-container.main:not(.x-row):not(.x-grid):not(.x-div):not(.x-bar-content):not(.x-slide-container-content):before {
background-color:transparent;
}