|
HTML - How Do I Place A Table Over A Body Background Image
Hi...I'm not new to html but i've come across something i cant get to work. I have created a page with a background image to repeat-x and it look great.
Next I want to place a three column table at the top and over this repeated background image. The problem is that the table get placed below the 'background_img.jpg'. So there is a large gap between the top of the page and the table. How do I get the table to be placed over or on top of the repeated background img? Thanks Similar TutorialsIs it possible to declare background image separately and use it in body tag to declare it as background using it's id ???? please reply.... Hi everyone: Any help appreciated. Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window. Development: I'm using a Mac, and I don't have ready access to a PC to experiment. What I tried: Code: <table> <tr> <td><img src = "a.png" style = "width: 100%" /></td> <td><img src = "b.png" style = "width: 100%" /></td> <td><img src = "c.png" style = "width: 100%" /></td> </tr> </table> <p class = "caption">A caption for the 3 images</p> <p class = "legend" >A legend for the three images</p> What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals. What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element. What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly. What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left. What's the trick to get around this IE "gotcha" please? Thanks from a newbie. I'm new to the forum and hope i'm asking in the right place. I have modified some code to break one image into seperate images and display them at different places on a page, but i would like to use one of the images as a background to a table, below is the code (excluding javascript) to seperate one item that i've called Logo and show it on it's own; <body onload="crop('images/New_Logo.png', 'Logo', 0, 0, 960, 99); > <div id="Logo" style="width:960px; height:99px; margin-bottom:20px;"></div> I've tried different variations to show as background but it wouln't work, i was thinking along the lines of <table background="Logo"> .... </table> Hi,, in the attached file .. i was tryin to set image ->contact_13.jpg as the background image for that cell.. as <TD COLSPAN=6 background="images/contact_13.jpg"></TD> but its not setting it correctly .. the path and name of image is correct .. as far as i see it .. <td background='xyz.jpg'></td> works .. is it because of the colspan thing .. Hey all! I would like to create a 3 row table with a background color in each row. On the right side of the table I would like to display an image that sits on top of the background color and spans all 3 rows. When I try to do this it seems that the row bg colors go OVER the image. How can I get the image to sit on top of the 3 row bg colors? I don't know any other way to do this but I'm definitely open to suggestions! Thanks for any help! This is the code I've been trying: Code: <TABLE cellpadding="0" width="200" cellspacing="0" border="0" style="
background-image:url(ask.gif);
background-position: top right;
background-repeat: no-repeat;">
<tr bgcolor="#FBE9D1">
<td> </td>
</tr>
<tr bgcolor="#F7D5A7">
<td height="20">ask a question</td>
</tr>
<tr bgcolor="#FBE9D1">
<td height="28"> </td>
</tr>
</TABLE>
Hello everyone, I'm new here and currently reaquainted with HTML as I'm trying to help out a friend with his website. I am trying to randomize a background image in a table and I can't seem to get anything to work. I have searched up and down this forum and others, have tried several scripts that seem to work for others, and I'm still at square one. I most recently tried a script I found here on this forum with no success. Here is my code... Code: <!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>
...
...
<script type="text/javascript">
<!--
var pic=new Array();
pic[0]="img/home_back1.jpg";
pic[1]="img/home_back2.jpg";
pic[2]="img/home_back3.jpg";
var num=Math.floor(Math.random()*pic.length);
window.onload=function() {
document.getElementById('wrapper').style.backgroundImage='url('+pic[num]+')';
}
//-->
</script>
</head>
<table id="wrapper" width="955" height="600" align="center" border="0" cellpadding="0" cellspacing="0" >
...
...
...
</table>
</body>
</html>
If anyone has any insight as to what I may be doing wrong or how I can fix this it would be much appreciated as I'm pulling my hair out trying to get this to work. Thanks! Unclejunebug Hello Everyone. The problem I am having and always wanted to know the correct way is . When adding text within a table with a background image and if the text excedes the background image thus increasing the height of the table, the background image repeats. What I want to do is have a solid color repeat at the bottom of the image so the table does not break the image, I want the image not to Repeat but to take on that solid color and repeat that color through the bottom of the Table so I can add as much text as I need. I appreciate any help. I know this is quite common when working with table. Thank! Problem: When ever i place the image the menu messes up. Please look at the first picture below to see the problem Now look at the second picture below to see how i want it to be source code: <html> <head> </head> <body> <img src="Home.jpg" width="190" height="30"><br/> <img src="Downloads.jpg" width="190" height="30"><br/> <img src="Hacks.jpg" width="190" height="30"><br/> <img src="Media.jpg" width="190" height="30"></br> <img src="Information.jpg" width="190" height="30"> <img src="Linux-logo.jpg" width="200" height="200"> <br/> <img src="Disclamier.jpg" width="190" height="30"><br/> <img src="Links.jpg" width="190" height="30"> <br/> </body> </html> 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"> </td> Hi I want to addd a image for background so i can postion it and not have it repeat : for for a table cell if u see my link below its the purple table cell that has the Bomboniere Adelaide as the heading i only want the background image in that cell - thanks in advance http://weddingsmadeeasy.com.au/adelaide/Bomboniere.html Can someone show me how to make a background stay still when you scroll up and down the page? Hello all, First time posting to the forums here. I'm creating a table and each row represents a "tab" of the UI. Each cell has a background image that looksl ike this. however, when I render my table and have text in the cell, the right edge of the tab is chopped off like this.. Any recommendations on some CSS or table attributes that I can aplly to make both rounded ends of the background image appear? I've tried turning off table borders, cell spacing and cell padding. Any help would be greatly appreciated. Thanks. So I decided to see if I could make my site XHTML 1.0 Strict-compliant. Here's the main page on my test server I'd be thrilled with it if I could do 3 things: - Set the background color of the left column to match the color behind the fonts. Is there a CSS class I can create and set the cells to that class? - Remove the border around clickable images. - Get the spacing between the menu options on the left to look the way it does on the other pages in the site. If you click any of the pages on my actual site you can see the look I'm going for. Thanks as always for the help! Joshua Hello guys, I have just created very simple website with an older Flash 7. Then I had embeded that .swf file on simple html document. (I did input code for black body background): <body bgcolor="000000"> It looks OK on Safari, but for some reason, background color turns white when viewed on FireFox. I dont have Internet Explorer, so I don't know how it looks there. Any idea what I do wrong? Here is the link to that website: http://www.icebergfilms.com Thank you for any advise. hi!!!! everybody i inserted an image but it placed on center so i want to place that image on top if anyone know please give me suggestions for this thank u. Good day, I am brand new here in this forum. So many knowledgeable folks here. I am relatively new to web design. I typically use templates and themes and tweak them. I can navigate a CSS doc and html to make changes, etc. However, I have a client who has an existing site that she wants to keep the aesthetic of and so I am using what the previous designer left. It is a simple html page with tables. Simple enough. Very elegant visually. No need to SEO really so it works. She has asked if we can make the left column of a two column table scroll independently. The page content is about over 6000px. The scroll column will contain a page outline and other text that will include internal targeted links. This is outside my skill set, but I want to learn. Have searched the net and found some suggestions but want it to be clean and ended up here. There is no style sheet other than the ie6 sheet. Page is he http://www.themedeaproject.com/proposaltestpage.html no graphics are loaded. Can anyone point me to a good tutorial or have any suggestions? Thanks! BlueEyedMonkey aka Tatyanna I've made an incredibly simple html page as an active desktop for a gpo policy, however there's been an uproar about colours so I thought I'd give it a stab to have a drop-down box to select from a range of colours for the body style tag. Any suggestions? <html> <head> <!--808080--> <title>ArchitenBG</title> <STYLE type="text/css"> body { background-color:#3A6EA5; } #div1 { position: absolute; size: 50%; bottom: 0px; right: 0px;} </STYLE> </head> <body> <div id="div1"><img src="Talbg.png" /></div> </body> </html> i want to place image dynamically...selecting from the system folder . pls help this table wont center in IE but its center in firefox can anyone help me with this? http://lilions.com/contact/ I cant fit the hole code so please view page source to see if something offsetting it somewhere else on the page thanks Code: ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum0">
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/home">HOME</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/news"><span>NEWS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/lnews">LATEST NEWS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/pnews">PAST NEWS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/calander" target="_blank">CALANDER</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/team"><span>TEAM</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/roster">ROSTER</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/coachingstaff">COACHING STAFF</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/frontoffice">FRONT OFFICE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/fieldinfo">FIELD INFO</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/gameday"><span>GAMEDAY</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/schedule">SCHEDULE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/standings">STANDINGS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/statistics">STATISTICS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/history">HISTORY</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/fanzone"><span>FANZONE</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/teamstore">TEAM STORE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/gallery">GALLERY</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/tickets">TICKETS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/calander" target="_blank">EVENTS CALANDER</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/sponsorship">SPONSORSHIP</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>APPLICATIONS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/frontofficeapp" target="_blank">FRONT OFFICE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/coachapp" target="_blank">COACH</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/playerapp" target="_blank">PLAYER</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/dancerapp" target="_blank">DANCER</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/contact">CONTACT US</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://fivestarfootballleague.com/" target="_blank">FSFL</a></li>
</ul>
</body>
<br></br><br></br>
<center>
<img src="http://lilions.com/home/images/tpc.jpg"></center><center><img src="http://lilions.com/home/images/cnttp.jpg"></center><table style="border-collapse: collapse;" width=1000 height=450>
<td id="center-mid">
</center><center><font color="#FFFFFF"><table border="3" bordercolor="FFFFFF" width="630" bgcolor="000000"></center></br><td><p><i><b><center><font color="#FFFF00">donbonacorsa@yahoo.com <donbonacorsa@yahoo.com></center></b></i></p></font>
<form action="index.php" method="post"><table width="630" border="0" cellspacing="2" cellpadding="0">
<h4>
<center>
<p>Have questions or comments? Please feel free to fill in the form below to send me an email.</p>
</center>
</h4>
<center></h4><div id="content">
<p><tr align="center"><center>
<td width="29%" class="bodytext">Your Name (required):</td></tr>
</center>
<tr align="center"><center>
<td width="71%"><input name="name" type="text" id="name" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Your Email (required)</td></tr>
</center>
<tr align="center"><center>
<td><input name="email" type="text" id="email" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Subject</td></tr>
</center>
<tr align="center"><center>
<td><input name="subject" type="text" id="subject" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Comment:</td></tr>
</center>
<tr align="center"><center>
<td><textarea name="comment" cols="45" rows="6" id="comment" class="bodytext"></textarea></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext"> </td></tr>
</center>
<tr><center>
<td align="center" valign="top"><input type="submit" name="Submit" value="Send"></td></tr>
</center>
</p></table></tr></td></form></td>
</table>
</div>
</b>
</h3>
</body>
<center>
<img src="http://lilions.com/home/images/cntbtm.jpg"></center>
<br></br>
<center>
<table valign="top" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="credit_white1"><font color="#ffffff"><img src="images/spacer.gif" width="30" height="1">Copyright 2011, MajorKillenDesign.com, Inc. All Rights Reserved.</font><br><br></td></center>
</tr>
</table>
<center>
<table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="2">
<tr>
<td width="800" height="2" bgcolor="#D4D601"></td>
</tr>
</table>
<table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="15">
<tr>
<td width="800" height="15" class="subMenu"><p style="margin-left: 25px; margin-right: 0px; margin-top: 3px; margin-bottom: 5px" align="right">
<i> <a href="http://lilions.com/contact/">
Contact The Lions</a> </i>
| <a href="http://majorkillendesign.com/">
Site & Design Sales</a> </p></td>
</tr>
</table>
<script language="JavaScript">
if (document.location.toString().indexOf("home") == -1) {
document.write('<table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="2"><tr><td width="800" height="2" bgcolor="#D4D601"></td></tr></table>')
}
</script>
</tr>
</table></center>
</html>
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? |
|||||||