How to change from tiled background to a full screen fixed background?

Some of our themes comes with the traditional tiled background. The tile background will allow a quicker loading time compared to a full screen background image. So in the design that works well with tiled background, we will always favor tiled background over full screen fixed background.

Nevertheless, look is very important and at times it calls for a customization to turn a tiled background into a fixed full screen background. This tutorial will show you how to do this.

1) Open main_style.css

If you haven’t log into your Weebly account, you can do so now.

First open the W Theme editor and click into main_style.css

w-theme-editor

2) Edit Background CSS codes

Locate this code in the main_style.css page. Depending on the theme you are using, the codes may look a little different the main thing here is to identify the body tag and the background code.

body {

font: 12px Arial, sans-serif;
color: #646464;
height: 100%;
background: url(bodybg.jpg) 50% 0;

}

Here we will edit the background code. To stop the background from repeating, we will add “no-repeat” to the highlighted code above. The finished codes will look like this:

background: url(bodybg.jpg) 50% 0 no-repeat;

 

Step3: Make the background fixed and stretched to full screen

After making the background stop tiling, it still will not stretch full screen. Here we will add 3 codes to make the background stretched to full screen and make it fixed.

 

i) The Height Code

Depending on your theme, there may or may not be a height code. If there is a height code like the example below, change the height of the background from 100% to auto.  If you don’t see a height code, add one in: height: auto;

body {

font: 12px Arial, sans-serif;
color: #646464;
height: 100%;
background: url(bodybg.jpg) 50% 0;

}

 

ii) Stretch Background Code

Now we need to add two code in the body tag.

background-attachment: fixed;
background-size: 100% auto;

Add these two code directly above the }. Here is how it will look like:

body {

font: 12px Arial, sans-serif;
color: #646464;
background: url(bodybg.jpg) 50% 0; height: 100%;
background-attachment: fixed;
background-size: 100% auto;

}

Step4: Save & Exit

Save your change and exit W Theme Editor.

Tags: , , , ,