ให้แสดงรูปผ่าน css  มี 2 แบบ

1. เป็น พื้นหลัง
background: url(../images/Banner.jpg) no-repeat center top;

2. เป็น รูป
content: url(../images/vir9.png);
width: 90px;

ใน css

#header
{
background: url(../images/Banner.jpg) no-repeat center top;

content: url(../images/vir9.png);
width: 90px;

position: relative;
width: 992px;
height: 180px;
clear: both;
}

ใน html
<div id=”header”></div>

ถ้าเอามารวมกัน ทั้งสองภาพ จะมีขนาดกว้างยาวเท่ากัน ต้องแก้ด้วยวิธีดังต่อไปนี้
อ้างอิง
http://www.css3.info/preview/multiple-backgrounds/

#header
 {
width: 992px;
height: 180px;
background-image: url(../images/vir9.png), url(../images/Banner.jpg);
background-repeat: no-repeat;
background-position: relative;
}

แล้วไปกำหนด ตำแหน่งของรูป

อีกตัวอย่าง
Using CSS multiple backgrounds
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

.multi_bg_example {
  width: 100%;
  height: 400px;
  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, left, right;
  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}

<div class=”multi_bg_example”></div>

css images

http://www.w3schools.com/css/css3_images.asp

Multiple Backgrounds with CSS3
http://www.css3.info/preview/multiple-backgrounds/

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

How it Works
Multiple background images can be specified using either the individual background properties or the background shorthand property. We’ll first look at an example using the individual background properties.
Specifying multiple backgrounds using the individual background properties
Multiple background images are specified using a comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’. The the first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively.
The Syntax:
background-image: <bg-image> [ , <bg-image> ]*

<bg-image> = <image> | none
Note: a value of ‘none’ still generates a layer.
Example:
background-image: url(sheep.png), url(betweengrassandsky.png);
A comma separated list is also used for the other background properties; background-repeat, background-attachment, background-position, background-clip, background-origin and background-size.
Example:
background-position: center bottom, left top;
The comma separated lists from the individual properties are then matched up, starting with the first value in each list.
If excess values are specified for any of the individual properties they are ignored. For example; if four values are supplied for the background-position property, but only three values are supplied for the background-image property, the fourth value in the list would not be used.
Similarly, if not enough values are supplied for any of the individual properties, the list of values for that particular property are repeated, from the first value, as many times as required. For example; if only two values are supplied for the background-position property, but three values are supplied for the background-image property, the list of values for background-position would be repeated, thus the third background image specified would have the same background-position value as the first.
If a background color is specified, using the background-color property, this is applied as the final background layer, behind any background images.
Specifying multiple backgrounds using the ‘background’ shorthand property
Multiple backgrounds can also be specified using the background shorthand property.
The Syntax:
background: [ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>
Note: background-color is only permitted in the final background layer.
Example:
background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;
The CSS3 Backgrounds and Borders specification offers further clarification of the background shorthand syntax:
The number of comma-separated items defines the number of background layers. Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’ to that property’s initial value, then assigns any explicit values specified for this layer in the declaration. Finally ‘background-color’ is set to the specified color, if any, else set to its initial value.
If one <box> value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value. If two values are present, then the first sets ‘background-origin’ and the second ‘background-clip’.
Browser Compatibility
Browser support for multiple backgrounds is relatively widespread with all of the main browsers offering support, without the need for vendor prefixes.
Firefox has supported multiple backgrounds since version 3.6 (Gecko 1.9.2), Safari since version 1.3, Chrome since version 10, Opera since version 10.50 (Presto 2.5) and Internet Explorer since version 9.0.
Cross Browser Examples
Here are a couple of examples which should work in all of the browsers detailed above. For each example the code is given using both the individual background properties and the background shorthand property.
Example A
Our first example has an old-style paper background, with additional decorative images aligned to the the top-left and bottom-right corners:

The code for this can be written in one of two ways, either:

#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}

or

#exampleA {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}

Example B
The example below (courtesy of Opera) demonstrates how multiple backgrounds can be used to create the sliding doors technique:

Again, the code for this can be written in one of two ways, either

#exampleB {
display: inline-block;
margin: 1em; padding: 1em;
background-image: url(left.png), url(right.png), url(main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top ;
}

or

#exampleB {
width: 500px;
height: 250px;
background: url(left.png) left top no-repeat, url(right.png) right top no-repeat, url(main.png) left top repeat-x;
}

