HTML - Adapt Background Image To Amount Of Text And Page Size?

Hi All,

This is probably a basic question to ask but for some reason i cant seem to figure it out,
Basically what you can see below is a table width="850" and then another table inside that table with a width="425" as you can see i have set 4 back ground images which look perfect my problem is im trying to put wording over them images....i can get wording on the images but they wont go in the relevant position, i.e align="top" they align at the bottom! iv tried everything i can possibly think off....
HTML Code:

<table border="0" cellpadding="0" cellspacing="0" width="850">
        <tr>
            <td>
                <table width="425" border="0" cellpadding="0" cellspacing="0" align="left">
                     <tr>
                        <td height="163" style="background-image: url(/images/box1.png); background-position: left;
                            background-repeat: no-repeat">
                            <a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
                        </td>
                        <td height="163" style="background-image: url(/images/box3.png); background-position: left;
                            background-repeat: no-repeat">
                            <a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
                        </td>
                    </tr>
                    <tr>
                        <td height="163" style="background-image: url(/images/box2.png); background-position: left;
                            background-repeat: no-repeat">
                            <a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
                        </td>
                        <td height="163" style="background-image: url(/images/box4.png); background-position: left;
                            background-repeat: no-repeat">
                            <a href="/html/ExistingCustomers.aspx">APPLY HERE</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr style="height: 15px">
        </tr>
    </table>

If some one can tell me how to do it this i would highly appreciate it, iv tried adding this
HTML Code:

<tr>
                        <td height="163" style="background-image: url(/images/box1.png); background-position: left;
                            background-repeat: no-repeat" class="WhiteSmall" valign="top"><b>Apply Now></b>
                            
                        </td>
                        </tr>

So it aligns it at the top but still i need it in the top middle.....
if there a way of saying Valign="top middle" ???
as im aware you can use background-position: left top maybe you can do the same for valign?

Hope some one can help me thanks for reading and look forward to hearing from you

Okay I am very new to website design, I currently am in the progress of a php site and it is definitely looking better fast the more I learn. My question is simply that I created a css style that just uses a background image hosted on my website. thats all...and I attached the CSS style to bodies of text in my web page, the problem being, that they are long lines across the whole screen of JUST that line. What I am asking for help with is creating a large BOX of my image (of any height/width) and throw text in it. Take a look at my site for the moment so you know exactly what I mean.

Konnection Films

Again, I want to take those short brown lines and make them the length of the text, and mesh them together vertically so line breaks don't break the image. If you don't know what I mean just let me know! Thanks so much in advance!

P.S. For some reason my "Ctrl" key is not working in Dreamweaver but everywhere else, is this some stupid setting or my computer just bugged?

http://tbsnyder.com/site/

I have a simple nav background image setup and I tried lining the text up which works perfectly on my Mac browsers (safari and firefox), but when I opened the site up on my Windows machine, I got this:

http://tbsnyder.com/site/difference.png

Two differences: the text has more weight on the Mac browsers and it doesn't line up correctly in the PC browsers. Anyone understand why this is? I'm just using a standard font family (arial, helvetica, sans-serif) - why would they appear different between Macs/PCs?

Am I setting this up incorrectly in css?

CSS:

Code:

.homeBtn {
	padding: 0px 12px 0px 0px;
}

.theSystemBtn {
	padding: 0px 12px 0px 0px;
}

.workoutsBtn {
	padding: 0px 11px 0px 0px;
}

The html is just an unordered list as you can see from the source.

I like the look of the heavier weighted text if I can keep it like that. I would really appreciate any kind of knowledge or assistance in the issue of correctly matching text to background images in a nav bar.

Hi,

I want to fade/dissolved text that is on top of an image. The problem with many dhtml and javascript is that they simply change the color of the text to make it look like the text has disappeared. This works if we are using a single background colour. However, with images, this will not work.

Is there a way I can make the text disappear from an image using dhtml/javascript?

here is the (ineffective) code currently:

<img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" />
<h1 style="text-align: center;">random text</h1>

the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is.

i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image.

i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon!

thanx in advance for advise/comments/feedback/help.

Hi there,

I'm looking for help aligning a tiling background gradient to the bottom of a page. I can't seem to figure out how to do it. You can see my code at michaelskinnider.com/tethco, and the effect I want in the PDF attachment.

Thanks for your help!

Hi All

This is my first post so i hope I provide all the info you need, to be able to help.

I am working inside Macromedia UltraDev as this is waht I was taught with over a decade ago.

Problem started when I set a fixed background image to the page . . . dropdown menu still displays, but everything else (text & pics) in table seem to be hiddden behind the background image.

here is the code
HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">


<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>

<link rel="stylesheet" type="text/css" href="dropdown/dropdown.css" />
<script src="dropdown/btp.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-au">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Barcaldine Tourist Park</title>


</head>



<body>

