Website Background Image for WordPress

Seamless background stretch is a unique technology provided by Divine Elemente only, that for the first time in web industry allows to display textures or background of a website block at vertical stretching or compression with no visible seams!

Background image is graphics that fills spaces to the left and to the right from the website’s content boundaries (on monitors with high screen resolution).

An example of a template with use of ‘Seamless stretch’ and ‘Background image’

In this guide, we’ll consider main aspects of work with this unique technology and large background image.

---

Use of ‘Sides’ grid blocks

If you use a template with a graphics that fills spaces to the left and to the right from the website’s content boundaries, a special layout grid with ‘Sides’ blocks can be applied.

An example of a template with use of ‘Sides’ grid blocks

Interesting: An author of this theme spent near a week to handcraft beautiful design in Photoshop, providing full detalisation from scratch… However to publish a complete working theme for WordPress without a line of code, you’ll need less than 5 minutes.

First of all, to create a template with sides, specify an appropriate layout grid with additional ‘Sides’ blocks in the Layout Editor.

Selection of an appropriate layout grid

If you decided to create a template with sides, you are to select a required layout grid in the right panel and set parameters in accordance with the page’s template.

More details on this process can be found in the Layout Editor guide.

Selection of a grid and setting of page’s parameters in the Layout Editor.

Everything in the ‘Sides’ grid blocks will be defined as an image outside the website’s content boundaries.

The next step for this theme’s creation is “Addition and assignment of theme elements”.
Learn how to create WordPress themes.

Then, let’s consider theme’s stretch parameters responsible for large background image filling at content’s height enlargement.

---

Use of stretch parameters

There are just four types of filling background’s gaps in case the content breaks page boundaries vertically: No Stretch, One Big Background, Simple Stretch, Seamless Stretch.

Types of background design.

• BG Type: One Big Background – At page’s enlargement, layers that lie on the background are merged and published as one huge image, including the ‘Footer’. It’s recommended to use this type for one-color website or websites with one large photo.

Types of background design. One Big Background.

• BG Type: No Stretch – At page’s enlargement, background’s gaps are not filled with repeated images of this background. It’s recommended to use this type for the ‘Header’ and the ‘Footer’ grid blocks, as these images are not to stretch vertically in 90% cases.

Types of background design. No Stretch.

• BG Type: Simple Stretch – At page’s enlargement, background’s gaps are filled with repeated images of this background. It works well for flat backgrounds, but not for complex textures.

Types of background design. Simple Stretch.

• BG Type: Seamless Stretch – At page’s enlargement, background’s gaps are filled with repeated images of this background with unique smart algorithm. This method is extremely useful for really complex backgrounds (textures like leather, grass, wood, paper, etc.).

Types of background design. Seamless stretch.

Please Note: Possibility to set a background is available only for elements and the entire page in Divine Elemente 0.9. But possibility to set background for widgets and grid blocks will be available in the next version of Divine Elemente plugin.

Have ideas about how to improve this functionality? Create a post at our forum or become a beta tester.

---

Optional parameters

For more detailed page settings, you can specify your own stretch parameters for each background part.

For example: Leave No Stretch for ‘Header’, set Seamless Stretch for ‘Content’ and use Simple Stretch for the ‘Footer’.

You can also set a position and width of stretch area for each grid block. To do that, drag stretch area’s boundaries on the canvas or set its exact position and size in the Properties panel.

Stretch parameters. Stretch area’s specifying.

It’s necessary to set the following parameters for exact specifying of the stretch area:

– Stretch: Distance from top (px). It sets a top point of the background area, which will be used for the background’s gaps filling.
– Stretch: Height of tile (px). It allows to set the background area’s height that will be used for the background’s gaps filling.

Almost each option includes a ‘Fade’ parameter.

---

Fade effect

The ‘Fade’ effect is a parameter that allows to create an effect of image’s smooth transition into a background color.

Fade parameter. Setting of the parameter’s values.

The above parameter’s values are indicated in percentage ratio from the entire block across and down accordingly.

Using the fading background images considered above, you can improve your theme’s look and quality and create really unique design of your website.

In the future, this guide will be expanded greatly. Check back often.

---

Conclusion

You have just found that it’s really possible to create a seamless background image performing no manual work, but several clicks only. And you have a choice of stretch parameter for your personal needs during website design creation with possibility to use the ‘Fade’ effect.

---

Related guides and tutorials

1. Layout Editor
2. Quick start guide

---

External links

1. Ideastrunk