HTML - Html Background Image Issues

Hi all,

I want to have 2 images as backgrounds but have one on top of the other. Is this possible? If so how would I do it / what is the code?

Cheers

Raggy

I'm using firework and dreamweaver, but i need to expand some side bar images in html in a table so client can input their own copy so it expands vertically without compromising the design.

I need to use HTML code not CSS

What code can i use to vertical align the background image in a table?

Presently i have this working...

<td rowspan="9" background="expansion_images/right_001_r2_c5 copy.png">&nbsp;</td>

Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result?

ok hiya im wondering if you can sort my problem out? i recently set up a forum
for a gaming clan and i have thought of a design that i like but there is a problem....

i have designed a background which can be seen he
http://img177.imageshack.us/img177/3...imgcopylm8.jpg
btw the middle isnt orange only for thsi sample i made.

the only problem is it works perfectly for the resolution of my screen (1280x800) but not on my pc which is 1024x768. because of this it throws the whole of the forum out of line on a different resolution screen. the code for this background is in the css stylesheet but i was wondering if there was a code i could use that would display a different picture depending on the screen resolution i.e. i could rado the image several times to fit each screen resolution. if not gthen is there anyway of haveing a background with those 2 bits on the sides that will work in all of the resolutions??

his is how i want my site to look and how the sides should be and this is how it shows at 1280x800:



this is perfect until you view it at any other resolution.lol

like this resolution(1024x768):



is there anyway of making it look like the top on all of the resoltuions?



the link to the site i want to use it on is:

www.gusoldiers.forumn.net


here is the cxode im currently using (for this part):

* {
margin: 0px;
padding: 0px;

}
html {
background-color: #000001;
font-size: 100%;
height: 100%;
}
#min-width {
min-width: 750px;
}

body { background-color: #cce3f3;

background: url('http://img177.imageshack.us/img177/339/backgroundimgcopylm8.jpg') repeat-x;
background-attachment: fixed;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
margin: 0px 0px 0px 0px;
padding: 0px;
border-color: #862121;
border-width: 0px 0px 0px 0px;
border-style: solid;
}

{
font-size: 10px;
height: auto;
padding: 10px 0px;
scrollbar-face-color: #;
scrollbar-highlight-color: #;
scrollbar-shadow-color: #;
scrollbar-3dlight-color: #;
scrollbar-arrow-color: #;
scrollbar-track-color: #;
scrollbar-darkshadow-color: #;
}
* html .conteneur_minwidth_IE {
/* Hack IE min-width */
padding-left: 750px;
}
* html .conteneur_container_IE {
/* Hack IE min-width */
margin-left: -750px;
position: relative;
}
* html .conteneur_minwidth_IE, * html .conteneur_container_IE, * html .conteneur_layout_IE {
/* Hack IE min-width */
height: 1px;
}


#wrap {
width: 80%;
margin: 0px auto;
background-color: #1a1a1a;
background-image: url("");
background-repeat: repeat-x;
background-attachment: fixed;
border-color: #46494b;
border-width: 0px 0px 0px 0px;
border-style: solid;

padding: 5px;
}


#wrapnav {
width: 800%;
margin: 0;
background-color: #ECECEC;
border-width: 1px;
border-style: solid;
border-color: #A9B8C2;

Hello eveybody,

I have a question i am fairly new to the HTML scene. I am opening up an online store and have purchased volusion as my shopping cart. I wanted to change the background to a different color, but i just want the background not the entire background even the layout that is in front of the background is changing. I have gone into the css file to change it and it is not what i am looking for.

Can anyone out there give me some advice on how to do this. I hope i made myself clear on what i am asking for. If not feel free to let me know and i will elaborate more.

Thank you

===



I'm on a Mac and I'm noticing that the site I'm developing is having major <TABLE> issues on IE for the PC -- like seen in this Screen Shot he http://sample.studiopresence.com

What it should look like is seen on this Screen Shot he http://sample.studiopresence.com/site_v2B.htm

Here's the actual HTML version of the site: http://australianwellnesscentre.studiopresence.com


Any help on this is GREATLY APPRECIATED!!!

