Imagens de cabeçalho de plano de fundo para o seu site

Crie um conjunto de imagens de cabeçalho de plano de fundo e classes CSS para seu site em vários dispositivos e tamanhos de tela

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');}}