100% height table with bg image

I need to have a table that is centred and fills 100% height only in the browser. In it will be a background image. Can anyone tell me how to do this? I need to do it as soon as possible as the client has just changed their mind after I completed the job.

Code below, taken from link below, if youre inclined to want to read about how to do it:
http://apptools.com/examples/tableheight.php
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body, #wrapper {
      height:100%;
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
   #wrapper {
      margin: 0 auto;
      text-align: left;
      vertical-align: middle;
      width: 400px;
</style>
</head>
<body>
<table id="wrapper" border="0" cellspacing="0" cellpadding="0">
      <tr>
         <td>This is centered</td>
      </tr>
   </table>
</body>
</html>

Similar Messages

Copying a table with rollover images & links

Need help...
Using Dreamweaver CS4.
I have a table with rollover images and links from those rollovers"
I now want to copy and paste the table into other pages, but when I do, my links are broken and the rollovers don't work.
I have my Site Def preferences set to "Links relative to: Document"
Is there an easy way to copy & paste a table with rollover graphics and links?
I've tried dragging the table from the page with the working links onto the different page. The graphics show up, but the second state of the rollovers soesn't show up, and I get some weird link error:
Can anyone help?

<!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>Phyllis Bramson</title>
<style type="text/css">

</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta name="Keywords" content="Bramson, artist, Chicago, painter" />
<meta name="Description" content="Phyllis Bramson is an established Chicago painter and educator." />
</head>
<body onload="MM_preloadImages('common_graphics/menu_paintings1990_rollwhite.gif','common_graph ics/menu_paintings2000_rollwhite.gif','common_graphics/menu_paintings1980_rollwhite.gif',' common_graphics/menu_paintings1970_rollwhite.gif','common_graphics/menu_worksonpaper2000_r ollwhite.gif','common_graphics/menu_worksonpaper1990_rollwhite.gif','common_graphics/menu_ worksonpaper1980_rollwhite.gif','common_graphics/menu_worksonpaper1970_rollwhite.gif','com mon_graphics/menu_scrolldrawings_rollwhite.gif','common_graphics/menu_statement_rollwhite. gif','common_graphics/menu_resume_rollwhite.gif','common_graphics/menu_collections_rollwhi te.gif','common_graphics/menu_exhibitionsnews_rollwhite.gif','common_graphics/menu_links_r ollwhite.gif')">
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td bgcolor="#666699" scope="col"> </td>
    <td height="30" scope="col"><img src="common_graphics/mast_namebanner.gif" alt="" width="740" height="36" border="0" usemap="#Map2Map2" />
      <map name="Map2Map2" id="Map2Map2">
        <area shape="rect" coords="562,8,719,32" href="mailto:[email protected]" target="_blank" alt="email" />
    </map></td>
