Waves over Background Image

I Need Help
1

Hello,
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:

24
Bildschirmfoto 2018-10-12 um 23.30.24.png1122×567 271 KB

35
Bildschirmfoto 2018-10-12 um 23.30.35.png1014×451 165 KB

Its only a short example … thanks a lot
tom

2

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.

Bill
BricsDesign

3

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 )

4

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

5

Why not just add the waves to the image itself?

6

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.

7

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

8

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.

Bill
BricsDesign

9

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

10

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

11

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 ?
Thanks
Tom

12

Mostly I go for visibility.