Streaming live at 10am (PST)

How to make a hero background image in Webflow

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…

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

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).

B. Basic background-image

For the header add a background image:

Option 1 - TRICK (by SVG)

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:

** change fill color under fill

** change width:
image

On mobile --> Hide the zig-zag elements:

** 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

right (open left and flip vertical+horizontal):

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)

combo – change to right.png:

Related university links:

Related forum tutorial:

1 Like

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

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

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!

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.

Another setting (50% and height auto):

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

@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.

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

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.

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…

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

Use for example width 700px and height auto.

1 Like

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

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 ~