Using more than one background image : background « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. background

Using more than one background image

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>



<style type="text/css">

body {
  margin: 10%;
}

h2 {
padding-top: 72px;
text-align: center;
Background-image: url(plane.gif), url(mail.gif), url(printer.gif), url(gift.gif);
Background-position: center, top center, 40% 24px, 60% 24px;
Background-repeat: no-repeat;

}

h3 {
  margin: 0;
  padding: 0;
}

p {

  margin-top: 0;
  text-align: left;
  font-family: Verdana;
  font-size: .9em;
}



</style>

    </head>
    <body>





<h2>Complimentary Air Amenities</h2>

<p>There aren't any snakes on this plane! You get a full conciearge service along with business-related services like free email checking and color printing. </p>

<h3>Constantly Check Email</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>


    </body>
</html>








Related examples in the same category

1.'background' Example
2.The background shorthand property provides for specifying all five separate background properties in one single property.
3.background: mistyrose
4.background: gray
5.background: rgb(128, 128, 128)
6.The background-color value can be transparent keyword, which is also the default value.
7.The background-color value can be a hexadecimal value
8.The background-color value can be a short hexadecimal value
9.background: yellow;
10.background: white url('http://java2s.com/style/logo.png') center center; (image and position)
11.background: url('http://java2s.com/style/logo.png') repeat-x; (background-image-repeat)
12.background: url('http://java2s.com/style/logo.png') repeat-y scroll; (background image repeat attachment)
13.background: mistyrose;
14.background: pink;
15.background: lightyellow;
16.background: rgb(234, 234, 234);
17.background: yellowgreen;
18.background: no-repeat fixed bottom center;
19.background x tiled
20.background y tiled
21.Background fixed
22.Whole page background
23.Whole page shading effect
24.HTML and CSS for background colors
25.Merge several image to one big background image
26.CSS Background Attributes Example
27.Link with background
28.hr border: none; background-color: #256579; color: #256579; height: 2px; width: 80%;
29.tfoot td background: #808080;color: white;
30.background attachment: fixed
31.option background-color: #3CB371;color: #ffffff;
32.code padding:3px; background-color:black; color:#FFFFFF;
33.background-attachment: fixed;
34.demonstrating the background-color property
35.Background grid
36.a:hover {color:#FF9900; text-decoration:underline; background-color:#f9f0f0;}
37.thead, tfoot {border:solid; background-color:#efefef; font-size:36px;}
38.Update background image when mouse hover
39.Using background image for DIV
40.background: url(img/document.gif) no-repeat left center;
41.Change background when mouse hover
42.a:hover background: inherit;
43.Using shade image to as the title bar background
44.Round corner with background image
45.Shading background
46.Blue background
47.Black background
48.background: #ffffff url(1024px-images/background.gif) top center repeat-y;
49.Round corner with background image 2
50.Block quote with background
51.background: rgb(244, 244, 244);
52.The background shorthand property
53.background assigns the padding area inside the box to a background color and/or image.
54.Set URL for Background Image
55.Background with no repeat
56.Add background image to LI
57.background: lightblue
58.background: lightgreen
59.background: pink
60.Css Rollover with image