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.
01 vánoce_001.jpg
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.
3 Before.png
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.
04 Upload image edited with marks.png
Now the image has been uploaded onto administration. Just below the image is its url, which we will work with momentarily.
05 Uploaded image with url edited with marks.png
3. Copy the following CSS code:
body {
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.
06 Paste the CSS with marks.png
Some CSS explanation:
This is the correct selector for most design templates. If it doesn’t work try using .screen instead.
You will insert the image url here in step 4.
Keep this centered.
The value cover will stretch the image across the entire background area.
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.
07 Paste the image url with marks.png
Now your website has a holiday image covering the entire background.
8 After inserting image.png
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.
9 After inserting content background.png
To insert the content background, paste the following code at the very bottom of the CSS Editing field:
background: rgb(255,255,255);
10 Paste content background CSS with marks.png
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.
11 After inserting transparent content background.png
Add this in the same way as the previous content background. The code to insert is as follows:
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.
12 With header image.png
So, to end, we’d like to wish you a Merry Christmas and a Happy New Year!
01/19/2016 11:24:25
Or visit this link or this one