<div align="center">  <center>
    <table width="1000" border="0" cellpadding="0" height="100%">
      <tr> 
        <td height="54" colspan="2"> 
          <div align="center">
            <h1><font face="Georgia, Times New Roman, Times, serif" size="+7">Barcaldine 
              Tourist Park</font></h1>
          </div>
        </td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td height="146" colspan="2"> <span class="preload1"></span> <span class="preload2"></span> 
          <ul id="nav">
            <li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
            <li class="top"><a href="#nogo2" class="top_link"><span>Park Features</span></a></li>
            <li class="top"><a href="#nogo22" class="top_link"><span>Accommodation</span></a></li>
            <li class="top"><a href="#nogo27" class="top_link"><span>Our Tarrifs</span></a></li>
            <li class="top"><a href="#nogo57" class="top_link"><span>Special Offers 
              </span></a></li>
            <li class="top"><a href="#nogo57" class="top_link"><span>Local Photos</span></a></li>
            <li class="top"><a href="#nogo57" class="top_link"><span>Contact Us</span></a></li>
            <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Local 
              Attractions</span></a> 
              <ul class="sub">
                <li><a href="#nogo54">Australian Workers Heritage Centre</a></li>
                <li><a href="#nogo55">Tree of Knowledge</a></li>
                <li><a href="#nogo56">Artesian Country Tours</a></li>
              </ul>
            </li>
          </ul>
        </td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td rowspan="2" width="99">&nbsp;</td>
      </tr>
      <tr> 
        <td rowspan="5" width="895" bgcolor="#FFFFFF"> 
          <div align="center"></div>
        </td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td width="99">&nbsp;</td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td width="99">&nbsp;</td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td width="99">&nbsp;</td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td width="99" height="23">&nbsp;</td>
      </tr>
    </table>
  </center></div>
  
<div id="page-background"><img src="images/bg.jpg" width="100%" height="100%" alt="Smile"></div>
	<div id="content">
	</div>

</body>



</html>

Hi guys
I've spent the best part of two hours attempting this and have been failing. Miserably.

What I'm trying to do is NOT to create a body background, but create an image, which will sit at the bottom of my browser window, regardless of it's size, and then go BEHIND other elements such as tables / images if my browser window size causes overlap.

All help appreciated, thanks in advance.
Antonz

All:

Working to update a previously designed website.

Original design uses an <img> tag to create a top banner and another <img> tag
to create a side banner.

In each case there are mapped coordinates on each banner as links for the subsequent pages.

Basic page design is as follows:

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td>
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <div>
         ***PAGE CONTENT***
      </div>
   <tr>
<table>

The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages
to be much longer or shorter than others.

This causes some inconsistencey in the relationship between the side banners height and the
page content.

In other words in some cases the banner is exceptionally longer than the page content and the
reader must scroll past significant "dead-space" before being brought to the lowest
mapped links in the side banner; or...

...in some cases the side banner is significantly shorter than the page content causing the
banner image to appear "poorly-fit" to the page design.

I considered altering the 2nd table instance in the above design so that the banner is carried
in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the
image to size relative to the <td> tag carring the content....

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td size="100%">
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <td size="100%" >
         <table>
            ***PAGE CONTENT***
         </table>
      </td>
   <tr>
<table>

The problem I've found with this is that as the content size causes the image to "flex", either
readablilty or image quality or both are effected, AND the mappings become inconsistent as the
image coordinates constantly change.

I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there
are better ideas I'm overlooking.

One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a
"defalut" page size that would never be smaller than a standard for the side banner.
Problem: larger page sizes are still a problem as are the changing map coordinates

My other idea was to return to the original page design listed first above and again settle on
a standard side banner "height"... ...any page that was significantly longer than that height
would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to
the additional content.
Problem: ...possible complications splitting content...
Benefit: ...consistent page design that allows a consistent side banner with navigable links...


Question for the group:
Does this sound reasonable?
Are there better alternatives I am overlooking?

THANKS IN ADVANCE FOR ALL INPUT!!

Hi guys,

I'm currently trying to sort out the background for a website. What I'd like is to have a silhouette of a few people on a gradient background. I'd like to keep the quality high, but it also makes the file size large.

If there were no silhouette then I would have a one pixel strip of the gradient set to repeat. Is it possible to add two background pictures, or is there another way I can reduce the file size that I hadn't thought of?

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?

Hi everybody!

I always try to avoid the use of IFRAMEs, but in this case I had to insert the weather forecast coming from another site.

This "source" website has an api which allows one to choose the background of the IFRAME, so no problems with the actual background indeed... but on IE 7 I see an ugly white spot if I set the "height" of the IFRAME to something bigger than the actual height of the content. (see attachment)

This does represent a problem, since the actual content is variable in size, and thus I wanted to allow for some padding.

I googled for the solution, but the only thing I can find is "how to set the background to transparent" which is not what I need. I tryed it anyway, as seen in following code:
HTML Code:

<iframe scrolling="no" frameborder=0 
style="width:200px;height:490px;background-color:#000000;color:#000000;"
allowtransparency="true" 
src="http://www.ilmeteo.it/box/previsioni.php?citta=5155&type=mps1&width=200&ico=1&lang=ita&days=3&font=Arial&fontsize=12&bg=000000&fg=FFFFFF&bgtitle=FF0000&fgtitle=FFFFFF&bgtab=E8F000&fglink=1773C2">
</iframe>

The real problem is that I have no control on that white area, not even by setting bgcolor=black or style="background: black;"...

Any ideas would be greatly appreciated!

When you create a select form with a default size or a size of 1, the options (once you expand the form out by clicking it) that are moused over will be highlighted. I want that same effect on a select form with a size of 30. I imagine the solution lies in some javascript onmouseover function, but I couldn't find anything. Help?

Ok I'd really like to design a darker them with a lot of textures like this one:

http://www.grafpedia.com/tutorials/c...o-pixel-layout

But thats just a photoshop walk-thru.

So how would you go about making a background like the one shown with a couple of different textures without making just 1 large huge image?

I'm worried about download times as I have my background image as a 1px image set on repeat.

But if I choose to have a site design like shown in that link, I cant use the 1px image size option any more, or can I?

Basically I'm lost as to how to get my site to look like the design in the link.

Here it is now:

http://acidtripmediaproductions.com/lmi/index.html

I'd like to extend the main center div to go from the top to the bottom and "Frames" all the content within it

Whats the easiest way to do that?

Would I want to keep the side bar nav where its at if I do this?