</tr>
<tr>
    <td width="160" valign="top" bgcolor="#666699" scope="col"><table width="190" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><img src="common_graphics/menu_paintingssculpture_rollnorm.gif" alt="" width="190" height="34" border="0" /></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/paintings_sculpture/paintings_2000/paintings_2000.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','common_graphics/menu_paintings2000_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings2000_rollnorm.gif" alt="" name="Image22" width="190" height="20" border="0" id="Image22" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/paintings_sculpture/paintings_1990/paintings_1990.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','common_graphics/menu_paintings1990_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings1990_rollnorm.gif" alt="" name="Image21" width="190" height="21" border="0" id="Image21" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/paintings_sculpture/paintings_1980/paintings_1980.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','common_graphics/menu_paintings1980_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings1980_rollnorm.gif" alt="" name="Image20" width="190" height="21" border="0" id="Image20" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="paintings_sculpture/paintings_1970/paintings_1970.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','common_graphics/menu_paintings1970_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings1970_rollnorm.gif" alt="" name="Image23" width="190" height="24" border="0" id="Image23" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><img src="common_graphics/menu_worksonpaper_rollnorm.gif" alt="" width="190" height="28" border="0" /></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_2000/works_on_paper_2000.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','common_graphics/menu_worksonpaper2000_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper2000_rollnorm.gif" alt="" name="Image24" width="190" height="19" border="0" id="Image24" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_1990/works_on_paper_1990.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','common_graphics/menu_worksonpaper1990_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper1990_rollnorm.gif" alt="" name="Image25" width="190" height="22" border="0" id="Image25" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_1980/works_on_paper_1980.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','common_graphics/menu_worksonpaper1980_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper1980_rollnorm.gif" alt="" name="Image26" width="190" height="21" border="0" id="Image26" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_1970/works_on_paper_1970.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','common_graphics/menu_worksonpaper1970_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper1970_rollnorm.gif" alt="" name="Image27" width="190" height="30" border="0" id="Image27" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="scroll_drawings/scroll_drawings.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','common_graphics/menu_scrolldrawings_rollwhite.gif ',1)"><img src="common_graphics/menu_scrolldrawings_rollnorm.gif" alt="" name="Image28" width="190" height="41" border="0" id="Image28" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="statement/statement.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image29','','common_graphics/menu_statement_rollwhite.gif',1)" ><img src="common_graphics/menu_statement_rollnorm.gif" alt="" name="Image29" width="190" height="43" border="0" id="Image29" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="resume/resume1.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image30','','common_graphics/menu_resume_rollwhite.gif',1)"><i mg src="common_graphics/menu_resume_rollnorm.gif" alt="" name="Image30" width="190" height="41" border="0" id="Image30" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="collections/collections.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','common_graphics/menu_collections_rollwhite.gif',1 )"><img src="common_graphics/menu_collections_rollnorm.gif" alt="" name="Image31" width="190" height="42" border="0" id="Image31" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="exhibitions_news/exhibitions_news.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image32','','common_graphics/menu_exhibitionsnews_rollwhite.gi f',1)"><img src="common_graphics/menu_exhibitionsnews_rollnorm.gif" alt="" name="Image32" width="190" height="42" border="0" id="Image32" /></a></td>
      </tr>
      <tr>
        <td height="42" valign="top" bgcolor="#666699" scope="col"><a href="links/links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image33','','common_graphics/menu_links_rollwhite.gif',1)"><im g src="common_graphics/menu_links_rollnorm.gif" alt="" name="Image33" width="190" height="42" border="0" id="Image33" /></a></td>
      </tr>
    </table>      <p> </p></td>
    <td align="left" valign="top"><table border="0" align="left" cellpadding="0" cellspacing="0">
      <tr>
        <td width="30" height="97" scope="col"> </td>
        <td width="330" scope="col"> </td>
        <td width="20" scope="col"> </td>
        <td scope="col"> </td>
      </tr>
      <tr>
        <td scope="col"> </td>
        <td scope="col"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="400" id="FlashID" title="slideshow">
          <param name="movie" value="home/homepage.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="8.0.35.0" />
          
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          
          
          <object type="application/x-shockwave-flash" data="home/homepage.swf" width="400" height="400">
            
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="8.0.35.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            
          </object>
          
        </object></td>
        <td scope="col"> </td>
        <td valign="bottom" scope="col"><img src="home/homepage_quote.gif" alt="Quote" width="282" height="192" border="0" /></td>
      </tr>
    </table></td>
</tr>
</table>
<map name="Map2Map" id="Map2Map">
<area shape="rect" coords="562,26,719,50" href="mailto:[email protected]" target="_blank" alt="email" />
</map>
<map name="Map2" id="Map2">
<area shape="rect" coords="562,26,719,50" href="mailto:[email protected]" target="_blank" alt="email" />
</map>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12139148-3");
pageTracker._trackPageview();
} catch(err) {}
swfobject.registerObject("FlashID");
</script>
</body>
</html>

100% Height Sidebar, with scrollable content.

Hello - I am having difficulting getting the desired effect on a website I am currently developing. The code/site can be viewed here:
http://www.innosparkllc.com/client_websites/woodlands2/index.html
The point of concern relates to the sidebar. As you'll see, via the link, I have an img (tree trunk) as the background. The image is currently part of the HTML, not CSS. The sign/logo, contact form, and tree are all 'fixed' position. For many screen sizes, this works great, no concerns. However, for smaller screen sizes, some of the contact form get's cut off. For example, on my 13" MacBook, I am unable to use the form, because the 'submit' button is not visible.
What I want to do is this:
Tree trunk background always fills 100% of the browser height. I want the content to scroll up and down, along with the tree, when the screen size is such that content would otherwise be cut short.
Hopefully I've explained thoroughly, and that the link provided further clarifies. I've done many google searches, but am having problems coming up with a solution. Any advice is greatly appreciated.

Hello,
Unfortunately tis feature is not there is Adobe Muse till now.
A feature request has already been logged for same : http://forums.adobe.com/ideas/1858#comment-5070
I would suggest you to add your valuable comments to the post.
Regards,
Sachin

Need help with a Table with one image in it.

