3 Easy Ways to Get Your Website Ready for Christmas
The holiday season is here! Maybe you’ve already decorated at home and at work, but what about your website? Here are 3 tips on how you can change the appearance of your Webgarden website to help spread the Christmas spirit.
1. Select a Christmas Design Template
Webgarden offers a number of thematic design templates, including some for Christmas. Use any of them to change the look of your website in just a few clicks.
You can find these Christmas design templates and more under the DESIGN tab in administration. Click on SHOW OTHER DESIGNS at the bottom of the page.
Just as with any other design template, switching to a Christmas template will change everything about the appearance of your website and will even delete any CSS edits you’ve made. To deck the halls without doing anything quite so drastic see the other options below.
2. Add a Festive Background to the Design You Already Have
Create a Christmas atmosphere on your website by doing something like inserting a background image. Simply follow the four steps below.
1. Find an image you’d like to use for the background. You can download images for free from websites like Unsplash.com, Pexels.com, Gratisography.com, and Pixabay.com.
TIP: The image should be at least 1920px x 1080px so that it will display well on Full HD monitors. But try to avoid images of more than 500kB which will slow down your site.
2. Go to the DESIGN tab in Webgarden administration and select CSS EDITING from the left column. Then hover over the green plus icon in the upper right-hand corner, select UPLOAD NEW IMAGE TO SERVER, and follow the steps.
Now the image has been uploaded onto administration. Just below the image is its url, which we will work with momentarily.
3. Copy the following CSS code:
body {
background-image: url("image_url");
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
background-image: url("image_url");
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
And paste it at the very bottom of CSS editing.
Some CSS explanation:
body
This is the correct selector for most design templates. If it doesn’t work try using .screen instead.
background-image
You will insert the image url here in step 4.
background-position
Keep this centered.
background-size
The value cover will stretch the image across the entire background area.
background-attachment
If you use the value fixed, the image will stay in one place as you scroll up and down. If that doesn’t suit your website, just delete this property.
4. Copy your image url, located directly below the image at the top of CSS editing (mentioned in step 2), and paste it into the value of the background-image property in place of image_url. Then SAVE.
Now your website has a holiday image covering the entire background.
How to make the text readable?
It may happen that your website text is not clearly visible against your new background. One way to solve this problem is to add an additional smaller background for your content. In this case, you will only be able to see the main background image on the sides of the screen where there is no content.
To insert the content background, paste the following code at the very bottom of the CSS Editing field:
.page{
background: rgb(255,255,255);
}
background: rgb(255,255,255);
}
SAVE.
TIP: Some design templates have yet another website background covering the body of the page which has its own color. In these cases, we recommend that you choose a color for the content background which will match.
Another way to make your text more readable is to add a transparent content background. Then the main background image will be partially visible through the content background, and the content will be readable.
Add this in the same way as the previous content background. The code to insert is as follows:
.page{
background: rgba(255,255,255,0.85);
}
background: rgba(255,255,255,0.85);
}
And don’t forget to SAVE.
TIP: The number 0.85 in the CSS specifies the level of transparency and can be adjusted to any value between 0 and 1. If you would like the content background to be more transparent, reduce the number. Alternatively, to make it more opaque, increase it.
If you don’t want a content background covering up your beautiful image, another option is to just change the color of the text itself so that it will stand out against the image. For instructions, see our advanced help article Insert an Image as Your Website Background.
3. Come Up with Your Own Ideas
Of course, you can decorate your website any way you’d like. Add a Christmas header, a banner, or anything else you can think of. Here’s where our instruction ends and it’s up to you and your creativity.
So, to end, we’d like to wish you a Merry Christmas and a Happy New Year!
