Background header images for your website

Build a set of background header images and CSS classes for your website across multiple devices and screen sizes

Our header builder creates the images and CSS required to build pixel perfect headers on your websites. This code utilises our image resizer and build a CSS script at the bottom for you to inspect.

Choose your Image

Image URL

Class Name

Element Name

Large Screen

Small Screen/Laptop

Tablet Landscape

Tablet Portrait

Mobile Landscape

Mobile Portrait

.Screen{background-size: cover; background-position: center center;}
@media(min-width: 1px) and (max-width: 480px) {.Screen{ background-image:url('https://www.claytabase.co.uk/Data/Images/HeaderImaging.aspx?ImgSource=https://www.claytabase.co.uk/System/Themes/Default/HeaderChester.jpeg&NewMode=Resize&MaxWidth=480&MaxHeight=400');}}
@media(min-width: 481px) and (max-width: 768px) {.Screen{ background-image:url('https://www.claytabase.co.uk/Data/Images/HeaderImaging.aspx?ImgSource=https://www.claytabase.co.uk/System/Themes/Default/HeaderChester.jpeg&NewMode=Resize&MaxWidth=768&MaxHeight=700');}}
@media(min-width: 769px) and (max-width: 1200px) {.Screen{ background-image:url('https://www.claytabase.co.uk/Data/Images/HeaderImaging.aspx?ImgSource=https://www.claytabase.co.uk/System/Themes/Default/HeaderChester.jpeg&NewMode=Resize&MaxWidth=1200&MaxHeight=1000');}}
@media(min-width: 1201px) and (max-width: 9999px) {.Screen{ background-image:url('https://www.claytabase.co.uk/System/Themes/Default/HeaderChester.jpeg');}}