greetings, i’m having trouble getting this to work, any advice on how to approach making the sections look like this (all the way to the edge)? i’ve tried a few approaches which work a little bit, but are not consistent across different window widths
Edge to edge background colouring can be achieved with either Layout Blocks, or wide boxes. Set a background fill colour on the elements and then stack them on the page as you wish.
If you want the curved effect, the easiest way to achieve that is with SVG graphics set as a background to either wide boxes or layout blocks. You will need an external vector graphics app to create those (I would recommend Affinity by Canva - it’s free). Creating the graphic is very simple.
Start by creating a canvas of about 4000px wide by about 400px high. (4000 pixels should be wide enough for even the widest of screens.) . Next, add your curved shape to the canvas, ensuring that it stretches from edge to edge on the canvas. It should look something like this:
Next, export the graphic as an SVG (selection only - not the whole canvas). This will create a relatively small file of circa 700 bytes.
Export as many variants (different colours) as you need for your website project. In my example, I’ve created a blue, white and green shape, but you can have as many as you need.
These shapes are then added as backgrounds to wide boxes or layout blocks and styled as shown in the screenshot below (the important settings are highlighted in red):
Now all you have to do is combine the shapes with normal wide boxes to create your areas of colour. Essentially, you create a wide box to the size needed to accommodate your page content, and then add your shape box immediately beneath it to create the final shape. Once positioned, you can group the boxes to make one unified shape that can be moved up or down the page.
This is how my page looked with all the boxes set out before moving them into position and grouping (I left the grey background colour on the white shape so you can see it, but this would normally be transparent)
And here is the final page when viewed in a browser:
Some tips:
-
You may have to increase the height of your shape graphic, depending upon the degree of curvature. For example, you could have the graphic with straight right and left sides, this will give you more height to play with when positioning your boxes and will help ensure that you don’t see any straight horizontals when the browser window is enlarged.
-
Use the layers panel to make sure all your shapes overlap each other in the correct order.
-
You may want to increase the width of your SVG graphic to say 5000 or even 6000 px to cater for very large Hi-Res screens. This increase doesn’t add a great deal of weight to the file size - they should all come in at under 1kb.
4 Likes
thanks! it works in chrome, and safari… but i get something else in brave. (see attached). I’ve also noticed, that background video will run in chrome and brave, but is a still in safari?
From what I can see from your screen grab, it looks like the green box immediately beneath the white shape needs extending to a wide box and possibly made taller - at the moment it’s looking like a normal width box.
With the video, I’m not sure what may be causing it to be a still image. My only guess is that you may not have selected the mute option in the video settings. On some video’s even if they appear to have no soundtrack, there may still be one but it’s just silence. Selecting the mute option essentially ensures that any soundtrack will not play, thereby allowing automatic playing on page load. The only other thing I can think of is that the video is particularly large which could cause it to not load quickly enough to start playing instantly. With any video, I would run it through the free handbrake app before adding to a web page. This will allow the video to be web optimised, fast decoded (streamed) and any sound track completely removed.
thats the thing, the box that the image is in is set to full page width, and the svg is 4k wide, about 3x wider than the window there. AND it fits perfectly in chrome and safari. but not brave for some reason. Im wondering how best to deal with the various browser differences. Also, the video was specifically edited for this (with no audio). not sure why safari is being stubborn when the other browsers are not…is there a setting for that?
I know it is an obvious one, but did you also have your green image set to Stretch & Fill? This makes sure it stretches out to the browser’s width.
I agree. I’m assuming that the white shape is the SVG and the green piece that seems to be cut off at the edges is a box behind the shape - that would be the box that isn’t full width. I’m also assuming that the green area at the bottom of the screenshot IS a full width box. If I’ve got that wrong, maybe you can upload the actual image file so I can see what’s going wrong.
i see option for one, or the other. not both at the same time?
the box is full width, filled with the picture of the “curve”. it loads and looks fine in chrome, and safari. brave is the only one it does this. Not sure why. How best does one deal with the various browsers eccentricities?
If this is the case @safoster71, I would let @duncan know for him to take a look at why Brave is behaving contry to the other browsers.
Have you made sure Brave is updated to the latest version? And maybe also clear your cache?