?
Solved

How to print background image in only first page of the html document.

Posted on 2003-02-21
12
Medium Priority
?
242 Views
Last Modified: 2010-04-09
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
Comment
Question by:rajeshbhatks
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
12 Comments
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 7993894
You could try putting the first page into a table, then setting the background of the table!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7995094
<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
 

Author Comment

by:rajeshbhatks
ID: 7995306
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:rajeshbhatks
ID: 7995358
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7996088
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
 

Author Comment

by:rajeshbhatks
ID: 8035224
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8037686
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
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 8040556
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
 
LVL 12

Accepted Solution

by:
Dean OBrien earned 200 total points
ID: 8040570
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
 

Author Comment

by:rajeshbhatks
ID: 8042764
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
 

Author Comment

by:rajeshbhatks
ID: 8042781
COBOLdinosaur,

Thanks !
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 8042841
cheers, raj.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question