Every EverWeb page has two backgrounds, both in Inspector > Page Settings (the first icon). Page Background colours the page itself, the area that holds your content. Browser Background fills the rest of the browser window around and behind the page. For one colour everywhere, set Browser Background to that colour and Page Background to None.
Where each background shows
| Centered Layout page | Responsive page | |
|---|---|---|
| Page Background | A column as wide as your Content Width, in the middle of the window | The full width of the window, from the top of the page to the bottom |
| Browser Background | Down both sides on a wide screen, and above and below the page. On a phone the page fills the screen's width, so it shows only above and below | Only below a page that's shorter than the window, or behind the whole page when Page Background is None |
None means the page has no colour of its own, so the Browser Background shows through it. Your page type is shown under Page Layout in the same tab.
Change a background colour
- Select the page in your page list and go to Inspector > Page Settings. If the background settings are greyed out, the page uses a Master Page: select the Master Page instead. Its backgrounds apply to every page that uses it.
- In the Page Background menu, choose None, Color Fill, Gradient Fill (two colours that blend into each other) or Image Fill.
- In the Browser Background menu, choose Color Fill, Image Fill or Video Fill.
- Click the colour box and pick your colour.
- Publish. If you changed a Master Page, use File > Publish Entire Site.
On a Centered Layout page, Shadow under Page Background adds a shadow around the page column.
A full-size picture behind the whole page
- Resize the picture first: 2000 to 2400 pixels wide, saved as a JPEG under 500KB. A large background slows down every page it's on. See Make your website load faster.
- Under Browser Background, choose Image Fill, click Choose... and pick the picture.
- In the picture menu, choose Scale to Fill.
- Set Page Background to None so the picture shows through. On a Centered Layout page you can keep a Color Fill instead, to put your text on a plain column over the picture.
- Click Preview, choose Preview QR Code, and check the page on your phone.
| Option | What visitors see |
|---|---|
| Scale to Fill | Fills the whole window on any screen and keeps the picture's shape, cutting off some of its edges. It stays still while the page scrolls over it. Best for photos |
| Stretch | Fills the window, but squashes or stretches the picture to fit |
| Original Size | The picture once, at its own size |
| Tile | The picture repeated like wallpaper, for small textures and patterns |
With Original Size and Tile, Scale resizes the picture, the alignment buttons place it, and Fixed position keeps it still while the page scrolls.
A phone screen is tall and narrow, so Scale to Fill cuts off more of the sides of a wide photo. Choose a picture with its subject in the middle.
Page Background has its own Image Fill, which suits a texture on the page column of a Centered Layout page. For a moving background, choose Video Fill under Browser Background. See How do I add a video, a background video or music to my EverWeb website?
A background for one part of the page
For a coloured band or a photo behind one section, give an object its own fill:
- Responsive pages: add a Container and tick Full width in Inspector > Metrics. In Inspector > Shape Options, under Fill, choose Color Fill, or Image Fill with Scale to Fill. Then put your text and pictures inside it. See Build a responsive page with Containers so it stacks neatly on a phone.
- Centered Layout pages: draw a rectangle shape, tick Full width in Inspector > Metrics so it reaches both edges of the window, give it a fill, and choose Arrange > Send to Back. Then place your objects on top.
To make text stand out on a photo, see Make text readable on top of a photo: overlays, masks and image fill options. For a picture that moves more slowly than the page, see Add animation and scroll effects to your pages.
Common problems
| What you see | What to do |
|---|---|
| You changed the Browser Background, but the page looks the same | The Page Background covers it. Set Page Background to None |
| The background picture looks blurry | It's too small for large screens. Use a copy about 2000 pixels wide |
| The page is slow to appear | The picture file is too large. Resize it, and tick Export Optimized Images in File > Edit Publishing Settings |
| A strip of a different colour under a short page | Set Browser Background to the same colour as your page or footer. See Remove extra blank space at the bottom or side of a page |
Related articles
- Make text readable on top of a photo: overlays, masks and image fill options
- How do I add a video, a background video or music to my EverWeb website?
- Make your website load faster
- Put the same header, menu and footer on every page with a Master Page
- Remove extra blank space at the bottom or side of a page