I am attempting to design a site in Dreamweaver CS 4, I have Master Suite. I would like to use a header Logo already created in photoshop and made web ready in .jpg format.
I am looking at inserting a single cell table across the top of page set at a percentage so it appears uniform on more browsers.
The only problem is that there is no way to make (link) the picture to the tables scalibility feature. The table scales up or down, but
the picture remains the set size of the image.
Do I need to attempt to create this some other way?
I like the essence of the above, I created it in Flash and would like to use it or something close in the design and creation of my web site.
A Veteran, Thank You for any help or suggestions. Ken

Images are static. They don't resize.
Put image in a table cell or CSS division with a compatible Background-Color to fill in the empty regions on super wide displays.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

How tu update a column having type 'Long raw' in oracle table with an image

Hello,
I must change the image loading in a column with 'long raw' type in the table. I find an image data already in the table.
I have my new imgae in a file .bmp.
What SQL instruction I mut use to update this column to load my new image ?
I work in Oracle Database 10g Enterprise Edition Release 10.2.0.1.0 - Prod.
thanks for your helps.
Regards.

Unless I'm missing something MSFT are making it unecessarily complex by not implementing the SQL/XML standard...
SQL> alter table emp add ( emp_xml xmltype)
2 /
Table altered.
SQL> update emp set emp_xml = XMLELEMENT("EMPLOYEE",xmlattributes(EMPNO as "id"), XMLElement("Name",ENAME))
2
SQL> /
14 rows updated.
SQL> set pages 0
SQL> select EMPNO, EMP_XML from EMP
2 /
      7369
<EMPLOYEE id="7369">
<Name>SMITH</Name>
</EMPLOYEE>
      7499
<EMPLOYEE id="7499">
<Name>ALLEN</Name>
</EMPLOYEE>
      7521
<EMPLOYEE id="7521">
<Name>WARD</Name>
</EMPLOYEE>
      7566
<EMPLOYEE id="7566">
<Name>JONES</Name>
</EMPLOYEE>
      7654
<EMPLOYEE id="7654">
<Name>MARTIN</Name>
</EMPLOYEE>
      7698
<EMPLOYEE id="7698">
<Name>BLAKE</Name>
</EMPLOYEE>
      7782
<EMPLOYEE id="7782">
<Name>CLARK</Name>
</EMPLOYEE>
      7788
<EMPLOYEE id="7788">
<Name>SCOTT</Name>
</EMPLOYEE>
      7839
<EMPLOYEE id="7839">
<Name>KING</Name>
</EMPLOYEE>
      7844
<EMPLOYEE id="7844">
<Name>TURNER</Name>
</EMPLOYEE>
      7876
<EMPLOYEE id="7876">
<Name>ADAMS</Name>
</EMPLOYEE>
      7900
<EMPLOYEE id="7900">
<Name>JAMES</Name>
</EMPLOYEE>
      7902
<EMPLOYEE id="7902">
<Name>FORD</Name>
</EMPLOYEE>
      7934
<EMPLOYEE id="7934">
<Name>MILLER</Name>
</EMPLOYEE>
14 rows selected.
SQL>

Spry data set and html table with multiple images

I use "Spry Data Set" in my Dreamweaver CS4 site. I need to make one html file (a product page) and all the product data comes from a separate html table.
So, I have a html table that contains the product data and the images. Each row is one product.
Column 1 contains a product name
Column 2 contains product information
Column 3 contains products thumbnail image 1
Column 4 contains products thumbnail image 2
Column 5 contains products large image 1
Column 6 contains products large image 2
This a simple example of the idea. In reality, there is lot more content.
So the actual question is that:
How can I show in the product page all the thumbnail images, but only one large picture at a time?
And when the thumbnail is clicked the large picture changes accordingly.

It depend entirely on what you want.
One way would be to show a shadow box as per http://www.adobe.com/cfusion/exchange/index.cfm?searchfield=shadowbox&search_exchange=&num =25&startnum=1&event=search&sort=0&interim_dummy_tmpfield=&Submit= or http://www.adobe.com/cfusion/exchange/index.cfm?searchfield=lightbox&search_exchange=&sear ch_license=&search_rating=&search_pubdate=&Submit=Search&num=10&startnum=1&event=search&so rt=0&dummy_tmpfield=
Another way is to have a master/detail area where the large image appears after clicking in the master area like this http://labs.adobe.com/technologies/spry/demos/products/index.html
You could also use tooltips as in http://labs.adobe.com/technologies/spry/samples/data_region/TooltipwithData.html.
There are many more ways, but you need to make the desicion based on the layout of your page.
Gramps

Problem with refresh image on portlet

