rajeshbhatks
asked on
How to print background image in only first page of the html document.
I am writing a letter builder using html. I need to print
the background image (letterhead) in only first page of the document. I tried setting background image to the
body section of the document. But the background image
gets printed for all the pages.
the background image (letterhead) in only first page of the document. I tried setting background image to the
body section of the document. But the background image
gets printed for all the pages.
Dean OBrien
You could try putting the first page into a table, then setting the background of the table!
<HTML>
<HEAD>
<TITLE> Fixed background using styles <TITLE>
<STYLE TYPE="text/css">
BODY { background-repeat:no-repea
background-position:left top;background-image:url(b
</STYLE>
</HEAD>
<BODY>
etc...
Cd&
<HEAD>
<TITLE> Fixed background using styles <TITLE>
<STYLE TYPE="text/css">
BODY { background-repeat:no-repea
background-position:left top;background-image:url(b
</STYLE>
</HEAD>
<BODY>
etc...
Cd&
ASKER
COBOLdinosaur,
It will print the background image in all the pages. I need
to have the background image printed only in the first page
(Background image is the letter head of the company. I need to print the letter head only in the first page)
thanks,
Rajesh
It will print the background image in all the pages. I need
to have the background image printed only in the first page
(Background image is the letter head of the company. I need to print the letter head only in the first page)
thanks,
Rajesh
ASKER
easynow111,
I can't determine what is the first page. I have a letter that can span 1 page or two page. Also users can edit this letter.
thanks,
Rajesh
I can't determine what is the first page. I have a letter that can span 1 page or two page. Also users can edit this letter.
thanks,
Rajesh
If you don't have it optimize for print then it is not going to print very well.
Browser pages are optimized for display.
If moving the background tot he top does not solve the problem, then you either need to create a printer friendly version of the page or live with the way it prints.
That is especially so if you have user input.
If you have multiple print pages in a singel we page it will break based on user prefrences and printer settings. You have no control over that. if the background is defined for each page then it will be printd for each page unless the user preferences have disable bacground printing; in which case it will not print on any of the pages.
If you post a link to the page I might be able to suggest some changes for optimization, but in the end web pages do not print well.
Cd&
Browser pages are optimized for display.
If moving the background tot he top does not solve the problem, then you either need to create a printer friendly version of the page or live with the way it prints.
That is especially so if you have user input.
If you have multiple print pages in a singel we page it will break based on user prefrences and printer settings. You have no control over that. if the background is defined for each page then it will be printd for each page unless the user preferences have disable bacground printing; in which case it will not print on any of the pages.
If you post a link to the page I might be able to suggest some changes for optimization, but in the end web pages do not print well.
Cd&
ASKER
COBOLdinosaur,
From your answer, I understood that either we can print
background images on all the pages or none of the pages.
You mentioned, you would suggest some changes for optimization. I have this page on our internal web server, i can't post a link to the page.
thanks,
rajesh
From your answer, I understood that either we can print
background images on all the pages or none of the pages.
You mentioned, you would suggest some changes for optimization. I have this page on our internal web server, i can't post a link to the page.
thanks,
rajesh
The optimization I am talking about is mainly to re-style for print. Without seeing the pageI don't know that yu are even using CSS. Ify ou are you can modify the styling with:
@media print {body {CSS attributes goe here }
/* any other additional declarations can also be used */
}
That will create alternative styling that will be used only for printing. In effect you can define two different layouts for the same content. One for display, and the other for printing.
Cd&
@media print {body {CSS attributes goe here }
/* any other additional declarations can also be used */
}
That will create alternative styling that will be used only for printing. In effect you can define two different layouts for the same content. One for display, and the other for printing.
Cd&
Could you not edit your background image so as it is say 5 pages tall (last 4 pages blank) set that as background.
Not very technically correct, i know.
Not very technically correct, i know.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
easynow111,
This one works. Thanks.
<HTML>
<HEAD>
<style>
DIV.BACK {background-repeat:no-repe
background-image:url(Image
}
DIV.CONTENT {BACKGROUND-POSITION: center top; PADDING-BOTTOM: 1.0in;PADDING-TOP: 1.5in; WIDTH: 7in; HEIGHT: 10in;
}
</style>
</HEAD>
<BODY>
<div class="back">
<div class="content">
This letter content goes here...
</div>
</div>
</BODY>
</HTML>
This one works. Thanks.
<HTML>
<HEAD>
<style>
DIV.BACK {background-repeat:no-repe
background-image:url(Image
}
DIV.CONTENT {BACKGROUND-POSITION: center top; PADDING-BOTTOM: 1.0in;PADDING-TOP: 1.5in; WIDTH: 7in; HEIGHT: 10in;
}
</style>
</HEAD>
<BODY>
<div class="back">
<div class="content">
This letter content goes here...
</div>
</div>
</BODY>
</HTML>
ASKER
COBOLdinosaur,
Thanks !
Thanks !
cheers, raj.