Thanks in advance!


===

Hello all! New to the forum here, so smack me into shape if i step outside of the rules...

Have recently been attempting to maintain a (very basic) website for my parent's cottage. I aimed to keep it low maintenance in order to allow me not to have to do too much to it! The address is http://www.bettwsbach.co.uk

Recently, i've been attempting to add a new 2009 price list to the website, which has come to me in the form of an excel spreadsheet. Here's how it should look:
http://www.bettwsbach.co.uk/Misc/BBPrice.jpg

I've used Excel's in-house save-to-webpage feature, and with a bit of jiggery-pokery to make the background come up (!!) here's how it appears as part of a frameset on my mac:
http://www.bettwsbach.co.uk/Misc/BBPriceMac.jpg

HOWEVER! I'm reliably informed that on various computers, the formatting gets pretty screwed. If you have time, go through the link to the website above, click on 2009 prices, and see if it's legible. I can only think it might be a browser-related issue (i'm on firefox), or perhaps a resolution issue - maybe the page is trying to sort its own sizing out for each computer. Either way, you can see that the formatting changes markedly between Excel and the HTM page it pushes out.

So i guess my questions a
1) Anyone come across this before? Any idea why it's messing me around?
2) Any idea how to make it better?
3) Is there a better solution to the webpage (i.e., not using Excel altogether) that i've inadvertently disregarded? Bear in mind the whole thing has been put together by me and notepad, and i've had to teach myself HTML, with very little time dedicated to the running of the website.

Many thanks in advance.

Rob

Can anyone expain to me why this page I am working on looks fine in both Google Chrome and Mozilla Firefox, but looks completely askew when using Microsoft Internet Explorer?

Any help would be appreciated!

http://imxevent.com/imx2011/Public/C...ortMenu=101005

view-source:http://imxevent.com/imx2011/Public/C...ortMenu=101005

I think it is this piece of code that is causing me problems (lines 281-287)...

HTML Code:

<p><font style="FONT-SIZE: 20px" color="#c00000"><strong>imX Keynote Sessions</strong></font></p> 

<p><span style="FONT-FAMILY: Univers 57 Condensed; COLOR: black"><font style="FONT-SIZE: 15px">An extension of the forward thinking that has defined the development of imX, these Keynote Presentations reflect imX’s position as a high-level gathering place for manufacturing thought leaders from across the country and around the world. If it’s important for U.S. manufacturing, it's discussed at imX.</font></span>&nbsp;</p><p><table style="width: 510px; height: 138px; " class="RadEDomMouseOver"> 

<tbody> 

<tr> 

<td colspan="3">&nbsp;<strong>KEYNOTE SESSION&nbsp;- DAY ONE</strong></td></tr> 

<tr><td style="text-align: center; vertical-align: top; ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img alt="Michael Molnar" src="http://www.imxevent.com/imx2011/CUSTOM/images/molnar.jpg"&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td style="text-align: left; vertical-align: middle; "><font><font><br><url=http://www.imxevent.com/imx2011/public/Content.aspx?ID=316&amp;amp;sortMenu=102003 style="color: rgb(255, 0, 0); font-family: arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; ">Michael F. Molnar</a></font></font><b style="font-family: arial, Verdana, sans-serif; font-size: 14px; ">, FSME, CMfgE, PE</b><br><br><table class="RadEDomMouseOver" style="font-family: arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; width: 510px; height: 138px; "><tbody><tr><td style="text-align: left; vertical-align: top; "><strong><font color="#ff0000">Date:</font></strong></td><td>&nbsp;</td><td style="text-align: left; vertical-align: top; ">Monday, September 12, 2011</td></tr><tr><td style="text-align: left; vertical-align: top; "><strong><font color="#ff0000">Speaker:</font></strong></td><td>&nbsp;</td><td style="text-align: left; vertical-align: top; ">Michael F. Molnar, FSME, CMfgE, PE</td></tr><tr><td style="text-align: left; vertical-align: top; "><strong><font color="#ff0000">Title:</font></strong></td><td>&nbsp;</td><td style="text-align: left; vertical-align: top; ">The U.S. Advanced Manufacturing Initiative: <br>Your Role in Public Private Partnerships</td></tr></tbody></table></td></tr><tr><td style="TEXT-ALIGN: left; VERTICAL-ALIGN: top" colspan="3">&nbsp;<iframe width="480" height="315" src="http://www.youtube.com/embed/VUzBbwlpIFk" frameborder="0" allowfullscreen=""></iframe></td></tr></tbody></table></p> 