I have a PAGE WITH A PORTLET THAT IS A REPORT OF A TABLE with a image.
IF J CHANGE A RECORD WHEN I OPEN THE PAGE IS DISPLAYED THE OLD INFORMATION
UNTIL I PRESS THE "F5" KEY ON THE BROWSER (THE REFRESH KEY OF THE BROWSER).
I HAVE TRY TO PUT (DON'T CACHE FOR THE PAGE) BUT THE THING REMAIN STILL !
DO YOU KnOw SOMETHING ?

ok, I'll try to explain better.
1) I have a table with a BLOB field to store images.
2) When I save the image in the database it saves ok.
3) Shows the image perfectly in a field "Display Image"
4) When I delete the image and record another, the database is ok, but it seems that the image remains in the cache, I even writing a new image.
5) Demonstrate the new image only when I logoff and login again.
Regards,
Márcio.

Create an image with 100% height?

Hi,
I am working on a project and require an image to stretch to
the full height of the table cell.
The width will be fixed at 40 pixels, but I require the
height to always be 100% of the cell.
I have tried simply adding the height tag as 100%, but this
proves inconsistent in various browsers.Is there a way in which I
can achieve this, so it will work consistently on all browsers and
platforms?
Many thanks

Make it a background image and let it tile to fill the space.
Or just use
an HTML color background.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"TangentGraphic" <[email protected]> wrote
in message
news:euftp1$d1s$[email protected]..
> Sorry in delayed response - Adobe server down...
>
> The image is a flat coloured gif - image distorsion is
not an issue. Are
> you aware of my best way to achieve its 100% height?
>
> Thanks

RC Table with height=100% disappears

Hi JDev gang
Under JDev 11g TP2, I've an issue with the RC table control.
I've dragged and dropped a VO data control onto my page and created an <af:table>. I've then placed the <af:table> inside an <af:panelCollection> with defaults values. If I change the panelCollection's height to 100%, at runtime the table does not render inside the browser. However if I set it to a pixel height it works fine.
My code as follows:
<af:panelCollection inlineStyle="height:100%;">
<af:table ..... all the usual table attribute suspects>
</af:table>
</af:panelCollection>As a side note, setting the panelCollection's width = 100% works fine.
Any idea what's going on?
Regards,
CM.

Hi Chris,
This is a common frustration I have seen with web browsers. Percentage based heights are not reliable.
I see there is a release note that specifically addresses this at:
http://www.oracle.com/technology/products/jdev/htdocs/11tp/readme.html#faces2
Scroll down to the "Page Layout Tips" section for a good explanation of how to avoid using percentage-based heights.
Regards,
Matt

How do I repeat image 100% height in a box within the template

I have built a new template that already has a background image behind the content area. This background image is 100% width and height. Now I have made the header area, the content area and the footer area. What I am needing some help with is: I want to have a box behind the content area that continues into the footer. In that box I want a repeated background pattern that continues regardless of the amount of content in the content area. I know how to do this using tables and code, but I can't seem to figure it out in MUSE. I have added the box, added the repeated verticle image, but it won't expand downward 100% height. It just stops at the height of the box that was built in MUSE and then the repeated background stops too... Can someone explain to me how to do this properly? It's all I have left and then this site template is complete.
Tom

Can you elaborate please. I have built a template (or master page) with this box in it and it starts just below the line of the header and extends to the bottom of the page. It has a repeated verticle image inside it. What happens though is that I build a page and assign the master to it, add a content box into the page for text and images. If the content extends downward past the original size of the master page box height, the box will not extend itself with the height needed for the content. IE: if the box is 600px high in the master and then the content is 1000 px high, the box will not expand to the 1000 px height and instead stop at the 600 px height.
Is there a tutorial with this in it somewhere? I have build numerous MUSE sites both small and large and have yet to do this repeatable background pattern behind just the content area separate from the background image itself.
Thanks for your help.
Tom

How to make an Image in Adobe Muse 100% height ?

100% width, it's ok; but I don't find how to make a 100% height image (wich follows my browser height)?
I work with adobe Muse CC 2014
thanks !

You can use the image as browser fill and then set the position of image such that it remains to its position. This can be used as a workaround for using image as browser height.
Thanks,
Sanjit

Inline styling: 100% height for image

Hi, thanks for stopping by to read. Appreciate.
Am making an html email and need to make side images 100% height. Doesn't seem to be working.
Is there some trick to it. (stretching a tiny image for the side shadows)
Am using, in the properties palette, the 'new inline style' function.
http://motherdivine.org/email/thailand3/index.html
Plus, there is some tiny white space at the very top of the first large temple photo. Any way to get rid of that? Made the td tr 'top'.
Thanks so much,
Warmly,
Hope

