Background images of print.css doesnt show?

bassa · #1 (**permalink**) 11-15-08, 08:25 AM

Hello!

I have a print button on my website that is set to print out only certain areas of the main contents, such as the headline, texts and image thumbnails.

However, the background images that I used for my thumbnail placeholder doesn't show on the printed page.

Perhaps someone could help me figure out how to get them to be printed?

Here's a link to the webpage:

http://www.froso.dk/test/index.html

Here's the code for the thumbnail classes in the print.css file:

Code:

.thumbnail {
	height: 100%;
	width: 160px;
	float: left;
	text-decoration: none;
	margin: 0px 10px 10px 0px;
	padding: 0px;
	text-align: center;
}

.thumbnailtop {
	height: 10px;
	width: 160px;
	text-decoration: none;
	margin: 0px auto;
	padding: 0px;
	background: url(../images/thumbnail_top.gif) no-repeat;
}
.thumbnailcenter {
	height: 100%;
	width: 160px;
	text-decoration: none;
	margin: 0px auto;
	padding: 0px;
	background: url(../images/thumbnail_center.gif);
}

.thumbnailbottom {
	height: 30px;
	width: 160px;
	text-decoration: none;
	margin: 0px auto;
	padding: 0px;
	background: url(../images/thumbnail_bottom.gif) no-repeat;
	line-height: 30px;
	font-weight: bold;
}

I just copied them over from the main CSS file (froso.css).

Help, anyone?

Cheers,
Bassa

Yeroon · #2 (**permalink**) 11-18-08, 10:28 AM

There is no way to tell the client to print background images with standard CSS background properties.

I always use the following 'hack':

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css" media="print">
#ti\tle {
	display: list-item;
	list-style-image: url(banner.jpg);
	list-style-position: inside;
	letter-spacing: -1000em;
	font-size: 1pt;
	color: #fff;
	}
</style>
</head>
<body>
<h1 id="title">here it shows image which will print</h1>
Lorum ipsum.....
</body>
</html>