Advanced Cascading Style Sheets
CSS3 Backgrounds
CSS3 contains several new background properties, which allow greater control of the background element.
Property Description
background-size Specifies the size of the background images
background-origin Specifies the positioning area of the background images
background-clip Specifies the painting area of the background images
background-size:
The background-size property specifies the size of the background image. Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts.
Syntax
background-size: length|percentage|cover|contain;
Example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset=utf-8>
<title>CSS3 Examples</title>
<style type="text/css">
body
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
CSS-Image
</p>
<p>Original image: <img src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/img_flwr.gif" alt="Flowers" width="250" height="200" /></p>
</body>
</html>
Example:(Stretch the background-image)
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset=utf-8>
<title>CSS3 Examples</title>
<style type="text/css">
div
{
background:url(img_flwr.gif);
background-size:100% 100%;
-moz-background-size:100% 100%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div>
With CSS you define the colors and sizes in "styles". Then as you write your documents you refer to the styles. Therefore: if you change a certain style it will change the look of your entire site.
Another big advantage is that CSS offers much more detailed attributes than plain HTML for defining the look and feel of your site.
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
</div>
<p></p>
<div>
With CSS you define the colors and sizes in "styles". Then as you write your documents you refer to the styles. Therefore: if you change a certain style it will change the look of your entire site.
Another big advantage is that CSS offers much more detailed attributes than plain HTML for defining the look and feel of your site.
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
</div>
</body>
</html>
CSS3 allows you to use several background images for an element.
Syntax:
background-image:url(img1),url(img2);
Example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset=utf-8>
<title>CSS3 Examples</title>
<style type="text/css">
body
{
background-image:url(img_flwr.gif),url(xmas-tree.gif);
}
</style>
</head>
<body>
</body>
</html>
background-clip: This property specifies the painting area of the background.
Syntax:
background-clip: border-box|padding-box|content-box;
Example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset=utf-8>
<title>CSS3 Examples</title>
<style>
div
{
width:300px;
height:300px;
padding:50px;
background-color:lightblue;
background-clip:content-box;
border:4px solid #FF0000;
text-align:justify;
}
</style>
</head>
<body>
<div>
Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents. CSS has various levels and profiles. Each level of CSS builds upon the last. CSS3 has all advance features.
<p> Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents. typically adding new features and typically denoted as CSS 1, CSS 2, CSS 3, and CSS 4. </p>
</div>
</body>
</html>
Note: border porperty change to dotted and observe output.
background-origin Property:
The background-origin property specifies, what the background-position property should be relative to.
Syntax
background-origin: padding-box|border-box|content-box;
Example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset=utf-8>
<title>CSS3 Examples</title>
<style>
div
{
border:2px solid red;padding:30px;
background-image:url('https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/chrome.png');
background-repeat:no-repeat;
background-position:left;
background-origin:border-box;
}
</style>
</head>
<body>
<div>
Google Chrome is a browser that combines a minimal design with sophisticated technology to make the Web faster, safer, and easier. Use one box for everything type in the address bar and get suggestions for both search and Web pages.
</div>
</body>
</html>