Safari seems to repeat, but nothing else is. I'm thinking the valign="top" is not necessary there. And align="right" can go too. The other option is to use that as a background image for the td and use background-repeat, but that won't work in Outlook. Personally speaking if this is time sensitive I would almost move to a light grey border and forget the shadow.
I know it's approved for you but I can tell you there are a good number of display issues with that. On a phone, the word Thailand won't be visible when the email opens only the image will be seen because it's too tall, if the user doesn't have images downloading immediately they will just see whitespace because there are no alt tags on the images, the map image is really small and it's hard to determine what it's pointing to, the 7 unnecessary p tags at the end of the email and, the target appears to be US but the English used is UK for words such as "programme", using +1 in phone numbers, and writing the day before the month is not showing an understanding of the recipient base.

Cannot get an Apex HTML region with table with a background image to resize image to fit table

I want to achieve this: Table whith background image but cannot get it to work in an Apex page with HTML region.
Adding the following code to the html region:
<table class="tableWithBackground" width="300px" height="200px" border="1">
    <tr>
        <td>
            <img class="tableBackground" src="#APP_IMAGES#Demo.jpg">
            Hello
        </td>
        <td>
            World
        </td>
    </tr>
    <tr>
        <td>How are<br><br><br><br><br>you?</td>
        <td>I am fine</td>
    </tr>
</td>
Results in a page with a table but without borders (at his stage I have not yet uploaded the Demo.jpg). After uploading the Demo.jpg results in a table with the entire image placed in het first cell. After placing the class code in the CSS inline property I expected to see the result as is shown in the Table whith background image demo. For some reason this does not work (the image is no longer visible).
Can anybody tell me how to achieve my goal?
Thanks in advance!
Geert

Geert01 wrote:
I want to achieve this: Table whith background image but cannot get it to work in an Apex page with HTML region.
Adding the following code to the html region:
<table class="tableWithBackground" width="300px" height="200px" border="1">
    <tr>
        <td>
            <img class="tableBackground" src="#APP_IMAGES#Demo.jpg">
            Hello
        </td>
        <td>
            World
        </td>
    </tr>
    <tr>
        <td>How are<br><br><br><br><br>you?</td>
        <td>I am fine</td>
    </tr>
</td>
Results in a page with a table but without borders (at his stage I have not yet uploaded the Demo.jpg). After uploading the Demo.jpg results in a table with the entire image placed in het first cell. After placing the class code in the CSS inline property I expected to see the result as is shown in the Table whith background image demo. For some reason this does not work (the image is no longer visible).
Can anybody tell me how to achieve my goal?
This is a workaround. What's your real goal? Why do you want to do this?
What browser(s)/version(s) are you using? All current browser versions have support for CSS3 background sizing which is the proper way to do this.

How do I create Equal Height Columns with my Background Images?

Hi there,
here is my page http://www.allthingsprintuk.co.uk/ATPHome.html
My problem is that the side bar HTML list is coming off the page in IE. & also the html in the header can look awful due to browser settings.
My question is how do I create Equal Height Columns with my Background Images so that they fit with the HTML text? Is there a good link you can point me to, or a tutorial?
The only way I can see by doing it is slicing my images up into 3 (top middle & bottom) & then setting the middle to repeat y????
Or does anyone know of a way to create rounded corners WITH drop shadows in CSS that will work on all browsers?
Thanks in advance
Louisa

Try these http://www.pixelan.com/

Repeat header's column in a table with row height that greater then 200px

== Issue
==
I have another kind of problem with Firefox
== Description
==
I develop a website and encounter some problem about web page printing. I try to repeat header's column in a table with row's height that greater than or equal to 198px, but it doesn't work. Another size that lower than 198px works fine. If somebody has seen this issue before and know a solution, please help me. Thanks in advance.
== This happened
==
Every time Firefox opened
== Firefox version
==
3.6.6
== Operating system
==
Windows XP
== User Agent
==
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
== Plugins installed
==
*-6.0.12.1739
*RealPlayer(tm) LiveConnect-Enabled Plug-In
*PDF-XChange Viewer Netscape Gecko Plugin
*Default Plug-in
*Shockwave Flash 8.0 r22
*Adobe Shockwave for Director Netscape plug-in, version 11.0
*3.0.40624.0
*Office Live Update v1.3
*Windows Presentation Foundation (WPF) plug-in for Mozilla browsers
*Next Generation Java Plug-in 1.6.0_18 for Mozilla browsers
*Npdsplay dll
*DRM Store Netscape Plugin
*DRM Netscape Network Object

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox.
[http://forums.mozillazine.org/viewforum.php?f=25]
You'll need to register and login to be able to post in that forum.

100% height table with bg image

Similar Messages

Maybe you are looking for