How to CSS Background ?
The background of your WebPages are one of the fundamentals that you simply need to know. It is one of the core part of CSS3. In this lesson, we will cover the basics of using CSS backgrounds and how to apply these CSS background properties in your web pages.
CSS Background color
The background-color property in CSS fills the background with a solid color. You can apply background color in the following ways:
background-color: green;
background-color: #30A67B;
background-color: rgb(48, 166, 123);How to CSS Images ?
The CSS Image represents a 2D image. In this chapter, we will look at how to use Background Images in CSS to create wonderful WebPages.
CSS Background Images
Background Images play an important role in the WebPages. As you saw in the previous chapter, the Background Color property is to add a color to the page or element to which it is applied. The Background Image property allows us to specify an image to be loaded and displayed as a background. The syntax declaration of Background Images is similar to that of background-color.
How to Add a Background Image with CSS
body {
background-image: url(http://www.corelangs.com/logo.png);
}output
The background-image property allows you to select an image by a URL reference. The above statement set an image background for the whole page, because we used it on the body tag. You can use background-image property on most CSS elements.
CSS Background Repeat
By default, as we saw in the above picture, a background-image is tiled vertically and horizontally. We can control a background image through its background-repeat property. The default background-image property tiles the images in x-axis and y-axis, so we use used to control it by axis base like repeat-x and repeat-y.
body {
background-image: url(http://www.corelangs.com/logo.png);
background-repeat: repeat-x;
}output
The above CSS statement tiles the background-image only x-axis. Likewise you can set background-repeat property as repeat-y then the images tiles only on y-axis.
No repeat
To turns off tiling background from repeating, you can use no-repeat in background-repeat property. This will prevent tiling altogether and image will be displayed only once in the webpage.
body {
background-image: url(http://www.corelangs.com/logo.png);
background-repeat: no-repeat;
}Positioning Background Images
By default, if it is not repeating, the background image will appear at the top left corner of the viewport. You can position the background images by setting the background-position property of an image. This property control where an element`s background image is placed in the webpage.
body {
background-image: url(http://www.corelangs.com/logo.png);
background-repeat: no-repeat;
background-position: top right;
}Fix a Background Image in place
In the above code, the image is not repeating and positioning at the top right corner of the container element. You can positioned background images in various combinations as in the following table.
The background image, by default, scrolls with the content of the webpage. Scroll is the default placing property and another one is fixed. We can use the background-attachment property is to control both these values.
body {
background-image: url(http://www.corelangs.com/logo.png);
background-attachment: fixed;
}The above code fixed the background image in viewport, that means it is not scrolling with the content. If you want to scroll your content set as scroll.
background-attachment: scroll;CSS Background size
The CSS property background-size allows you to adjust the size of background images, instead of the default behavior of tiling the image at its full size. You can specify the size of the background in CSS.
html
{
background: url(model.png) no-repeat;
background-size: 100px 100px;
}The above CSS code display an image of size 100 100.
How Do you Stretch a Background Image in a Web Page?
In CSS you can stretch the background image on full screen by background-size property.
body
{
background: url(model.png) no-repeat;
background-size: 100%;
}How to make a full screen background ?
Also you can set Full Page Background Image using the following code:
body
{
background: url(model.png) no-repeat;
background-size: cover;
}CSS Div as background
How to make a Div as full screen
You can set CSS Div as your background of your web page. The following code will make a full page background using CSS Div element.
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
html,body
{
margin:0;
padding:0;
height:100%;
width:100%;
}
#full-screen
{
height:100%;
width:100%;
overflow:auto;
background:#FF2400;
}
</style>
</head>
<body>
<div id="full-screen">
Your webpage contents go here
</div>
</body>
</html>CSS background color opacity
If you want to make your screen background color transparent, you can use opacity.
html,body
{
margin:0;
padding:0;
height:100%;
width:100%;
}
#full-screen
{
height:100%;
width:100%;
overflow:auto;
background:#FF2400;
opacity:0.2;
}You can use the above HTML code for using this CSS code. When you run the code, you will get a transparent red color background.
CSS Transparent background image
You can make your div image as transparent and set as your background screen.
html,body
{
margin:0;
padding:0;
height:100%;
width:100%;
background: url(model.png) no-repeat;
background-size: 100%;
}
#full-screen
{
height:100%;
width:100%;
overflow:auto;
background:#FF2400;
opacity:0.2;
}You can use the above HTML code for using this CSS code. When you run the code, you will get a transparent image background as your screen background.
Multiple background images
In CSS3, you can apply multiple backgrounds to your web pages by using a simple comma-separated list. It’s like z-index but this isn’t z-index, These images are layered atop one another with the first background you provide on top and the last background listed in the back. The current versions of all the major browsers now support this feature.
body
{
background: url(pic1.png), url(pic2.png), url(pic3.png);
}