CSS3: Flexible Background

Cascading Style Sheet (CSS) is a style sheet language used for describing the presentation semantic of any document or data written in markup language especially in Hypertext Markup Language (HTML). Implementing a background for website especially any picture look very simple but how to ensure it can fix and properly display in any screen resolution. These tutorials discuss a simple CSS3 property and value that can handle the background of any website by fluid the background and fix it into any screen resolution.


Figure 1.0: Background is static and not maximize to current resolution

I use this picture as a sample for the website background. This picture resolution is 1000x693 pixel. Figure 1.0 above shows that the background does not maximize based on my screen resolution (1600x900). This is because the code for CSS is simply add the background for the webpage as shown below.


body { background: url(../img/kuala_lumpur.jpg) no-repeat center center fixed; }


Those code are only ro add the background into the web page based on the CSS integration. The value for the CSS is the background should not repeat and align into centre of screen.


Figure 2.0: Flexible background based on screen resolution

Figure 2.0 shows that the background able to fluid based on the user screen resolution and solve the issues of background display resolution. This is the beuty of CSS3 property and value that can handle flexible background. Below are the code that play the role to control the background image:

body {
	background: url(../img/kuala_lumpur.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

Now the background will automatically adjust to fit into any screen resolution. This tutorial sample file can be download from download section under sample files. This code need you to use latest web browser that support web-kit. Latest Google Chrome, Mozilla Firefox or Safari should work perfectly! 


Author Information
Muhammad Asyraf bin Wahi Anuar
Web Administrator
Asyraf enjoys life and has great enthusiasm for all outdoors activities especially MTB! Don't Follow Me. I'm Lost Too -_-

Muhammad Asyraf bin Wahi Anuar | Copyright 2017 | Informatic Trooper