<p><a name="schutz"></a>

Hello all,

I am having a problem which I can't seem to figure out with an html page. I sliced up a photoshop image then turned it into a web page. I took the html table from the sliced up header, and plugged it into the final web page. It looked like it was aligned properly in Dreamweaver, however when I viewed the webpage there were some alignment issues with the page.

Here is the link to the misaligned page:
http://test.gridpointpm.com

Here is the code for part of the index page that includes the header with the alignment issues:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>

<body  id="page1" onload="new ElementMaxHeight()">
<div class="w">
  	<div class="site_center">
  	<div class="site_center1">
          	<div id="header">
       	  		<div class="flash">
                <!-- Save for Web Slices (indexheader.psd) -->
<table id="Table_01" width="866" height="441" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="13">
			<img src="images/index_01.jpg" width="866" height="66" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="66" alt=""></td>
	</tr>
	<tr>
		<td colspan="13"><img src="images/index_02.jpg" width="866" height="206" alt="" /></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="206" alt=""></td>
	</tr>
	<tr>
		<td colspan="7" rowspan="2">
			<img src="images/index_03.jpg" width="632" height="114" alt=""></td>
		<td colspan="5">
			<img src="images/index_04.jpg" width="157" height="34" alt=""></td>
		<td rowspan="6">
			<img src="images/index_05.jpg" width="77" height="169" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="34" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2">
			<img src="images/index_06.jpg" width="157" height="95" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="80" alt=""></td>
	</tr>
	<tr>
		<td colspan="5">
			<img src="images/index_07.jpg" width="360" height="15" alt=""></td>
		<td rowspan="3">
			<img src="images/index_08.jpg" width="180" height="40" alt=""></td>
		<td rowspan="4">
			<img src="images/index_09.jpg" width="92" height="55" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="15" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/index_10.jpg" width="153" height="40" alt=""></td>
		<td>
			<img src="images/index_11.jpg" width="42" height="16" alt=""></td>
		<td rowspan="3">
			<img src="images/index_12.jpg" width="9" height="40" alt=""></td>
		<td>
			<img src="images/index_13.jpg" width="58" height="16" alt=""></td>
		<td rowspan="3">
			<img src="images/index_14.jpg" width="98" height="40" alt=""></td>
		<td rowspan="3">
			<img src="images/index_15.jpg" width="31" height="40" alt=""></td>
		<td>
			<img src="images/index_16.jpg" width="44" height="16" alt=""></td>
		<td rowspan="3">
			<img src="images/index_17.jpg" width="7" height="40" alt=""></td>
		<td>
			<img src="images/index_18.jpg" width="55" height="16" alt=""></td>
		<td rowspan="3">
			<img src="images/index_19.jpg" width="20" height="40" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_20.jpg" width="42" height="24" alt=""></td>
		<td rowspan="2">
			<img src="images/index_21.jpg" width="58" height="24" alt=""></td>
		<td rowspan="2">
			<img src="images/index_22.jpg" width="44" height="24" alt=""></td>
		<td rowspan="2">
			<img src="images/index_23.jpg" width="55" height="24" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="9" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_24.jpg" width="180" height="15" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="15" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
       	  		</div>
   		  </div>

Any help would be much appreciated. Thanks in advance.

Hi all,

Not sure if im posting in the right place but i am having some problems, well, a lot of issues, with an email im sending in outlook.



As you can see outlook has put hue gaps in before each section, although the gap in the right column is supposed to be there. Any one have any advice on how to fix this? Its works well in every other email inbox... really stumped!

Thanks for any help in advance.

Matt

Hi guys maybe some one could help me here

