How to make a hero background image in Webflow

Design help General
1

Hi! Fairly new to Webflow and web design. Big fan of it so far but have a question if anyone has some time extra.

I want to ask how to make a background image for my header.

The way I have done it now is to make the image in canva.com and then upload it as one big background image on Webflow. See picture below.

However, I think there must be a better way to do this :stuck_out_tongue: This way is not accurate: I don’t know the proper size it should be, I just eye balled where the middle was, it dosen’t automatically scale to different screen sizes, low quality, etc.

So my question is, how can I make a background image like below in Webflow/make something like this in Webflow? (a picture on left, white line, blue background, white line, and another picture on the right) How do you guys do it? Thanks a lot for any help…

image
image1543×382 191 KB

2

Hi @rdngon,

Welcome to the wonderful Webflowian community. You are among some of the best here and congrats on joining out grand community.

So to start off, to design your layout as is in Webflow or design in general is a lot more tricky then you might think.

For this I would use canva or photoshop to make the angles and then import in. you can set and design for different resolution sizes.

I did something similar for a site I was developing.

1 Like
3

No “one solution” for this idea.

One idea:

Pre steps (For option 1 -or- 2):

A - basic header

header - inside container - inside div (flex-wrapper later) - inside → text-wrapper - Add height by padding-top-bottom for the text-wrapper (Another option is by min-height for the header → Less responsive).

image
image1920×574 49.8 KB

B. Basic background-image

For the header add a background image:

image
image1920×910 312 KB

Option 1 - TRICK (by SVG)

image
image1674×748 313 KB

Add two embed HTML inside flex parent:

Left side (copy-paste)

<style>
  svg.trapezoidal-vertical {
    position: relative;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 100%;
    /* set height to pixels if you want angle to change with screen width */
  }
</style> 
<svg class="trapezoidal-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" 
preserveAspectRatio="none"> <polygon fill="red" points="0,100 100,0 100,100"/> </svg>

Right side (copy-paste)

<style>
  svg.trapezoidal-vertical {
    position: relative;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 100%;
    /* set height to pixels if you want angle to change with screen width */
  }
</style> 
<svg class="trapezoidal-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" 
preserveAspectRatio="none"> <polygon fill="red" points="0,100 0,0 100,0"/> </svg>

Change display to flex ==> done :slight_smile:

image
image1920×528 305 KB

** change fill color under fill

image
image906×429 106 KB

** change width:
image

On mobile → Hide the zig-zag elements:

image
image1920×587 48.3 KB

** Harder to add white stroke (search this under stackoverflow)

Option 2 - By png and background image:

Very Close idea - Use two png images (Cons: Less sharp + harder to change colors over time. Pros: Design freedom).

Tree:
image

Pre step: Create two images (By photoshop or any other program):

left

image
image956×929 27.9 KB

right (open left and flip vertical+horizontal):

image
image746×734 15.6 KB

Add two empty divs (set some width) + bg images:

base class – set image-bg left.png + background-size: 100% width/height + add width for the element (200px for example)

image
image1481×664 246 KB

image
image1919×704 307 KB

combo – change to right.png:

image
image671×556 124 KB

Related university links:

Related forum tutorial:

1 Like
4

Thanks both of you for very quick reply - love this community.

@Siton_Systems your idea was great, I got it to work:

image
image1696×703 252 KB

Thanks so much.

2questions if you dont mind:

  1. How can I make it like its not the same image on left and right? Like I can have two different images? Now if I change the background on the whole section it will be the same on left and right. Like my original picture

  2. Is it any way to add a white line on the edges? Like in my original picture?

Thanks so much again!

5

Two images:
one div two bg images - You can use two background images (One position right - and the other left). Keep in mind its better to use one image.

image
image1757×873 312 KB

Another setting (50% and height auto):

image
image1755×690 328 KB

I think the best idea here is to combine the image by photoshop (On mobile use another image).

White border
It’s harder. No CSS border only for one side for SVG.

2 Likes
6

@Siton_Systems OK, thanks a lot!

When making the background in PS (I will use canva, dont know how to use PS), what size resolution should I make the file? I am struggling a bit with this.

Thanks again for bearing with me… SUPER helpful.

7

@Siton_Systems
Hi again, been playing abit around with this:

image
image1909×442 299 KB

Now the quality is good, but as you see pictures are several times over.

If I press “cover” that solves it, but the quality of the picture is very bad then.

image
image1916×471 265 KB

image
image1906×442 262 KB

Do you know how I can solve this? What size should I use on PS/Canva of the file, or can I do it directly in webflow? Picture always seems to be stretched…

8

Use image ± fit the space proprtion. And use reapet nome. Dont use cover her.

Use for example width 700px and height auto.

1 Like
9

Thanks, but I dont see “fit the space proportion” setting? and also not repeat none? @Siton_Systems
image

image
image1924×454 305 KB

10

Hi @rdngon,

The labels are different but the outcome is the same.

Changing the dimensions have to do with a custom “Size” and
You want to click on the “X” for “Tile” that has to do with repeat.

Please let me know if you have any other questions,

~ Happy Designing ~