Image options in design

You can add a background image to almost any part of a theme. Normally, however, you should use them sparingly. A design image should be eye-catching and captivate the visitor but 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're using a translucent header area, for example, you can simply use the background image like a header by using a striped structure and adding a color to the outer areas of your web page to cover the background image so that it only appears at the top of the striped area where the translucent header is located. This effectively creates a header image that is extended across the entire width of the browser. In order for the quality to be correct, the image used should have a width of 2,560 and a height of 1,440 px. With these dimensions, even larger monitors will be completely covered. If you make the outer areas slightly transparent, you can give your design a special touch.

Of course you can also use images for the headers and as I said for other areas. The good thing about Page4 is that you have a lot of options to place a background image like this. There are three input elements and three dialogs to select the options.

 

 

What does it mean? Imagine you put a large photo or poster on a table. Since the photo is smaller than the table surface, you now have several options for aligning the image. You have the following options:
a) You place the photo at the top edge and then push it to the left edge so that it lies in the corner.
b) You place the photo on the top edge and then align it to the center.
c) You put the photo on the top edge and then push it to the right edge so that it lies in the corner.
d) You move the photo down so that it is exactly in the center and then you move it to the left edge.
e) You leave it exactly in the center.
f) You move the photo from the center to the right edge.
g) You put it at the bottom edge and push it to the left corner.
h) You put it at the bottom edge and push it exactly to the center.
i) You place it at the bottom edge and then push it to the right into the corner.

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, then that is the space that the image will be aligned on.
If the image is larger than the space because you set the adjustment to original size, then only a section is always displayed and parts of the image are not visible. If you align the image in the center, the center of the image will be shown in the center of the header and the parts of the image that don't fit into the area will run out of the area at the bottom, top, left and right. This becomes clear when you align the image to the bottom edge, then you see the bottom part of the image and towards the top the image disappears from the area. The reverse is also true, of course.

If, on the other hand, you adjust the image so that it fills the entire area and is distorted if necessary, then the alignment has no effect on the display.

 

 

 

You should choose this option wisely. If you choose a much too small image for the background and specify that the image be displayed in its original size, then you will lose an image in the background that is aligned with your settings and probably won't meet your expectations. If you use such a small image and then set the scaling to, for example, Cover, then the system will enlarge it until it can do the job and end up looking very blurry, pixelated and alienated because there are not enough pixels to fill the area. This dialog provides help text to explain each scaling to you. Just click on the image to see it in its original size, read the text and try it out.

 

 

 

You should only use image repetition if you are using tiles, i.e. if the repetition of 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 editing software, which may well be just one pixel wide, and then upload it and turn on the "Tile horizontally" or "Tile vertically" option. The result is a clean gradient - as long as the stripe is perfectly done - and the file size is very small. Also, the gradient will then adjust to the width or height, depending on whether the stripe is horizontal or vertical.

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