Please respond to layout experts

Question

HTML

There is a picture with a background for the site, in layers, with a resolution of about 1200 by 1800 (I inserted a preview below). The devil pulled me, at the end of a large project, he will agree to lay out the template to the heap (the layout was provided).

Please pay special attention to the color transitions and the complex pattern in the central area.

Question to all:

1) How to make a normal background for rubber layout based on this. (the logo should be at the level of the upper cloud, the footer should be slightly higher than the lower one). The central area must be pulled (or vice versa compressed, according to the situation), but how the hell can such an image be stretched ?? Naturally, compatibility with the most common screen extensions is again needed.

2) How to clearly and easily explain to the customer that it is impossible to do this in this form?

Please unsubscribe to everyone who can say something on the merits - I will probably give the customer a read.

Answer 1

The pattern itself seems to be repeating, if I were you, I would ask the designer for the upper and lower "clouds" in a wide version with translucency.

Answer 2

Probably not breaking the pattern.
Here the pattern seems to be even non-repeating, otherwise it would be possible to make a pattern, but there is still a gradient.
The devil, I surrender to the campaign, you can’t make it last.
PS I am a programmer and not very strong in layout.

Answer 3

There are at least 2 ways for width both not very normal and 1 for
width and height the best but I don't know if it
's possible in your case
put img into it with a
div background and img should be width, height - 100%, the pattern needs to be prepared a little by itself, that is, the pattern itself will be cut off and its continuation will already be the background of the body
2) On the left and right, you have an almost repeating pattern, if it can be repetitive, then align the background in the center, while the picture should be somewhere around 3000 in width, and what you have now in the post should be in the center of this picture, the rest of the pattern is the
most normal
If the pattern is repeated or large in size, put the pattern on the background, the clouds will be separate, for the header transparent png with clouds, for the footer sticky and also transparent png
If I wrote something badly, I can explain in more detail

Answer 4

You can try to make the background not moving. It's like one of the options.

Answer 5

If it is possible to get this layout in layers, then, in principle, it is possible.
In the central pattern, a repeating pattern is visible - it is paved with “tiles” as the lowest layer.
Overlay the clouds and the bottom gradient on top as translucent PNGs (although they will weigh a lot).
But there is still a question, how to pull the clouds specifically in width? There are two exits here.
Or ask the designer to draw them to a larger width (1920+) and just center them with trimming the excess on the sides.
Or divide the header and footer into 3 overlapping parts (left edge-center-right) and drag them, changing the width of the intersection zones. But this is quite cumbersome in terms of code volume and clipping artifacts are possible.

Answer 6

yui_room9 already answered - I want to add that the weight of these 2 pictures on top of the background will not be weak, about 150-200 K each (you will have to make a translucent PNG). And a separate difficulty will be the introduction of this design (2 images under everything else) on the background of the pages, because the content in the usual position: static will have to be abandoned, done in the relative layer. This will probably cause problems with widgets and scripts on pages that need to be hosted on the underlying thread - dynamic menus, for example. The cost of their installation and refinement will increase. Maybe not, if such elements are not applied.
Also, the 2nd image will be in a footer nailed to the bottom (div style=position:bottom:0 X image X /div), so the nailed footer needs to be chosen so that it all works together. This is not very simple - look at how many publications on the Internet and on Habré about the nailed footer, and there is no universal solution.
In general, if 1) the customer agrees with very heavy images in the design, which will not be drawn immediately (unfortunately, it cannot be eliminated; only for small screens, you can send lighter images immediately); 2) if he agrees to a complex basic layout of the page, which will increase the cost of improvements in the future, 3) if he understands that already at this stage, work is added to a good layout designer for 1-3 days (depending on how many pages to redo and which ones), then such a feature can be accepted by them.