• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 249
  • Last Modified:

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.
0
rajeshbhatks
Asked:
rajeshbhatks
  • 5
  • 4
  • 3
1 Solution
 
Dean OBrienCommented:
You could try putting the first page into a table, then setting the background of the table!
0
 
COBOLdinosaurCommented:
<HTML>
<HEAD>
   <TITLE> Fixed background using styles <TITLE>
<STYLE TYPE="text/css">
   BODY { background-repeat:no-repeat;background-attachment:fixed;
          background-position:left top;background-image:url(blah.jpg) }
</STYLE>
</HEAD>
<BODY>
etc...


Cd&
0
 
rajeshbhatksAuthor Commented:
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
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
rajeshbhatksAuthor Commented:
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
0
 
COBOLdinosaurCommented:
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&
0
 
rajeshbhatksAuthor Commented:
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
0
 
COBOLdinosaurCommented:
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&
0
 
Dean OBrienCommented:
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.
0
 
Dean OBrienCommented:
Scrap that last idea.  Why not create a page containing two div's, 'background' and 'content'.  You can absolute position the background to the exact size of the image, top,left = 0 (therefore it will only appear once, on first page), and set the z-index so as it appears behind the content div.  Have the letter builder dynamically create the 'content'!
0
 
rajeshbhatksAuthor Commented:
easynow111,

This one works. Thanks.

<HTML>
<HEAD>
<style>
DIV.BACK {background-repeat:no-repeat;background-attachment:fixed;background-position:left top;
background-image:url(Images/letterhead.jpg);POSITION: absolute;
}
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>
0
 
rajeshbhatksAuthor Commented:
COBOLdinosaur,

Thanks !
0
 
Dean OBrienCommented:
cheers, raj.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now