Options for stored design images

You can add a background image to almost all areas of a design. Normally, however, you should use it sparingly. A design image should be an eye-catcher and captivate the visitor but should not distract from the content. Too many areas with a background image make your website restless and instead of focusing on the essentials the visitor quickly loses the overview. Less is better here in any case.


If you use a transparent header area, for example, you can simply use the background image as a header by using a striped structure and applying a color to the outer areas of your web page to cover the background image so that it is only displayed at the top of the striped area where the transparent header is located. Thus a quasi header image is created, which is extended over the entire browser width. In order for the quality to be correct, the image used should have a width of 2,560 px and a height of 1,440 px. With these dimensions, even larger monitors are completely covered. If you make the outer areas slightly transparent, you can give your design a special touch.


Natural you can also use pictures for the headers and as said also for other areas. The good thing about page4 is that you have a lot of options to place such a background image. There are three input elements and three dialogs for selecting options.

Option 1: The alignment of your image

What does that mean? Imagine putting a large photo or poster on a table. Since the photo is smaller than the tabletop, you now have several ways to align the image. The following options are available:

a) Place the photo at the top and then push it to the left edge so that it is in the corner

b) Place the photo at the top edge and then align it to the center.

c) Place the photo on the top edge and then push it to the right edge so that it is in the corner.

d) Move the photo down until it is exactly in the middle and then push it to the left edge.

e) You leave it exactly in the middle.

f) You move the photo from the middle to the right edge.

g) You place it at the bottom edge and push it to the left into the corner.

h) You place it on the bottom edge and move it exactly to the middle.

i) You place it on the bottom edge and then move it to the right into the corner.


Exactly these options are available for each background image. The "table" is always the area that the image fills. If you place an image on the background, the entire browser is the table. If you place the image in a header area that is 500 px high and 1,000 px wide, this is the location where the image will be aligned.

If the image is larger than the location because you have set the adjustment to original size, then only a portion of the image will be displayed and parts of the image will not be visible. If you center the image, the center of the image is also displayed in the center of the header and the image areas that no longer fit into the area run out of the area at the bottom, top, left and right. This becomes clear when you align the image to the lower edge, then you see the lower part of the image and upwards the image disappears from the area. Conversely, of course.


If you adjust the image so that it should always fill the entire area and be distorted if necessary, the alignment has no effect on the display.

Option 2: Scaling your image

You should choose this option carefully. If you choose an image that is far too small for the background and determine that the image is displayed in its original size, there will be a picture in the background that is lost, aligned according to your settings and probably does not meet your expectations. If you use such a small image and then set the scaling to cover, for example, then the system enlarges it until it can perform this task and at the end it looks very blurry, pixelated and alienated because there are not enough pixels to fill the areas. This dialog provides help texts to explain each scaling. Just click on the image to view it in its original size, read the text and try it out.

Option 3: Repeating your image

You should only use refresh if you are using tiles, i.e. if repeating your image leads to a closed pattern or if you want to achieve special effects. For example, to create a gradient, it is sufficient to create a narrow strip in an image processing software, which must be just one pixel wide and then upload it and switch on the "horizontal" or "vertical" tiling option. The result is a clean gradient - if the strip is perfectly made - and the file size is very small. In addition, the gradient then adapts to the width or height, depending on whether the strip is horizontal or vertical.


The explanation itself can be found in the dialog next to the icons.

page4 Webbaukasten 0