How to add an image as a background?
BOWWE tutorials
Welcome to our collection of online lessons. We’ve created these to help you learn the best practices and get the most out of BOWWE. Come back here whenever you want!

How to add an image as a background

3 methods to set image as background:

Method 1: Set background image for a container

Method 2: Use mask in widget image settings

Method 3: Set image widget to an absolute position

Images are an inseparable part of every website or blog. They draw the attention of your target audience to the highlights of your site, demonstrate examples with visual aids, or simply make the page colorful and pleasant to look at. Let’s focus on the last one for this tutorial. You will learn how to use images as a background for the rest of BOWWE widgets.

Method 1: Set background image for a container

Images can be added as backgrounds to every widget in the BOWWE library. It will act like a background color, meaning it’s only possible to have one of the two and it will take the space of the widget it belongs to. Since it’s not an actual widget image, it doesn’t have the widget's settings, and its styles are restricted to a few available in the image background styles.
Here’s how to start:
1
Select an area you want to use for the background image.
2

Click on widget styles.

3
Select background styles.
4
Choose the picture option.
5
Now you can upload the image you want to use by clicking the Select Image button.

Remember:

You can always use our AI image generator to create stunning pictures in just a few clicks.
6
Select any image from your library or upload a new one.
7
Now that the image is uploaded as a background we can change the display functions, change the positioning relatively to the widget it is placed in, or apply the paralax effect. The possibilities are unlimited with BOWWE!
⚡ BOWWE Expert Tip:
The most commonly used settings for your background image is setting Display to Cover (this option can crop borders of your picture, so make sure the important information is located in the center), Position is set to middle center and the background-repeat is set to no_repeat. These styles are used to make sure the picture takes the entire space of the container, but if you require a different result you can always change the size with display and move it with offsets.

Great! Now your background image is set. This solution is usually used as a page banner or as a shifting focus towards an important widget, like a newsletter. However, this method is picture-dependent, and sometimes the content of the picture can be obscured by the picture itself. For this, we have two possible fixes:

 

💡 Fix #1: Edit your image in a graphic application to have a darker/lighter mask (best if the color of the mask matches the color scheme of your branding)

 

💡 Fix #2: Add another container before dropping all of your content and use it as a mask by setting its size to cover 100% of the parent container and giving it a semi-transparent background color. This solution is most commonly used by applying it to the section container since all sections are made with two containers: section and section content. Just add a background image to the section and add the mask to the section content, et voilà!

Remember:

Setting an image as background in styles is the most common and safest method but it doesn’t work with every picture that is uploaded. The best usage for this is setting a banner at the start of every subpage but you need to take into account that the banner on desktop devices is usually horizontal, while on mobile devices it changes size ratio to vertical, so plan accordingly when selecting the perfect image.

Method 2: Use mask in widget image settings

The second method is simply using the widget image and switching on its mask settings. This will create an additional container taking the space of the entire picture for you to use for dropping any widget you want. The canvas created this way is entirely dependent on the size of the picture and can create restrictions on how many elements you can fit in but it’s a good method when you want to create a hover effect to promote a product/service or show a short description of your partners/employees.

1
Add an image to your project.
2

Go to the Image Widget Settings.

3
Click on the Show mask checkbox.
4
Go back to the Creator in the left side panel and choose among available widgets what you want to add to the image mask.
Learn more

How to apply an image layer mask

Remember:

Using the built-in mask for a widget image can be also used as a banner but the proportions of the image can dictate the possible area that can be used and this can force some unexpected problems. This method is better suited for smaller tiles with short descriptions located on the picture for endorsing services like renting rooms or having an about us section dedicated to your staff. This method works best with a light animation revealing hidden content while hovering over the picture. We made a tutorial on how to do this animation >>HERE<<

Method 3: Set image widget to an absolute position

Third method is to place an image widget as a floating element to break the restrictions of standard website building. These elements can be used as decorations for your background and usually subsites of icons and random shapes.
⚠️Warning!

Using absolute positioning is a very delicate process. Be mindful of this because absolute can initially move your element in unpredictable ways or disrupt your container size. An element using this positioning is no longer automatically responsive and needs to be manually checked on every resolution. Relative is a safer option providing responsive behavior and better SEO score.

Learn more

Relative and Absolute Positioning

1
Add an image widget into the section or area you want it to be (this will help us control positioning of our absolute widget because it will reference the position of its parent container).
2

Go to widget styles and open Positioning Tab.

3
Scroll down to Position settings.
4
Select absolute position and enable vertical positioning to move your image freely.
5
Now you can place your image anywhere you want, but be careful since this method can be quite unpredictable.

Remember:

In the absolute positioning elements stop respecting their siblings and are no longer dependent on them, meaning that changing siblings won’t affect our absolute element’s position as well as the element itself won’t affect the size of the container it’s inside of (unlike with the relative positioning).

Tips:

  • The absolute method is best used to add simple graphical decorations to your website like geometrical shapes, confetti, or bubbles. It’s not used to promote the main content but to beautify around it.
  • If you set the offset of your element to be for example 600px from the left, then on phones with a 400px wide screen this element won’t be visible. Remember to adjust values on other devices. 
  • Offsets don’t have to be always in pixels from the left. You can always use % units for more dynamic and flexible placement and depending on the situation you might want to switch position to be counted from the right. 
  • Changing something to absolute can make it so this element covers other content. This is because of `z-index` which is changed to 1, while the default value for the rest is 0. If you don’t want your content to be covered over, you need to change its z-index to a higher number (it’s easier to group elements in a container outside of an absolute element and change the z-index on said container). 
  • DON’T OVERUSE THIS METHOD! Almost everything can be built relatively and this should be your first method for everything, just when something REALLY CAN'T BE DONE without absolute positioning, then you can try this method.. Changing everything to absolute can quickly get out of hand and you could lose control over your page esthetic
Learn more

Adding Background

Congratulations!
Now you know how to place a background image in your project

Back to all topics

Back to all topics

Dedicated to you

How to set up a Blog in less than 1h in BOWWE?

This tutorial will show you how to set up a Blog in BOWWE and add it to your site in less than 60 minutes.

More details

How to make an online Portfolio in BOWWE?

Learn how to create a professional online Portfolio in BOWWE and nail your interview.

More details

How to generate images with AI in BOWWE?

Thanks to BOWWE’s newest OpenAI integration, you can now create the ideal image. Check how simple it is!

More details

Hours

Minutes

Seconds

3 years for less than 1 year

save up to

$723

Closing Symbol