19. Backgrounds and Color Gradients in CSS

Setting the Background Color
<!DOCTYPE HTML>
<HEAD>
<TITLE>bgndcolor</TITLE>
</HEAD>
<BODY style="background-color:#ff0000;">
<H1 style="background-color:yellow;">
Heading
</H1>
<P style="background-color:rgb(175,0,0);">hello world </P>
</BODY>
</HTML>
we can take the color values in 3 ways
direct color name,
hexadecimal color formate,
RGB color format.

use the inherit and transparent values of the background - color property.
<!DOCTYPE HTML>
<TITLE>background</TITLE>
<HEAD>
<STYLE type="text/css">
.foo1 {
  background-color: green;
  color: white;
}
.foo2 {
  background-color: transparent;
  color: red;
}
.foo3 {
  background-color: blue;
  color: yellow;
}
.bar1 {
  background-color: inherit;
  color: inherit;
  font-weight: normal;

}
</STYLE>
</HEAD>
<BODY>
<DIV class="foo1">
  <H1 class="bar1">
    Hello, world 1..... This is Heading 1 level
  </H1>
</DIV>
<DIV class="foo3">
  <H2 class="bar1">
    Hello, world 2..... This is Heading 2 level
  </H2>
</DIV>
<DIV class="foo2">
  <H3 class="bar1">
    Hello, world 3..... This is Heading 3 level
  </H3>
</DIV>
</BODY>
</HTML>

Stting a Background Image
<!DOCTYPE HTML>
<HEAD>
<TITLE>bgimage</TITLE>
<STYLE>
.foo1 {background-image: url(background_image.jpg); font-size: large; color: black}
.foo2 {background-image: url(1.jpg); font-size: large; color: white}
</STYLE>
</HEAD>
<BODY class="foo1">
<P class="foo2">
demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text
</P>
</BODY>
</HTML>

the backgtround image property can be used with the background-repeat and background-position properties to repeat and specify a position for a background image.
<!DOCTYPE HTML>
<BODY style="background-image: url(photo_1.gif);background-repeat: repeat-y;">
<P style="background-image: url(people.jpg);background-position: top;background-repeat: no-repeat;">
demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text
</P>
</BODY>
</HTML>

Fixing and Scrolling a Background Image
you can us the background-attachment property either to fix a background image or to scroll the image along with the scrolling text.
<!DOCTYPE HTML>
<BODY>
<P style="background: red url('top_bg.jpg');background-attachment:fixed;">
demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text
</P>
</BODY>
</HTML>
or you can use
<P style="background: red url('top_bg.jpg'); background-attachment:scroll;">

Setting Multiple Background Images
<!DOCTYPE HTML>
<HEAD>
<TITLE>Background Demos</TITLE>
</HEAD>
<BODY style="width: 700px;height: 300px;padding: 10px 10px 10px 10px;background-color: orange;background-image: url(main_image.jpg), url(about.jpg), url(background_image.jpg);background-position: 100px 100px, 0 0,300px 300px;background-repeat: no-repeat, repeat-x, no-repeat;">
<P>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text
</P>
</BODY>
</HTML>

Using the background-clip and background-origin Properties
background-clip property is used to determine whether the background image extends into the border or not,
background-origin property is used to determine the starting position of the background in a box like shape.
background-origin property allows you to specify the starting point of the position of your backgrond image.
<!DOCTYPE HTML>
<BODY>
<P style="color:white;border: 1em blue;border-style: dotted double;padding:
20px;background-color: orange;background: url('1.jpg');   background-position:
center left;-webkit-background-clip:border-box;-webkit-background-
origin:border-box;">
demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text
</P>
</BODY>
</HTML>
or
<P style="color:white;border: 1em blue;border-style: dotted double;padding:
20px;background-color: orange;background: url('1.jpg');   background-position:
center left;-webkit-background-clip:padding-box;-webkit-background-
origin:padding-box;">

Using Color Properties
color specifications are :RGB, RGBA, HSL, HSLA, and opacity
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS Colors Web Page</TITLE>
<LINK rel="stylesheet" type="text/css" href="RGBUse.css"/>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
</BODY>
</HTML>
RGBUse.css
h1 {
color: red;
background-color: rgb(60, 80, 100); }
h2 {
color: red;
background-color: rgb(125, 50, 200); }
h3 {
color: red;
background-color: rgb(60, 150, 50); }

modify the LINK element
RGBAUse.css
h1 {
color: red;
background-color: rgba(153, 134, 117, 0.2); }
h2 {
color: red;
background-color: rgba(153, 134, 117, 0.8); }
h3 {
color: red;
background-color: rgba(153, 134, 117, 1.0); }

HSLUse.css
h1 {
color: red;
background-color: hsl(200, 100%, 50%); }
h2 {
color: red;
background-color: hsl(200, 50%, 50%); }
h3 {
color: red;
background-color: hsl(200, 25%, 50%); }

HSLAUse.css
h1 {
color: red;
background-color: hsla(165, 35%, 50%, 0.2); }
h2 {
color: red;
background-color: hsla(165, 35%, 50%, 0.6); }
h3 {
color: red;
background-color: hsla(165, 35%, 50%, 1.0); }

OpacityUse.css
h1 {
color: red;
background-color: green; opacity:0.3; }
h2 {
color: red;
background-color: green; opacity:0.6; }
h3 {
color: red;
background-color: green; opacity:1.0; }

Using Gradient Properties
give linear and radial gradient effects to your webpages
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS Colors Web Page</TITLE>
<LINK rel="stylesheet" type="text/css" href="LinearGradient.css"/>
</HEAD>
<BODY>

<P> demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo
</P>
</BODY>
</HTML>

LinearGradient.css
body {
 
  background: blue;
}
P {
  height: 200px;
 
  background: -webkit-gradient(linear, left top, left bottom,
                     from(white), to(red));
}


RadialGradient.css
body {

  background: blue;
}
P {
  height: 500px;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350,
                  from(green), to(#fff));

}



No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

My Favorite Books

  • C and Data Structures by Ashok N. kamthane
  • Web Technologies by A. A. Puntambekar
  • Learn HTML and CSS with W3Schools
  • Learn JavaScript and Ajax with W3Schools
  • HTML5 Black Book: Covers Css3, Javascript,XML, XHTML, Ajax, PHP And Jquery
  • HTML5 Application Development Fundamentals: MTA Exam 98-375
  • .NET 4.0 Programming 6-In-1, Black Book
  • SQL Server 2008 R2 Black Book
  • Asp.net 4.0 Projects Covers: net 3.5 And .net 4.0 Codes, Black Book
  • UNIX Shell Programming 1 Edition by Yashavant Kanetkar
  • UNIX and Shell Programming 1 Edition by Richard F. Gilberg, Behrouz A. Forouzan
  • Computer Networks by Andrew S. Tanenbaum
  • Multiple Choice questions in computer science by Timothy J Williams