CSS Style Editor Background tab

Set the background color.

Select the background image from the website or import an external image file.

Convert the background image to Base64 and embed it in the style sheet. For example, like converting

 

from:

background-image: url("images/background.png");

 

to:

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAATNm/RAAAAH0lE5MgAAAABJRU5ErkJggg==");

 

The image will be compressed first before conversion to make it smaller. Embed small images only and avoid embedding large images as this will increase the size of the style sheet. A Base64 encoded image is about 30% larger than the original one. Your page may be able to load faster as there is no extra http request to get the image.

Use responsive images for this image. A set of smaller images using the sizes specified in the Preference will be created from this image. Extra CSS rules will be generated to load appropriate ones according to the width of the browser window. For example, if the page is loaded in a mobile device, the image with width 320px will be loaded instead of this one so that the page will be loaded more faster.

select whether the image should be repeated horizontally (repeat-x) and / or vertically (repeat-y).

Select whether the image should be scrolled with the contents of the page.

Set the horizontal position of the background image

Set the vertical position of the background image.

Set the size of the background image.

Set the origin of the background image.

 

Set the clipping of the background image.

Apply gradient to the background image. Clicking on the Edit Gradient button will open the Edit CSS Gradient Dialog.