Full cover (CSS) image background
Using CSS3 and HTML5 you can create a full image background to your website page with the following code. This code contains different browser fallbacks along with media queries for device pixel widths.
You can serve just one image as your background image however to professionally implement a background image for your website page you should really make allowances for devices and screen sizes using media queries and serve more than one image to accommodate different types of user with a consideration their bandwidth usage.
Background image sizes to use
I recommend you provide at least three different image sizes to serve.
You should start with an image size of 5120px x 3600px. This provides a sharp image for Large Apple (Retina) monitors of 2560px x 1600px dimensions. The next size of your image should be 2272px wide to accommodate retina displays with a pixel width of 1136px. Finally, for the smaller devices with NO allowance for retina 768px wide.
Suggested image sizes to use for your background image on a website
- 5120px x 3600px
- 2272px x 1420px (44.38% of original size above)
- 768px x 480px (15% of your orignal image)
Background image file sizes
Of course serving large images as the background to an entire website page has a download consequence. You should keep in mind the file size that you are creating and do what you can to mitigate this by optimizing severely geting their file size as small as possible without losing the quality you seek. If you have the luxury of being able to offer advice on what picture is to be used as a background image opt for a less colourful, less contrasty image or just one that contains a significant amount of flat colour as this will aid your efforts to bring the file sizes down.
EXAMPLE
See a beautiful website background image of Manarola, Italy here.
Website background image code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
Manarola Cover Full Background Image with CSS3 and HTML5 example code
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background: url(location of your 5120px x 3600px image here) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color:lightblue;
}
@media only screen and (max-width: 1136px) {
body {
background-image: url(location of your 2272px x 1420px image here);
}
}
@media only screen and (max-width: 768px) {
body {
background-image: url(location of your 768px x 480px image here);
}
}
</style>
</head>
<body>
</body>
</html>
Website background cover image with centered content
OK! That's great having the background image code above but it could be more useful with some centered content and maybe a header and a footer. Indeed even better if it contains all of the meta data to provide page information along with favicon serving code and Open Graph data code to be able to provide social media with specified content when people share!
EXAMPLE
CSS cover full image background with centered content code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
CSS cover background image with centered content example code
</title>
<meta property="og:url" content="https://www.mastertemplate.co.uk/fullbackgroundimagewithcenteredcontent.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="CSS Full background image with centered content" />
<meta property="og:description" content="The code for creating a responsive full background image with centered content. Also with a header and footer. Made with CSS3 and media queries." />
<meta property="og:image" content="https://www.mastertemplate.co.uk/images/mtlogo3.png" />
<!-- Favicon code -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- end favicon code -->
<meta name="Author" content="Andrew Rice DIRECTFX http://www.directfx.co.uk">
<meta name="keywords" content="CSS, responsive, full, background, image">
<meta name="description" content="The code for creating a responsive full background image with centered content. Also with a header and footer. Made with CSS3 and media queries.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
body {
background: url("images/Color-Light-9-5498.jpg") center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color:#464646;
}
/* For mobile devices */
@media only screen and (min-width: 769px) and (max-width: 1136px) {
body {
/* The file size of this background image is 41.32% making it twice the size for 1136px width @2272px */
background-image: url("images/Color-Light-9-2272.jpg");
}
}
@media only screen and (max-width: 768px) {
body {
/* The size of this background image is 13.968% of the original @768px wide */
background-image: url("images/Color-Light-9-768.jpg");
}
}
@media only screen {
.whitebox {
padding:120px;
}
}
@media only screen and (max-width: 1136px) {
.whitebox {
padding:80px;
}
}
@media only screen and (min-width: 767px) {
.whitebox {
padding:25px 30px 30px 30px;
}
p {font-size:1.75em;line-height:1.35em;}
.toptext p {font-size:1em;line-height:1.2em;}
#commsicons {display:none;}
}
@media only screen and (max-width: 767px) {
.whitebox {
padding:25px 30px 30px 30px;
}
p {font-size:1.45em;line-height:1.35em;}
.toptext p {font-size:1em;line-height:1.2em;}
.toptext {display:none;}
}
@media only screen and (max-width: 420px) {
.whitebox {
padding:13px 15px 15px 15px;
}
p {font-size:1.1em;line-height:1.0352em;}
.toptext p {font-size:0.95em;line-height:1.2em;}
.toptext {display:none;}
}
@media only screen and (max-width: 1599px) {
.leftbutton, .rightbutton {
display:none;
}
}
@media only screen and (min-width: 1600px) {
.buttons-smalldevices {
display:none;
}
.whitebox {
padding:43px 125px 75px 125px;
}
p {font-size:1.9em;line-height:1.35em;margin-top:1em;margin-bottom:1em;}
.toptext p {font-size:1.45em;line-height:0.75em;}
}
@media only screen and (min-width: 2000px) {
.buttons-smalldevices {
display:none;
}
.whitebox {
padding:83px 215px 115px 215px;
}
p {font-size:2.5em;line-height:1.25em;margin-top:1.5em;margin-bottom:2em;}
.toptext p {font-size:1.75em;line-height:0.9em;}
}
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -51%);
}
.rightinset {
position: fixed;
top: 0%;
left: 100%;
/* bring your own prefixes */
transform: translate(-100%, -0%);
}
#footerlinks {
position: fixed;
width:51%;
top: 100%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -100%);
}
@media only screen and (max-width: 680px) {
#footerlinks {
width:364px;
}
}
@media only screen and (max-width: 420px) {
#footerlinks {
width:334px;
}
}
@media only screen and (min-width: 1600px) {
.smallfootericons, .mediumfootericons {
display:none;
}
}
@media only screen and (min-width: 681px) and (max-width:1599px) {
.smallfootericons, .largefootericons {
display:none;
}
}
@media only screen and (max-width: 680px) {
.mediumfootericons, .largefootericons {
display:none;
}
}
#threecolsignoff {width:100%;margin:0px;}
.toptext {
width:96%;
text-align:right;
padding:0px 0px 0px 0px;
margin:0px;
}
.fullwidthrangeright p {font-family:helvetica, sans-serif;font-size:26px;line-height:46px;font-weight:300;color:#ffffff;}
.whitebox {background-color: rgba(255, 255, 255, 0.77);}
.shadow {box-shadow: 5px 10px 18px #222222;}
p {font-family:helvetica, sans-serif;font-weight:700;color:#004a6a;}
.toptext p {color:white;}
.logo {width:280px;height:72px;margin:0px auto 13px auto;}
.mailicon {float:left;width:48px;height:40px;margin-top:6px;margin-left:3px;margin-top:7px;}
.telephoneicon {float:right;width:36px;height:33px;margin-top:6px;margin-right:10px;}
.leftbutton {float:left;width:280px;height:52px;margin-top:26px;}
.rightbutton {float:right;width:280px;height:52px;margin-top:26px;}
.clear {clear:both;}
.buttons-smalldevices {text-align:center;margin-top:16px;}
table {width:100%;}
</style>
</head>
<body>
<div class="toptext">
<p>
<br />
<strong>
T:
</strong>
<a style="text-decoration:none;color:white;" href="tel:441473808219">
01473 808 219
</a>
<br /> <br />
<strong>
E:
</strong>
<a style="text-decoration:none;color:white;" href="mailto:csscover@directfx.co.uk">
csscover@directfx.co.uk
</a>
</p>
</div>
<div id="commsicons">
<div class="mailicon">
<a style="text-decoration:none;" href="mailto:csscover@directfx.co.uk">
<img src="images/glyphicons-halflings/svg/individual_svg/glyphicons-halflings-4-envelope.svg" alt="e-mail" height="40" width="48">
</a>
</div>
<div class="telephoneicon">
<a style="text-decoration:none;" href="tel:441473808219">
<img src="images/glyphicons-halflings/svg/individual_svg/glyphicons-halflings-183-phone-alt.svg" alt="Telephone" height="38" width="42">
</a>
</div>
<div class="clear">
</div>
</div>
<div class="centered whitebox shadow">
<div class="logo">
<a href="http://www.directfx.co.uk">
<img src="images/directfx-logo5-silvergrey-01.svg" width="280" height="68" alt="DirectFX" />
</a>
</div>
<p>
Work with someone with over 20 years’ experience of website development.<br />
</p>
<div class="leftbutton">
<a href="mailto:csscover@directfx.co.uk">
<img src="images/getthecode.png" width="280" height="52" alt="Get in touch" />
</a>
</div>
<div class="rightbutton">
<a href="http://www.directfx.co.uk" target="_blank">
<img src="images/visitwebsite.png" width="280" height="52" alt="Visit DirectFXs' website" />
</a>
</div>
<div class="clear">
</div>
<div class="buttons-smalldevices">
<a href="mailto:csscover@directfx.co.uk">
<img src="images/getthecode.png" width="210" height="39" alt="Get in touch" />
</a>
</div>
<div class="buttons-smalldevices">
<a href="http://www.directfx.co.uk">
<img src="images/visitwebsite.png" width="210" height="39" alt="Visit DirectFX's website" />
</a>
</div>
</div>
<div id="footerlinks">
<div class="footercontainer">
<table id="threecolsignoff">
<tr>
<td style="text-align:left;">
<a href="https://twitter.com/directfxW" title="twitter" target="_blank">
<img class="smallfootericons" src="images/glyphicons-social/svg/individual_svg/glyphicons-social-32-twitter.svg" alt="e-mail" height="40" width="40"><img class="mediumfootericons" src="images/glyphicons-social/svg/individual_svg/glyphicons-social-32-twitter.svg" alt="e-mail" height="65" width="65"><img class="largefootericons" src="images/glyphicons-social/svg/individual_svg/glyphicons-social-32-twitter.svg" alt="e-mail" height="111" width="111">
</a>
</td>
<td style="text-align:center;">
<a href="https://www.instagram.com/directfx_websites" title="instagram" target="_blank">
<img class="smallfootericons" src="images/glyphicons-social/svg/individual_svg/glyphicons-social-33-instagram.svg" alt="e-mail" height="40" width="40"><img class="mediumfootericons" src="images/glyphicons-social/svg/individual_svg/glyphicons-social-33-instagram.svg" alt="e-mail" height="65" width="65"><img class="largefootericons" src="images/glyphicons-social/svg/individual_svg/glyphicons-social-33-instagram.svg" alt="e-mail" height="111" width="111">
</a>
</td>
<td style="text-align:right;">
<a href="https://www.facebook.com/DirectFX" title="facebook" target="_blank">
<img class="smallfootericons" src="images/glyphicons-social/svg/individual_svg/glyphicons-social-31-facebook.svg" alt="e-mail" height="40" width="40"><img class="mediumfootericons" src="images/glyphicons-social/svg/individual_svg/glyphicons-social-31-facebook.svg" alt="e-mail" height="65" width="65"><img class="largefootericons" src="images/glyphicons-social/svg/individual_svg/glyphicons-social-31-facebook.svg" alt="e-mail" height="111" width="111">
</a>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Open Graph
The eagle eyed would’ve noticed the “Open Graph” social media sharing links on the “Manarola website full cover background css image example.”
The point of this is to specify the image and text that you want used when people share a webpage to social media. You can define it with the “Open Graph” meta code.
Twitter can and does use MOST of the Open Graph code that is used by Facebook. Hence, most of the code below is recommended Facebook Open Graph Code with a small amount of pre-pended Twitter Open Graph which Facebook ignores. I’ve marked the pre-pended Twitter in RED below.
Open Graph code
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@websitedesign">
<meta name="twitter:creator" content="@directfxW">
<meta property="og:image" content="/og-image.jpg">
<meta property="og:image:width" content="1136">
<meta property="og:image:height" content="710">
<meta property="og:title" content="Manarola CSS background image code">
<meta property="og:description" content="Do you want the code to generate a responsive background image for your website? Well here it is! A few short lines of CSS3 with some advice on image sizes.">
<meta property="og:url" content="http://www.coverbackgroundimagecss.com">
Please share if you find the content useful - thank you
Contact
|
FORUM |
Have a comment or something to say? |
