Editing the Background - Website Builder

  • 4
  • 2
  • Question
  • Updated 1 month ago
  • Doesn't Need an Answer
  • (Edited)
Choosing the correct background image, color, or pattern for your website is one of the most important, and often overlooked, steps to building your professional website. 

If you are going to have an image as your background, make sure you do not use an image that is too small or bad quality. This will reflect poorly on your website. You also want to make sure that any image you choose is not too busy. You do not want to distract your visitors from the actual important content on your website, or make it difficult for them to read it. It is recommended to use one large image instead of tiling a smaller image over and over on your site. This can get tedious for your site visitors to look at. Choose something that is simple, understated, and fits well with the color theme and topic of your website. 

If you are using colors, this is probably the most consistent background you can choose. Just make sure to pick color combinations that will work well together (or clash in the right way) with the other elements on your site. For instance, colors that are closer together on the color wheel can have a neutral effect, while colors from the opposite sides of the wheel make for more attention-grabbing combos. Gradients are another good way to use plain colors, but give an interesting visual for people viewing your site. Always consider who will be viewing your site, to decide what kind of color you should use. A younger audience might enjoy very vivid and bright color. An older clientele might be better served with softer, less harsh coloring. You don't want to use neon colors on a serious business site, just as you would not just have a plain grey-scale website for a child care website. 

Choosing textures for your background is a comfortable middle ground between the two previous options. It will not be as busy or possibly distracting, like an image. Similarly, it will be more attention grabbing, and less possibility for "boring" than the plain color background. It is, however, more difficult to get it to flow well on your website. It might become overwhelming for visitors with very wide screens, so make sure if you choose this option, you make the design as unobtrusive as possible. Make sure the texture you use is designed to tile flawlessly and make the block pattern as large as you can. 

In short, consider your business and your audience when choosing your background. Always use good quality images. Choose the background type that works best for you. 

                                          ___________________________________________________________________________________

In Website Builder, there are many ways to change the background for your site. 

First, you can change the "master" background that will show on all pages unless otherwise specified. You do this by clicking on the Design tab on the left, it will automatically be on the Background section.
 
  1.  From here, you can click "Customize" to add an image, change the opacity, choose the layout type (Tile background, have an image display as a cover photo, etc.), and set a "fixed background" (the background doesn't scroll with your site)

  2. You can alternatively choose a color or texture to use on your website from the predetermined list they provide. You are, of course, welcome to grab your own color code or upload your own background texture; however, we provided some for you if you don't have your own. 




Second, you can change the background for individual sections by clicking on that section, choosing "Style". This will allow you to have a certain section have a different background than the rest of the page/site. This will help you put visual breaks in the page, help certain elements in a section stand out from the rest of the page, or allow you to use a smaller image as a background for a section it isn't large enough to be a background for your whole page. You can choose a color or upload/choose an image from the "Style" screen. 



You can also set "Border" or "Glow" features to make a specific section really pop. 





If the background you place in your desktop site does not work as well in the mobile, you can change that as well, by clicking on the background, clicking on Style, and turn "Mobile Custom Style" on. You can remove images and set the color from here.




Play around with the background options on your site! See what looks good to you! Remember, before you publish, take a walk through of your site. Does the background obscure any of the elements (text, buttons, navigation menu) on your site? Is everything important on your site still easy to see? Does the background flow well with the aesthetic of your site? Looking for these things before you publish will help avoid negative opinions by site visitors. The more a customer or visitor likes the look of your site, and feels that it professionally fits with the business the site is designed for, the more likely they are to stay!
Photo of Homestead FAQ

Homestead FAQ, Employee

  • 42,436 Points 20k badge 2x thumb

Posted 9 months ago

  • 4
  • 2
Photo of Cathy Ginter

Cathy Ginter

  • 822 Points 500 badge 2x thumb
The biggest mistake I've seen on websites is when the text color becomes washed out by the background color making it hard to read.
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 40,032 Points 20k badge 2x thumb
Absolutely true. I will not stay on a site if it is difficult to read.
Photo of harper49t5698

harper49t5698

  • 102 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled background around my first page is gray. I want it to be white. What do I do?.

see above
Photo of bill9188

bill9188

  • 252 Points 250 badge 2x thumb
This shows how to add a custom pic but it doesn't say a word about putting it on and or saving it to the page. So, it helps a little but doesn't but not very much. 
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 39,336 Points 20k badge 2x thumb
In this builder, you don't want to just push elements off to the side. I can see it on my computer, which is probably wider than yours. Simply delete the element and re-add it when you decide you want to use it.

The element I can see in the top left corner is a Twitter follow button, which is what is displaying. A twitter feed element is different and will show as a box displaying the most recent tweets.
Photo of bill9188

bill9188

  • 252 Points 250 badge 2x thumb
Thank you for your help. But, I can't get to it. How can I delete it? 
Photo of bill9188

bill9188

  • 252 Points 250 badge 2x thumb
And, yeah I messed up.
Photo of bill9188

bill9188

  • 252 Points 250 badge 2x thumb
Never mind, I shrunk the screen and now have access. Again, thank you for your help. 
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 39,336 Points 20k badge 2x thumb
Yes that was exactly what I was going to suggest! Glad you got that taken care of.