|
HTML - Jpg Image Background Sizing Issue
Hello. I have an HTML website image background that I am trying to stretch across any screen resolution, while keeping the image "fixed" in one position, so the image does not shrink when the screen window is modified.
I got everything to work correctly, however I cannot get the image to stay at a "fixed size" when I shrink the window. Can somebody please help me? I am a beginner programmer, but I have tried numerous processes before resorting to this forum. Here is my code...in case you want to preview it in a web browser. Thanks in advance for any help you can offer me to get the image to stay "fixed" and also to keep it stretched across the entire screen. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- leave DTD out of DOCTYPE to put IE6 in quirks mode -->
<html>
<head>
<title>GIS Disclaimer</title>
<style type="text/css">
body {
/* for IE; otherwise, BG isn't fully stretched */
margin: 0px;
}
#background {
position: absolute;
margin: 0px;
border: 0px;
padding: 0px;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
background-repeat: no-repeat;
background-attachment: fixed
}
#background img {
padding: 0em;
width: 100%; height: 100%;
}
#body {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height:100%;
padding: 0px;
z-index: 0;
}
li {
margin-bottom: 2em;
}
</style>
<!--[if IE]>
<style type="text/css">
body {
margin: 0px;
overflow: hidden;
}
</style>
<![endif]-->
</head>
<!-- img must be encased in div to keep proper image aspect ratio -->
<div id="background"><img src="file:///C:/Website/Images/Disclaimer_bckgd_5.jpg"></div>
<div id="body">
<style fprolloverstyle>A:hover {color: red; font-weight: bold}
</style>
<div align="left">
<table cellspacing="0" cellpadding="0" align="center"><tr>
<td width="100%" nowrap>
<b><p style="word-spacing: 0in; line-height: 0px; margin-left: 0px; margin-right: 0px; margin-top: 175px; margin-bottom: 0px"; <span style="font-size:21.0pt; color:maroon"
>Town of Leprechauns, Confusion<p style="word-spacing: 0in; line-height: 0px; margin-left: 0px; margin-right: 0in; margin-top: 40px; margin-bottom: 20px"; align="center"><b><span style="font-size:21.0pt;color:maroon">Online Disclaimer Form</span></b></p>
</tr></table>
<div align="left">
<table cellspacing="0" cellpadding="0" align="center"><tr>
<td width="100%" nowrap>
<p style="line-height: 0px; word-spacing: 0in; margin-left: 0px; margin-right: 0px; margin-top: 10px; margin-bottom: 0px"; align="left"><b><span style="font-size:12.0pt;
color:black">This site provides access to the Online stuff. The information contained on this site is</p><p> updated periodically, however this town geographic database
may NOT reflect the most current</p><p> information available. THE TOWN OF LEPRECHAUNS MAKES NO CLAIMS OR WARRANTIES,</p><p> EXPRESSED OR IMPLIED, CONCERNING THE COMPLETENESS, RELIABILITY, OR SUITABILITY
</p><p> OF THESE DATA. THE TOWN OF LEPRECHAUNS DOES NOT ASSUME ANY LIABILITY ASSOCIATED</p><p> WITH THE USE OR MISUSE OF THIS INFORMATION. All information is for planning purposes only.
</p><p> It may not be adequate for legal boundary definition, regulatory interpretation, or property conveyance</p><p> purposes. If you believe that any data provided within this site is inaccurate, or if you have any questions
</p><p> regarding these data, please contact:</span></b></p>
</tr></table>
<table cellspacing="0" cellpadding="0" align="center"><tr>
<td width="100%" nowrap>
<p style="word-spacing: 0in; line-height: 100%; margin-left: 80px; margin-right: 0; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:12.0pt;
color:maroon">Butch, GISP</span></b></p>
<p style="word-spacing: 0in; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:10.0pt;color:maroon">Town
of </span></b><b><span style="font-size:10.0pt;color:maroon">Leprechauns</span></b><b><span style="font-size:10.0pt;color:maroon">
</span></b><b><span style="font-size:10.0pt;color:maroon">GIS</span></b><b><span style="font-size:10.0pt;color:maroon">
Coordinator</span></b></p>
<p style="word-spacing: 0in; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:10.0pt;color:maroon">41
Pot O Gold Road</span></b><b><span style="font-size:10.0pt;color:maroon">,
</span></b><b><span style="font-size:10.0pt;color:maroon">Leprechauns</span></b><b><span style="font-size:10.0pt;color:maroon">,
</span></b><b><span style="font-size:10.0pt;color:maroon">Confusion</span></b><b><span style="font-size:10.0pt;color:maroon">
</span></b><b><span style="font-size:10.0pt;color:maroon">90210</span></b></p>
<p style="word-spacing: 0px; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0" align="left"><b><span style="font-size:10.0pt;color:maroon">Tel:
</span></b><b><span style="font-size:10.0pt;color:maroon">555-555-5555</span></b><b><span style="font-size:10.0pt;color:maroon">
Fax: </span></b><b><span style="font-size:10.0pt;
color:maroon; nowrap">555-555-5555</span></b><b> </b></p>
<p style="word-spacing: 0px; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:10.0pt;font-family:"Times New Roman";mso-fareast-font-family:
"Times New Roman";color:maroon;mso-ansi-language:EN-US;mso-fareast-language:
EN-US;mso-bidi-language:AR-SA">Email:</span><span style="font-size:12.0pt;
font-family:"Times New Roman";mso-fareast-font-family:"Times New Roman";
mso-ansi-language:EN-US;mso-fareast-language:EN-US;mso-bidi-language:AR-SA"> </span><span style="font-size:10.0pt;font-family:"Times New Roman";mso-fareast-font-family:
"Times New Roman";color:blue;mso-ansi-language:EN-US;mso-fareast-language:EN-US;
mso-bidi-language:AR-SA"><a href="mailto:bdawg9674@hotmail.com"><i><span style="color:navy">bdawg9674@hotmail.com</span></i></a></span></b></p>
<p style="text-indent: 0; line-height: 250%; margin-left: 50px; margin-right: 0; margin-top: 0px; margin-bottom: 0"; align="left"><b>Do
you agree to the conditions listed above?</b></p>
<p style="text-indent: 0; line-height: 250%; margin-left: 50px; margin-right: 0; margin-top: 0px; margin-bottom: 0"; align="left"><font face=Arial size=-1 color=#000000><a href="http://xxxxx.xxxxxx.xxx.xxx/website/xxxxx/parcels/login.htm"><input type="submit" value=" I Agree " onclick= "parent.location='http://xxxx.xxxxx.xxx.xxx/website/xxxxx/Parcels/login.htm'" style="font-family: Georgia; color: #000080; font-weight: bold"></a></font><font face="Arial">
<a href="file:///C://Website/xxxx.html">
<input type="submit" value="I Do Not Agree" onclick= "parent.location='file:///C://Website/Survey.html'" style="font-family: Georgia; color: #000080; font-weight: bold"></a></font></p>
</tr>
</table>
</div>
</body>
</html>
Similar TutorialsHi, I'm using an image for my web background, but I have a little problem. I have to go and size the image correctly in the image editing program for it to look right, but then if you resize the webpage it doesn't look right. Is there a way to make the image automatically resize itself depending on the size of the person's screen? i was going to try to get my background to stretch but im running into too many issues with it, im wondering if any1 can help me get a background image start at top:150 left:280 here is what i tried so far with no luck:: <body background= image.gif position:absolute; top:150; left;150> doesnt work... so i tried setting up a div to call this into play... <style type="text/css"> #bg {position:relative; top:150; left:150;} </style> <div id="bg"> <body background ="background.gif"> </div> i also tried calling it with out a div threw the body and if i remember the image showed correctly but this time my page started over 150 x 150 px maby the image was just set as background tiled and wasnt even in the right spot i really dont know if any1 can please help me with this issue i would greatly appreciate the help thank you Hi People, Another issue I am having with background images using div tags carrying on a little from http://www.htmlforums.com/html-xhtml...es-123021.html Although I can insert the background image now it does not appear to be taking much notice of the background image position or repeat elements. I could make life allot easier for myself and use a different method but wanted to learn this method. Any ideas why it would not take notice of my background positioning or repeat request? HTML Code: Header information and then........ </head> <body> <div id="content"> <div id="image1"><img src="images/image1.jpg" alt="image description"></div> <div id="image2"><img src="images/image2.jpg" alt="image description"></div> </div><!-- end #content --> </body> </html> CSS PHP Code: } body { width:100%;height:100%;margin:0;padding:0;background-color:#cccccc; } #content { width:100%;height:100%;margin:0;padding:0;background-color:#cccccc; } #image1 { background-image:url('images/image1.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position: right bottom; } #image2 { background-image:url('images/image2.jpg'); background-repeat:repeat-y; background-attachment:fixed; background-position: center; padding-left: 6px; } Adding the padding above does make the image move along with margins which i added for testing only but I obviously have something else not quite right here. I added sizes to the body and content as I was experimenting. Do I really need them, if so what is the recommended code to put in? Thanks all I've got an applet with some features, one of which a background image. It's actual size is 10.60 inches wide by 5.30 inches of height. Using WIDTH="744" and HEIGHT="600" (as shown on the code below) does not display the entire image. Can someone tell me the right setting of values to fix it? Is there a code to authomatically capture whatever the size of the .jpg and make it fit? Thanks in advance. Here's the html: <p align="center" <APPLET code=string WIDTH="744" HEIGHT="600"> <param name="para_back" value="background.jpg"> </APPLET> </p> this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon 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? i want to know if i can make the background of this applet transparent to see the body background instead of a color <body background ="image.jpg" >(this is what i want to see and just the text of the applet if it is possible ) <p ALIGN="LEFT"> <applet CODE="starmenu.class" WIDTH="240" HEIGHT="1000"> <param name="demicron" value="www.demicron.se"> <param name="reg" value="A00037"> <param name="displace" value="1"> <param name="background" value="000000"> <param name="foreground" value="0000ff"> <param name="shadow" value="ff0000"> <param name="target" value="newbrow"> <param name="horizontal" value="Yes"> <param name="font" value="arial"> <param name="fontsize" value="20"> <param name="italic" value="Yes"> <param name="bold" value="Yes"> <param name="item0" value="blablabla"> <param name="url0" value="http://ep.html"> <param name="item1" value="blablabla"> <param name="url1" value="blablabla.html"> <param name="item2" value="blablabla"> <param name="url2" value="http://blablablal"> <param name="item3" value="Email"> <param name="url3" value="mailto:.com"> </applet> </p> ps: i took this from javafile.....not mine Thanks guys! I know IE7 sucks but i need my website to be viewable in it. First look at my site in Firefox, then IE7 if you have it. The menu shows up properly in firefox, but not in IF7. Any ideas how to make IE7 show the menu properly? Thanks link: http://www.dynamitedave.com/redesign/index_1.html Hello World! (Where did that tradition start anyways?) Yes, I am fairly new at web design, and am using the method of "search-Google-whenever-you-have-a-problem-as-you-go" to learn HTML. I am pretty happy with the results I am getting in Dreamweaver, but there is one nagging thing that is throwing a kink into my designs. I have the majority of the content that is unique to each page within a table cell (<td>). Since I wanted to have the background color of the cell match exactly to an image that tops off the page body, I decided to have the background be one pixel of that color that repeats across the whole table cell. Originally, I just defined the background in the starting tag using "style=" then specifying the background. (Dreamweaver made sure I had it right using its Code Hinting). The background shows up perfectly when in the Dreamweaver editing view, but when looking at the page in any other view (Live view, preview in browser, etc.), the background of that cell is just white. I tried defining the background with a CSS ID, which has worked on other parts of the page, but no beans. What am I doing wrong? Is the fact it is only one pixel that has to repeat an issue? Here is the code: <td width="100%" height="103" colspan="8" align="center" id="page_background_beige" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium;"> <!-- TemplateBeginEditable name="Body" --> //In here goes all of the content of the page <!-- TemplateEndEditable --></td> The CSS: #page_background_beige { background-image: url(Background_Pixel.png); background-repeat: repeat; } Thanks, Wookieguy (Heh, I know tables are a fairly sloppy way to do things, but this is a fairly simple site anyways.) Greetings, This is my first post... I'm a novice web developer and pro drummer running www.ProMusicTeachers.com. The site is php/mysql, we have a search function smack in the middle of the index page that is set up as a <table>. The table should have a background image... this is the code I'm using is <table border="0" bgcolor="#FF9900" background="/images/searchgraphic.jpg" align="center" cellspacing="3" cellpadding="0" width="617"> to create the table, then comes the form. However, the background image shows up only in Safari, but not IE or Firefox. This seems like a very simple tag... and I swear last night it showed up in Firefox too but this morning will not. Any suggestions? Much thanks, Brian Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? How can I make my forms smaller. I already know how to control length, but how can I make the height lower. Ok I was just informed that on our companies site that there is a new window that pops up when a link is clicked. This is supposed to happen but the one thing I am trying to figure out is that the new window is rather small and the customer has to always enlarge it. They are using IE. I have tested it with IE7 with the same results as reported but it has also been tested with FF and SeaMonkey and the new window is large. Is this an IE thing, perhaps a setting or do I actually have to add something to my CSS/HTML to account for this? Thank you for the help. Im having problems getting my table to the right size. I want it to be 100% of the page but it only becomes 100% of whats inside the table. Any ideas what to do to solve this? Thanks Jake At the mo, the code is Code: <table summary="News" width="100%"> Hi, I have been having issues with a scroll bar on my page, and have tried a few different html codes, and have messed with sizing but am not getting the result I want. Here is the page I am referring to: http://userwww.sfsu.edu/~davidson/ar...tractbody.html I would like for there to be only the horizontal bar, like I have. But I would like the box to be smaller (i've tried making the grid's width smaller, but then the scrollbar doesn't have the pictures side-by-side, but pushes one to the bottom and it creates a vertical scroll bar). I would like it to be so that one picture or one and a half pictures, it doesn't matter, is shown. i want less to be automatically visible. i want it so you just scroll to view the rest, all side by side. Hopefully that makes sense? Thank you!!! Is there an HTML script that will automatically proportionately size a graphic? Say you set the Height=100 then the Width=?? would be automatically adjusted depending on the actual size of the parent graphic. How do I make this simple HTML/CSS page look the way I want? If you render this code in a browser, you will see what I'm trying to do. Thanks! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Vertical Sizing Test Page</title> </head> <body style="margin: 0; background-color: #FFF; font-family: Verdana; font-size: 10pt;"> <div style="background-color: #FED; padding: 10px; height: 25px;"> Top Banner. I want this to be sized in pixels to accommodate raster backgrounds. </div> <div style="background-color: #DEF; padding: 10px; margin: 10px; border: 1px dotted black;"> <h2>Main Content Area</h2> I want this to vertically fill the remainder of the page.<br/> <br/> There should not be any unused space below the bottom banner.<br/> <br/> If there is a lot of dynamic content in this section, the user will need to scroll. However, if there isn't a lot of content, the user shouldn't have to scroll.<br/> <br/> This should also be vertically centered. </div> <div style="background-color: #FED; padding: 10px; height: 25px;"> Bottom Banner. I want this to be sized in pixels to accommodate raster backgrounds. </div> </body> </html> Hi, I have made a site recently, its fairly dodgy looking but thats what they wanted, it all worked out well except for one of the pages the 'footer' section of the main table wont resize properly, all the pages are coded exactly the same for the section, but just one page wont work the site is www.thesavergroup.com and the page that wont behave is the eftpos page. Any help would be appreciated i'm going nuts over this. Thanks Chris How can I make the browser window that my site is in automatically have specific height/width dimensions? Making toolbar and scrollbar go away would also be nice. I am using the following code that creates the desired effect in Firefox 2 but not in IE 7. By increasing the height of the image in the "rowspan=2" cell at the bottom-right, I would like only the bottom-left and bottom-center cells to expand vertically. However, this only happens in FF and not IE. In IE the middle-left and middle-center cells also expand. Any ideas how to make this work, and control which cells expand? Code: <table width="200" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF00FF">
<tr>
<td><img src="student01.jpg" width="100" height="100" /></td>
<td bgcolor="#9900FF"><img src="student01.jpg" alt="" width="100" height="100" /></td>
<td bgcolor="#CC0000"><img src="student01.jpg" alt="" width="100" height="100" /></td>
</tr>
<tr>
<td><img src="student01.jpg" alt="" width="100" height="100" /></td>
<td bgcolor="#CC0000"><img src="student01.jpg" alt="" width="100" height="100" /></td>
<td rowspan="2" bgcolor="#CCFF33"><img src="student01.jpg" alt="" width="100" height="300" /></td>
</tr>
<tr>
<td bgcolor="#00FF00"><img src="student01.jpg" alt="" width="100" height="100" /></td>
<td bgcolor="#FF3300"><img src="student01.jpg" alt="" width="100" height="100" /></td>
</tr>
</table>
|
|||||||