http://www.css3.info/preview/

div.test {
   background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
   background-repeat: repeat-y;
   background-position: top left, top right;
   width: 385px;
   height: 100px;
   border: 1px solid #000000;
}

https://snook.ca/archives/html_and_css/multiple-bg-css-gradients

background-image: url(…), url(…);

background: url(…) 0 0 repeat 10px 100px, url(…) 5px 5px no-repeat 5px 5px #FFF;
background-image: url(…), url(…);

background: url(…) 0 0 repeat, url(…) 5px 5px no-repeat #FFF;

background-image: url(…), url(…);
background-size: 10px 100px, 5px 5px

In Opera, Mozilla, and Safari, you’ll need to declare the vendor prefixes. Chrome and the Opera 10.5 dev builds don’t require the vendor prefix. And to further clarify, background-size support is in Opera 10.1 but multiple background support isn’t.

-o-background-size: 10px 100px; 
-moz-background-size: 10px 100px, 5px 5px;
-webkit-background-size: 10px 100px, 5px 5px;

The background size declares width first and then height. Technically, you should be able to omit the second value, which should use auto for the second value.

background-size: 10px; /* should be the same as '10px auto' */
background-size: 100%; /* should be the same as '100% auto' */

background: url(…) 0 0 / 10px 100px repeat, url(…) 5px 5px / 5px 5px no-repeat #FFF;

CSS Gradients

background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#496178), to(#2E4960));

background-image: -moz-linear-gradient(90deg, #496178, #2E4960);

background-image: -moz-linear-gradient(#496178, #2E4960);

background-image: -moz-linear-gradient(#496178, #323232 20%, #2E4960);

Mixing the Ingredients

background-image: url(…);
background-image: url(…), -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#000));
background-image: url(…), -moz-linear-gradient(#FFF, #000);
background-size: 10px 100px, 5px 5px;
-o-background-size: 10px 100px;
-moz-background-size: 10px 100px, 5px, 5px;
-webkit-background-size: 10px 100px, 5px 5px;

Multiple Backgrounds with CSS

#multipleBGs {
	background: url(photo1.png),
				url(photo2.png),
				url(photo3.png)
	;
	background-repeat: no-repeat,
					   no-repeat,
					   repeat-y;
						
	background-position: 0 0,
						 30px 70px,
						 right top;
	
	width: 400px; 
	height: 400px;
	border: 1px solid #ccc;
}

https://davidwalsh.name/css-multiple-background
แบบธรรมดา ไปกำหนดใน html แทน แต่หากเว็บเป็น html จะต้องไปแก้ทุกหน้า ถ้าแก้ css ได้อย่างข้างบน ก็ง่ายขึ้น

<!-- Logo + Search + Navigation -->
<div id="top">
    <a id="logo" href="<?php echo SITE_URL?>" target="_blank">
        <img src="/lib/skins/klm/img/logo.png" alt="Home">
    </a>
    <img id="fb" src="http://fc04.deviantart.net/fs71/f/2012/295/0/a/facebook_icon_by_x_1337_x-d5ikwkm.png" alt="Facebook">
</div>

#fb {
    float: left;
    position: absolute;
    display: inline;
    width: 50px;
    bottom: 0;
    right: 0;
}

#logo {
    bottom: 0;
    display: inline;
    left: 0;
    position: absolute;
}

#top {
    height: 58px;
    margin: 0;
    padding: 10px 0;
    position: relative;
}

multiple background images using CSS

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

The easiest way I have found to use two different background images in one div is with this line of code

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

Obviously, that does not have to be for only the body of the website, you can use that for any div you want.

use this

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

If you want multiple background images but don’t want them to overlap, you can use this CSS

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

with this HTML structure:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>