आपकी वेबसाइट के लिए पृष्ठभूमि शीर्षलेख छवियां
अनेक उपकरणों और स्क्रीन आकारों में अपनी वेबसाइट के लिए पृष्ठभूमि शीर्षलेख छवियों और सीएसएस कक्षाओं का एक सेट बनाएं
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');}}
