How would you render a transitional bitmap background?

Question

css

Hello!
Actually, the subject is in the title. There is a typical landing page with a certain number of sections of the same type, but their background goes from one to another with the help of bitmaps, brushes, and so on. I didn’t come up with anything better than cutting into rectangles and putting each section in turn, but in this case there is a problem: the backgrounds must touch exactly, and if this can be done in one browser, then in all (chrome, mozilla, opera , ie9-11, edge) even with normalize.css, fonts are rendered a little differently, different line spacing, and so on, respectively, somewhere there is not enough background, but somewhere there is too much of it. I don’t want to set a fixed height for sections, probably it won’t help. How would you make this up?

Answer 1

They would have dropped a picture.
If the entire background is a single raster image, then export it entirely. Why divide it into separate rectangles (unless lazyload).
If there are just raster elements on the borders of the screens, then export them as separate elements.