1 reply [Last post]
Andy Downie
Offline
Enthusiast
Hazelbank (Lanark), Scotland
Last seen: 19 years 10 weeks ago
Hazelbank (Lanark), Scotland
Joined: 2003-07-31
Posts: 87
Points: -1

HI All,
I have tried placing a company stationery onto a page using css:

Quote:

body {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background-color: #6AB396;
background-image:url(letterw433h600.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
height: 600px;

I then tried to place text over the stationery, in order to have the appearance that the text was on the paper by inserting a class into the body tag:

Quote:

.temptext {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
padding-left: 50%;
margin-top: 50%;
width: 400px;
}

html:

Quote:
<body style="background-color: #6AB396;" class="temptext">
&quot;From Design to Completion<br />
Specialising in Domestic Gardens&quot;
Formed in July 1999 with over 20 years experience.
Local company will undertake any size of project or part project.
Design - Full garden plans and fixed price quotations for simpler jobs.
An Experienced Team with a respect reputation to perform projects from design
to completion.
</body>

but unfortunately the text appears nowhere near the stationery.
I wondered whether the stationery should be used as a background image of a div and perhaps using the text class in a span tag? I had thought I had seen this type of thing on these forums but don't seem to be able to find it.
I resorted to adding the text to the graphic in PSP7, but wondered whether someone could advise for future reference? I have placed the page HERE

Cheers

Andy

Web design and Independent Translation Services

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 23 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Adding text over a background image

First up, remove this:

<?xml version="1.0" encoding="iso-8859-1"?>

Then consider using a div with the stationary set as the background of the div, rather than the body. This way, and text placed inside the div will appear 'on the paper'. Then it can be positioned.

Verschwindende wrote:
  • CSS doesn't make pies