Web サイトの背景ヘッダー画像

複数のデバイスと画面サイズに対応する Web サイトの背景ヘッダー画像と CSS クラスのセットを構築します

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