c# pdf to image free : Save pdf forms in reader application SDK tool html winforms web page online Head_First_HTML_CSS_XHTML43-part783

404
Chapter 10
Adding a background image
You’re almost there. What’s left?  We still need to get the white “guarantee star” 
graphic into the paragraph and work on the border, which is a solid, black line. 
Let’s tackle the image first.
If you look in the “chapter10/lounge/images” folder, you’ll find a GIF image called 
“background.gif” that looks like this:
.guarantee {
line-height:      1.9em;
font-style:       italic;
font-family:      Georgia, “Times New Roman”, Times, serif;
color:            #444444;
border-color:     black;
border-width:     1px;
border-style:     solid;
background-color: #a7cece;
padding:          25px;
margin:           30px;
background-image: url(images/background.gif);
}
Now, you just need to get that image into your paragraph element, so you’ll be 
using an <img> element, right? Not so fast. If you’re adding an image to the 
background of an element, there is another way.  Using CSS, you can add a 
background image to any element using the background-image property. 
Let’s give it a try and see how it works:
This image is a simple star-like 
pattern in white against a 
transparent background. Notice 
that it also has a matte around 
it that matches the color of 
the background.
Add this to your CSS, save, and reload your page.
Here are the properties you added 
in the exercise on the previous page.
background images
Save pdf forms in reader - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
export pdf form data to excel; extracting data from pdf forms
Save pdf forms in reader - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
extract pdf data to excel; how to make a pdf form fillable in reader
the box model
you are here 
405
Wait a sec, it seems 
like we have two ways to put 
images on a page. Is background-
image a replacement for the 
<img> element?
No, the background-image property 
has a very specific purpose, which is to set 
the background image of an element. It isn’t 
for placing images in a page – for that you 
definitely want to use the <img> element. 
Think about it this way: a background image 
is pure presentation, and the only reason you 
would use a background-image is to 
improve the attractiveness of your element. An 
<img> element, on the other hand, is used to 
include an image that has a more substantial 
role in the page, like a photo or a logo.
Now, we could have just placed the image 
inside the paragraph, and we could probably 
get the same look and feel, but the guarantee 
star is pure decoration – it has no real meaning 
on the page and it’s only meant to make 
the element look better. So, background-
image makes more sense.
C# PDF: PDF Document Viewer & Reader SDK for Windows Forms
file in different display formats, and save source PDF introduction to RasterEdge C#.NET PDF document viewer & reader for Windows Forms application, you
cannot save pdf form in reader; pdf data extraction to excel
C# PDF: How to Create PDF Document Viewer in C#.NET with
Eaisly save and print designed PDF document using C# code; PDF document viewer can be created in C# Web Forms, Windows Form and mobile applications.
pdf form save in reader; export pdf form data to excel spreadsheet
406
Chapter 10
Test driving the background image
Well, this is certainly an interesting test drive – we have 
a background image, but it appears to be repeated 
many times.  Let’s take a closer look at how to use CSS 
background images, and then you’ll be able to fix this.
Here’s the guarantee star image in the background. 
Notice that it sits on top of the background color, 
and because it has a transparent background, it 
lets the color show through. 
Also notice that background images, like the background 
color, only show under the content area and padding, 
and not outside the border in the margin.
CSS Up Close
background-image: url(images/background.gif);
The background-image property is set 
to a URL, which can be a relative path 
or a full blown URL (http://...).
Notice that no quotes are 
required around the URL.
The background-image property places an image in the background 
of an element. Two other properties also affect the background image: 
background-position and background-repeat.
VB.NET Word: .NET Word Reader & Processor Control SDK | Online
How to save target Word file (with desired storage like ASP.NET web application, Windows Forms project and for converting Word document file to PDF, png, gif
exporting data from excel to pdf form; can reader edit pdf forms
VB.NET PDF: VB Code to Create PDF Windows Viewer Using DocImage
with great capabilities to view, annotate, process, save and scan and BMP) and document files (TIFF, PDF and Word NET, VB.NET, ASP.NET and .NET Windows Forms.
exporting data from pdf to excel; extract data from pdf table
the box model
you are here 
407
The background-position property sets the position of the image and can be specified in pixels, or 
as a percentage, or by using keywords like top, left, right, bottom, and center.
background-position: top left;
Places the image in the top, left of the element.
There are many different ways to position things in CSS and 
we’ll be talking more about that in two chapters.
By default, a background image is “tiled”,  or repeated over and over to fill the background space. 
The background-repeat property controls how this tiling behaves.
background-repeat: repeat;
Here are the other background-repeat values you can use.
Sets the image to repeat both 
horizontally and vertically. This is the 
default behavior.
no-repeat
repeat-x
repeat-y
inherit
Display the image once, don’t 
repeat the image at all.
Repeat the image only horizontally.
Repeat the image only vertically.
Just do whatever the parent element does.
.guarantee {
line-height:         1.9em;
font-style:          italic;
font-family:         Georgia, “Times New Roman”, Times, serif;
color:               #444444;
border-color:        black;
border-width:        1px;
border-style:        solid;
background-color:    #a7cece;
padding:             25px;
margin:              30px;
background-image:    url(images/background.gif);
background-repeat:   no-repeat;
background-position: top left;
}
By default, background images are repeated. Luckily there is a no-repeat value 
for the background-repeat property. Also, by default, browsers position a 
background image in the top, left of the element, which is where we want it, but 
let’s also add a background-position property just to give it a try. 
You’ve got two new 
properties to add.
Fixing the background image
We want the 
background image 
to not repeat.
And we want it in 
the top left corner.
C# PDF Convert to Images SDK: Convert PDF to png, gif images in C#
Besides raster image Jpeg, images forms like Png, Bmp, Gif, .NET Description: Convert all the PDF pages to target format images and save them into
extract data from pdf form; html form output to pdf
Save, Print Image in .NET Winforms | Online Tutorials
PDF Generator. PDF Reader. Twain Scanning. DICOM Reading. ISIS & printing capabilities into your Windows Forms applications Save images & documents to the disk; Save
exporting pdf form to excel; how to save a filled out pdf form in reader
408
Chapter 10
Another test drive of the background image
Here we go again.  This time, it looks like we’re 
much closer to what we want. But, since this is a 
background image, the text can sit on top of it. How 
do we fix this?  That’s exactly what padding is for! 
Padding allows you to add visual space around the 
content area. Let’s increase the padding on the left 
and see if we can nail this down once and for all.
This is much better. Now 
the image isn’t repeated.
But we’d really like for 
the text not to run over 
the top of the image.
How do you add padding only on the left?
For padding, margins, and even borders, CSS has a property for every 
direction: top, right, bottom, and left.  To add padding on the left side, 
use the padding-left property, like this:
.guarantee {
line-height:         1.9em;
font-style:          italic;
font-family:         Georgia, “Times New Roman”, Times, serif;
color:               #444444;
border-color:        black;
border-width:        1px;
border-style:        solid;
background-color:    #a7cece;
padding:             25px;
padding-left:        80px;
margin:              30px;
background-image:    url(images/background.gif);
background-repeat:   no-repeat;
background-position: top left;
}
We’re using the padding-left property to 
increase the padding on the left..
Notice that we first set the padding on all sides 
to 25 pixels, and then we specify a property for 
the left side. 
Order matters here - if you switch the order, then 
you’ll set the padding for the left side first, and then 
the general padding property will set all sides back to 25 
pixels, including the left side!
getting more sophisticated with padding
C# PDF Page Insert Library: insert pages into PDF file in C#.net
document in both web server-side application and Windows Forms project using doc2.Save(outPutFilePath Add and Insert Multiple PDF Pages to PDF Document Using
pdf data extractor; make pdf form editable in reader
C# PDF: Start to Create, Load and Save PDF Document
APIs will be used to achieve PDF document saving in void Save(String fileName); void SaveToStream(Stream stream ASP.NET AJAX, Silverlight, Windows Forms as well
extract data from pdf form fields; how to extract data from pdf to excel
the box model
you are here 
409
Are we there ye t?
Make sure you save your changes and reload the 
page. You should see more padding on the left side 
of the paragraph, and the text is now positioned 
well with respect to the guarantee star. This is a 
great example of where you use padding instead 
of margins. If you need more visual space around 
the content area itself, use padding, as opposed to if 
you want space between elements or the sides of the 
page, in which case, use margin. In fact, we could 
actually use a little more margin on the right side to 
set the paragraph off even more. Let’s do that, and 
then all we need to do is fix the border.
The padding looks great. 
Now the text is well 
positioned with respect 
to the graphic.
We could increase the 
margin on the right 
now to give this a little 
more of a “call out” 
look on the page.
And we still need 
a better border.
How do you increase the margin just on the right?
You do this just like you did with the padding: add another property, 
margin-right, to increase the right margin. 
.guarantee {
line-height:         1.9em;
font-style:          italic;
font-family:         Georgia, “Times New Roman”, Times, serif;
color:               #444444;
border-color:        black;
border-width:        1px;
border-style:        solid;
background-color:    #a7cece;
padding:             25px;
padding-left:        80px;
margin:              30px;
margin-right:        250px;
background-image:    url(images/background.gif);
background-repeat:   no-repeat;
background-position: top left;
}
Remember we’re already setting 
the margins to be 30 pixels.
See the pattern? There’s a property 
to control all sides together, and 
properties for each side if you want 
to set them individually.
And now we’re going to override that setting for the right 
side, and set it to 250 pixels.
Add the new margin-right property and reload. Now the 
paragraph should have 250 pixels of margin on the right side.
250 pixels
VB.NET Image: How to Save Image & Print Image Using VB.NET
ASP.NET web application or .NET Windows Forms project, without Allow VB.NET developers to save source image file to multi-page document files, like PDF and Word
fill in pdf form reader; online form pdf output
VB.NET Word: VB Code to Create Windows Word Viewer | Online
Word documents displaying, processing and printing in .NET Windows Forms project. Word Windows Viewer enables developers to load, view, process, save and print
how to flatten a pdf form in reader; how to extract data from pdf file using java
410
Chapter 10
A two-minute guide to borders
There’s only one thing left to do to perfect the guarantee paragraph: 
add a better border.  Before you do, take a look at all the different ways 
you can control the border of an element.
The solid style is 
just what it sounds 
like, a solid border.
The double style 
uses two lines.
A groove style 
looks like a groove 
in the page 
(difficult to see 
in a book).
The outset style looks 
like an outset that 
rises from the page.
Page 2 of 3
file:///Volumes/Macintosh%20HD/Users/eric/HFDP/HeadFirst/HTML/Chapters/Chapter9/Code/borders/borders.html
Nothings
better
looking
that dotted
Except
dashed
Nah, inset
borders
are the
way
The dotted 
style looks like 
a series of dots.
And the dashed 
style is just a 
set of dashes 
round the 
border.
The inset style 
looks like an inset 
that sinks into 
the page.
The ridge style 
looks like a raised 
ridge on the page.
I like to
think
outset
of
the box
09/30/2005 10:49 PM
borders.html
Page 3 of 3
file:///Volumes/Macintosh%20HD/Users/eric/HFDP/HeadFirst/HTML/Chapters/Chapter9/Code/borders/borders.html
Ruffles
have
ridged
borders
Go with me, I’ve 
been better since 
the outset.
Once you go 
dotted you’ll 
never go back.
Ignore dotted, 
use dashed.
I’m the only 
“in” style:  
inset.
I’m more fun; 
I’ve got ridges.
The border-style property controls the visual style of the border. There are eight 
border styles available, from a solid line to dotted lines to ridges and grooves.  
border-style: groove;
To specify a border style just use the 
border-style property and a value of one 
of the available styles. 
Border Style
Page 1 of 3
file:///Volumes/Macintosh%20HD/Users/eric/HFDP/HeadFirst/HTML/Chapters/Chapter9/Code/borders/borders.html
Solid
borders
are the
only way
to go
But I'm
double
good
Yea but I
groove
I’m the border 
that’s got the 
groove.
Go with solid, 
the original.
Go with 
double, I’m 
twice the fun.
overview of borders
the box model
you are here 
411
thin
medium
thick
1px
2px
3px
4px
5px
6px
border-top-color
border-top-style
border-top-width
border-right-color
border-right-style
border-right-width
border-bottom-color
border-bottom-style
border-bottom-width
border-left-color
border-left-style
border-left-width
Border Width
The border-width property controls 
the width of the border.  You can use 
keywords or pixels to specify the width.  
Border Color
The border-color property sets the color 
of the border.  This works just like setting 
font colors; you can use color names, rgb 
values, or hex codes to specify color.
Specifying Border Sides
Just like margins and padding you 
can specify border style, width, 
or color on any side (top, right, 
bottom, or left):
border-top-color: black;
border-top-style: dashed;
border-top-width: thick;
These properties are for the top border 
only. You can specify each side of the 
border independently.
border-color: red;
border-color: rgb(100%, 0%, 0%);
border-color: #ff0000;
Use border-color 
to specify the color 
of a border. You 
can use any of the 
common ways to 
specify color.
border-width: thin;
border-width: 5px;
You can specify widths using the keywords thin, 
medium, or thick, or by the number of pixels. 
412
Chapter 10
Browsers can have different default sizes for the 
keywords thin, medium, and thick, so if the size 
of your border is really important to you, consider 
using pixel sizes instead.
Browsers don’t always agree on the size 
of thin, medium, and thick.
Watch it!
Border fit and finish
It’s time to finish off the guarantee paragraph. All we need to do is give 
it a ragged-looking border. But which style is that?  The available styles 
are solid, double, dotted, dashed, groove, ridge, inset, and outset. So how 
do we make it look ragged? It’s actually just a trick: we’re using a dashed 
border that has its color set to white (matching the background color of the 
page). Here’s how you do it.  Begin by just making the border dashed. Find 
the border-style property in your “lounge.css” and change it, like this:
border-style: dashed;
Here we’ve changed 
the border from solid 
to dashed.
Go ahead and save the file and reload. You should see a border like this:
Now, to get a ragged-looking border, just set the color of the border 
to white. This makes the border look like it is cutting into the 
background color. Give it a try: find the border-color property 
and set it to 
white
.
border-color: white;
And here we’ve changed 
the border color from 
black to white.
Save the file and reload again. Now you should see the ragged border:
getting fancy with borders
the box model
you are here 
413
Nice! I can’t wait to see 
the entire page remodeled. 
Take a break and have an 
iced chai on me!
Congratulations!
Bravo! You’ve taken an ordinary HTML 
paragraph and transformed it into something 
a lot more appealing and stylish using only 
fifteen lines of CSS.
It was a long trip getting here, so at this point 
we encourage you to take a little break. Grab 
yourself an iced chai and take a little time to 
let things sink in – when you come back, we’ll 
nail down a few more of the fine points of CSS.
Documents you may be interested
Documents you may be interested