Menu
Index

CSS Style Editor Background tab

CSS Style Editor Background tab
1

Color

1. Color
Set the background color.
2

Image

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

Use data URI

3. Use data URI
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.
4

Repeat

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

Attachment

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

Horizontal Position

6. Horizontal Position
Set the horizontal position of the background image
7

Vertical Position

7. Vertical Position
Set the vertical position of the background image.