In this post we are going to learn how to create beautiful web pages with background colors. CSS3 background properties help us to create webpages with different colors and textures.
See the below code to set the background color for an HTML page.
body{
background-color: #5E9DC8;
}
Set Background Color:
The background-color property will take hexadecimal values for color code.
This code can be added to an html page in the following way:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-color: #5E9DC8;
}
</style>
</head>
<body>
Hello World!
</body>
</html>
Note: The CSS styles can be added using <style> element within the <head> section. There are more ways to add the styles to an html page which we’ll see in the next post.
Set Backgroud Image:
We can set image to an HTML page as background. A single large image can be used without tiling effect or a texture/patterned image can be used with tiling to create a patterned background. See the below code.
body{
background-image: url('img_bck.gif');
background-repeat: repeat;
}
By default the image will be repeated both horizontally and vertically. This is similar to using,
background-repeat: repeat-x; repeat-y;
If we don’t want the image to be repeated then it should be explicitly given as,
background-repeat: no-repeat;
To repeat the image horizontally use,
background-repeat: repeat-x;
To repeat the image vertically use,
background-repeat: repeat-y;
Note: Just ensure that the correct file path for image is given within the url(), in case you have the image in separate folder. Other image formats such as *.jpg, *.png, *.bmp can be used.
No comments:
Post a Comment