iv made a template in photoshop see below




now i have the header and footer stretching perfectly
now the issues is when i try to insert the content in the middle (content is a thumbnail gallery script)

2 left and right sidebar disappear and they do not stretch up and down


i duno what im missing ??? is there a way to do this?? iv tried using a table inbetween the top and bottom half but still i just removes the side bars... in other words im try to "make a square(theme) with content in the middle of it" if you catch my drift with the side bars streting up and down as the content grows larger

i think an iframe in the middle would work but the CMS im using does not like Iframes and i know iframes are a bit outdated

here is the code im using... ANy help will be very much appreciated

HTML Code:

<style type="text/css">
<!--
body,td,th {
	color: #0F0;
}
-->
</style><center>
<style type="text/css">
<!--
body {
	background-color: #0b0b0b;
}
-->
</style><table id="Table_01" width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2">
			<img src="images/steamlounge_01.png" width="213" height="185" alt=""></td>
		<td background="images/steamlounge_02_STR.png" width="100%" height="185" alt=""></td>
		<td colspan="2">
			<img src="images/steamlounge_04.png" width="238" height="185" alt=""></td>
	</tr>
</table>
<table id="Table_02" align="left" width="87" height"100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
		<td background="images/steamlounge_05_STR.png" alt=""></td>
	</tr>
</table> 


<p>hgjdgjdghjjdg
  hjd
  ghjd
  gh
  g
  g
  g
  g
  g
  g
  g
  
  g
  g
  g
  g
  g
  g
  g
  
  g
  g
  g
  g
  g
  gg </p>
<p>g</p>
<p>g</p>
<p>g</p>
<p>g</p>
<p>&nbsp;</p>
<table id="Table_02" align="right" width="87" height"100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
		<td background="images/steamlounge_07_STR.png" alt=""></td>
	</tr>
</table> 
<table id="Table_01" width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2">
			<img src="images/steamlounge_10.png" width="213" height="68" alt=""></td>
		<td background="images/steamlounge_11_STR.png" width="100%" height="68" alt=""></td>
		<td colspan="2">
			<img src="images/steamlounge_13.png" width="238" height="68" alt=""></td>
	</tr>
</table>
</center>

So I'm not completely new to html website design, but I am building a site and was just going to throw up a banner and some text saying coming soon. So the text displays fine. But I cannot for the life of me figure out how to get the images to display. I have checked and double checked the source code and it should be fine. I manually logged into my ftp and the file is in the directory so it shouldn't be an issue of not being able to find it. Can I get any help at all?

Here is the link: http://www.huntlink.net

my code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="800" border="0" align="center">
<tr>
<td><img src="images/mainbanner.png" width="800" height="150" /></td>
</tr>
<tr>
<td align="center"><h2>Coming Soon!</h2></td>
</tr>
</table>
</body>
</html>

Any help would be great. I don't know why the image isn't displaying. It works when I preview it in dreamweaver also.

Dear forums!
I'm having issue with an padding-problem which i'm not able to solve on my own. I don't understand why my code returns the problems that it does, but it for some reason does.

Okay, what is the problem?

I've drawn them into this picture;
http://i42.tinypic.com/4v1veo.png
The problem is that the first navigation-button starts off with about 10-15 pixels, and ends about 3 pixels out of the actual navbar (if you check the borders).

I would like to remove this, so that the navbar button covers the whole area of the navbar div / element, without starting too late or ending too late.




CSS code can be found here;
http://www.myhrensolutions.net/tolkf...sign/index.css

the HTML-code can be viewed here;
http://www.myhrensolutions.net/tolkfirma/tjenester.html


All help is muchly appriciated,
thank you!

- Scott.

Hello,

I designed this website http://www.aitputd.org/conference and found that it has compatibility issues when viewed with different browsers.

e.g. The 'font' of the menu changes (becomes bold) when viewed in IE and Chrome browsers as opposed to FF3.5

Also The title 'sponsors' on the left does not stay at the center in IE and FF3.5 but seems good in Chrome.

Is there a solution to address these problems??

Any help is highly appreciated.

Regards,

NP