I’m trying to create a landing page on my site where the menu is hidden, there’s a custom background image, and an aweber signup form over top.
I’ve added Custom CSS without any change, and it’s a struggle to create a full width background image that works.
So far the only solution I’ve come up with is to create an entirely new wordpress site for it. There must be a better way, a better plugin, or some way to simply set this up. Help me :)
Thank you!
Hi Colin,
You can do this in the latest version of Vantage via the page settings. Simply tick the “Page Title”, “Hide Masthead” and “hide Footer Widgets” settings. Then set the page layout to full width.
Now, make note of your specific page ID in the address bar.
Then navigate to WP AdminAppearanceCustom CSS and add the following CSS:
.page-id-1736 { background: url('http://url.to/background.image'); background-size: cover; background-repeat: no-repeat;}.page-id-1736 .site-main { padding: 0 35px;}(be sure to replace 1736 with the ID of your page)
This should get you started. Let me know if there’s anything else you would like help with adjusting.
Thanks Alex. I did these steps exactly as you outlined, including choosing
'Default Template' in Page Attributes, with the result being a blank page,
no content, no image.
[image: Inline image 1]
I added the code to Custom CSS:
.page-id-9720 {
background: url('
http://www.colinryanspeaks.com/wp-content/uploads/2016/08/grandmanomics-background.001-e1472823958421.png'
);
background-size: cover;
background-repeat: no-repeat;
}
.page-id-9720 .site-main {
padding: 0 35px;
}
What else needs to be changed?
Hi Colin,
Sorry for the delay.
It definitely shouldn’t have outputted a blank page. Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Thanks Alex.
http://www.colinryanspeaks.com/grandmanomics/ It's public.
Hi Colin,
Ah, I understand. You actually want the content area to have the background instead.
Please replace the previous CSS with the following CSS:
.page-id-9720.body.layout-full { background: #66458c; } .page-id-9720 #page-wrapper { background: url('http://www.colinryanspeaks.com/wp-content/uploads/2016/08/grandmanomics-background.001-e1472823958421.png'); background-size: cover; background-repeat: no-repeat; padding: 0 35px; height: 98vh; width: 100%; max-width: none; } #main { background: none; } .site-footer { display: none; }How does that look? Just note that you might be better off moving the background image into an image widget as background images aren’t very responsive (due to being limited by aspect ratio) for the use type your after.
It knocks out the menu and header, but it doesn't achieve my goal here. I want to have this image as the background so I can put a sign-up form over top of the image. If I use an image widget in page builder it's not going to do that as it will sit next to it or above it, not under it.
It seems to knock out the ability to add other widgets.
Hi Colin,
The following CSS will allow you to place the form on top of the image. Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:
html, .page-id-9720 { height: 100%; } .page-id-9720 { background-color: #654688 !important; } .page-id-9720 .site-main { padding: 0 !important; } #page-wrapper { min-height: 100%; position: relative; } #main.site-main { margin-bottom: 100px !important; /* Ensure the footer doesn't overlap */ } .site-footer { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; background: #006eaa !important; padding: 5px 0 !important; } #pgc-9720-0-1 .so-widget-image { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 1920px; height: 98vh; max-height: 1080px; }You might also need to install the SiteOrigin CSS Editor.