Im trying to get a landing page that looks this this http://www.hamiltonforward5.ca/volunteer?splash=1 How do I do this? My coding know-how is minimal. Can someone make this easy for me?
Our stock themes include the ability to display a background image across all pages on your site, but it sounds like you're interested in featuring a specific background image on just the splash page. This is possible, though it does require some HTML/CSS adjustments.
I'd recommend that you first create a class in your stylesheets specific to your splash page's background. You can add something like the following to the bottom of your theme.scss file:
.splash-bg {
background: url(YOUR_IMAGE_URL_HERE) no-repeat center center fixed;
}
The above CSS positions the image in the center and scales the background image to be as large as possible without repeating. Please note that you'll need to specify an image URL, which you can obtain if you upload an image to your theme files and copy the link address. Depending on your preferred look and feel, you may wish to customize the background property values. W3Schools provides some more details about the various background properties.
Once you've added created a class for the splash page's background in your stylesheets, next you will need to include it within the <body> tag of your splash.html file. You can add your class on the end, like so:
<body class="aware-theme v2-theme {{ page.page_class_name }} js splash-bg">
Showing 3 reactions
Sign in with