PDA

View Full Version : Setting an image behind text, background in one area, while not effecting columns

jackknive
08-17-2006, 07:16 PM
Heya guys,

Ok so I am newer at this, but learning. I am making a website for the company I work for (small buisness) and I have the page semi done, but I want to set an image as a background on only one section. Now I know how you do that when it is the entire page, but i have tables, both across the top and a menu on the side.. I dont want those effected, only the main text area. I want an image, behind text, that is stationary, and that resizes to fit any monitor size.

Any ideas how I would do that? Thanks for any help you have!!! :thumbsup:
Graft-Creative
08-17-2006, 07:33 PM
Hi Jacknife,

In theory this really is very, very easy- however it'd be worth you posting your code - so we can have a look and offer the best advice.

Kind regards,

Gary
jackknive
08-17-2006, 07:44 PM
Like I said Im new at this so my code isnt the greatest. Any help anyone can give is very much appreciated!! I want it to look nice, and professional, not like some kid made it ya know?

What I want is on the grey area, I want to put a background image, so that its just in that area, no where else, fits any monitor, and is under the text.

Also same thing with the medium blue area around the hard hat, I want to put a textured color in that one.. So any ideas lemme know!


<head>
<title>Quality Insurance Repairs, Inc.</title>
</head><body>


<div align="center">
<table border="0" width="100%" bgcolor="#000066">
<tr>
<td>
<p align="center"><font size="5" color="#FFFFFF"><b>Quality Insurance Repairs, Inc.<br></font>
<align="center"><font size="4" color="#FFFFFF">General Contractors</b></font><br>
</td>
</tr>
</table>
<table border="0" width="100%" cellpadding="8" cellspacing="0">
<tr>
<td width="25%" valign="top" bgcolor="#000099">
<table border="0" width="100%" bgcolor="#FFFFFF">

<tr>
<td align="center">
<p align="center"><a href="http://www.qualityinsurancerepair.com/aboutus">
<font face="Times" size="2">About Us</font></a></td>
</tr>
<tr>
<td align="center"><a href="http://www.qualityinsurancerepair.com/examples">
<font face="Times" size="2">Examples of Work</font></a></td>
</tr>
<tr>
<td align="center"><a href="http://www.qualityinsurancerepair.com/history">
<font face="Times" size="2">Our History</font></a></td>
</tr>
<tr>
<td align="center"><a href="http://www.qualityinsurancerepair.com/commercial">
<font face="Times" size="2">Commercial</font></a></td>
</tr>
<tr>
<td align="center"><a href="http://www.qualityinsurancerepair.com/residential">
<font face="Times" size="2">Residential</font></a></td>
</tr>
<tr>
<td align="center"><a href="http://www.qualityinsurancerepair.com/history">
<font face="Times" size="2">Company History</font></a></td>
</tr>
<tr>
<td align="center"><a href="http://www.yourwebsite.com">
<font face="Times" size="2">Contact Us</font></a></td>
</tr>
</table>

<table border="1" width="100%" cellspacing="0" cellpadding="5" bordercolor="#B37A55" bgcolor="#FFFFFF">
<tr>
<td>
<p align="center"><font face="Times"><b>Office Information</b></font></p>

<p align="center"><font face="Times" size="2">

Ph: 440-546-1222<br>
Fax: 440-546-1224<br>
<P><center>
Office Hours:<br>
M-F 8:00 AM - 4:30 PM<br>
<P>
<font size="1" face="Times" 000066>
<a href="qualityinsurancerepair@yahoo.com">Email Us</a>
</font>
</P>
</center>


</font></td>

<P>
<center>
<a href="http://imageshack.us"><img src="http://img369.imageshack.us/img369/6522/hardhatiz3.jpg" border="0" alt="Image Hosted by ImageShack.us" /></a>
</center>
</P>

</tr>
</table>
</td>
<td width="100%" valign="top" bgcolor="#CCCCCC">
<p align="left"><font face="Times" size="3">We specialize in remodeling and restoration.</font></p>

<p align="left"><font face="Times" size="3"><font color="#000000">
Blah Blah Blah here</font></p>

<p align="left"><font face="Times" size="3">Blah blah blah here</font></p>

<p align="left"><font face="Times" size="3">Have damage to your home? Thinking about remodeling?</font></p>

<p align="left"><font face="Times" size="3">Quality Insurance Repairs can do the job what ever it may be, from the roof to the basement. </font>
</p>

<p align="left"><font face="Times" size="3">
• Free detailed estimates<br>
• 24 hr. answering service<br>
• Experienced staff<br>
• Emergency services<br>
• Residential and commercial work<br>
• We'll treat your home like it was our own<br>
</a> </font></p>

<center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<u>
<h5>Contact us<h5></u>
<font size="1" face="Times" 000066>
7007 E. Sprague Road, Independence, Ohio, USA 44131<br>
<a href="qualityinsurancerepair@yahoo.com">Email us</a>
</font>



</td>
</tr>
</table>
</div>





</body>
VIPStephan
08-17-2006, 09:49 PM
I [don't] want it to look [...] like some kid made it ya know?
Funny you say that because at the moment it looks exactly like that. :D (no offense!)
If you want to have a professional looking code then you might wanna read about semantic HTML (http://www.peachpit.com/articles/article.asp?p=369225&rl=1) and about CSS layouts (http://bonrouge.com/br.php?page=home). :)

OK, now to the actual issue:
I hope I understood you right with the areas you meant (hard hat - what's that?)...

Grey area:

</td>
<td width="100%" valign="top" bgcolor="#CCCCCC" style="background: url(path/to/image.gif);">
<p align="left"><font face="Times" size="3">We specialize in remodeling and restoration.</font></p>


Blue area:

<td width="25%" valign="top" bgcolor="#000099" style="background: url(path/to/image.gif);">
<table border="0" width="100%" bgcolor="#FFFFFF">


There are HTML attributes for background but I want you to start using real styles (CSS) and these inline styles are the beginning.
Also I'm glad I'm using Dreamweaver because that highlights those several nesting errors you have.

Plus a professional web developer would use a doctype (http://www.htmlhelp.com/tools/validator/doctype.html) in the beginning of the document (in your case "Transitional" might be the best choice) and make sure the code is valid (http://validator.w3.org).
jackknive
08-23-2006, 01:53 PM
hehe yeh I know it looks like a kid made it. First attempt, other than stuff on myspace. Yikes! So I been working on it and its comparibale to other sites I see for people in the industry (contracting) but I would like a bit sleeker professional look. I am going to check out that link. Should help I hope!!