Waves over Background Image

I want to do a background image und over that background image I want to do some waves ( for example )
Now I put I bloc under the background image and use a class and set a negative margin …I think that works… but don’t :frowning: Looks good in Browser, but when I do a smaller Browser the files get smaller and get up … look my example files… do any one have an idea ? thanks :slight_smile:

Its only a short example … thanks a lot

Hi @tom2 ,

You could probably write some custom css w/ multiple background images, sim. to this:

.background-wrapper {
  display: block;
  position: relative;
  background-image: url("path/imagetop.jpg"), url("path/imagebelow.jpg");
  background-color: #cccccc;
  height: 20vh;  // 20% of window height
  background-position: bottom center, bottom center;
  background-repeat: no-repeat, no-repeat;

Background position can be a little squirly, but you get the idea.


Hi @bill thanks for your answer … really complex :thinking: time for a custom bric :slight_smile: :smile: thanks for your answer … I have to try it …
Tom ( I also asked @webplus for some ideas )

A short question to your code … the path for the image … Is this the path to the server where the image is? Or is it important that I do a speziell folder with the images ?tom

Why not just add the waves to the image itself?

hi Tom,

many things that seem impossible to do in Blocs with code or the given options, can be overcome with design. in some of the websites I’ve created with Blocs, I had to solve the problem with Affinity Designer (creating svg’s and implementing them in the blocsapp workflow) Keyshape app etc…
if you come from designer background pairing graphic design apps with Blocs will solve any challenge.

@tom2, sorry, no I have no other idea then the ones already mentioned here.

Yes, you could probably just do url(“img/image.png”), …
Assuming you set up the individual bg images in Blocs Asset Manager, then ‘img’ should be the folder that they are published to.


Hi @pauland I have also done this … but I use the “fill” option on a background image because I also want to use a text over the picture… and for example on desktop I see a picture with three horses … in tablet I only see 2 horses and mobile one horse … do you know what I mean ? And when I put waves into the picture I see in mobile for example only one wave …looks not so good :frowning:

thanks :slight_smile:

Tom, use different images according to the device size and trim the image so it is suitable for the device.

Hi, thanks for your idea. Good idea … how you do this ? Do you think it’s better with a class or with the visibility option ?

Mostly I go for visibility.