Imágenes de encabezado de fondo para su sitio web
Cree un conjunto de imágenes de encabezado de fondo y clases de CSS para su sitio web en múltiples dispositivos y tamaños de pantalla
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
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');}}
@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');}}