|
HTML - Stretching My Background Image
I am trying to put a background image but, it seems to be tiled instead of stretched. I want it to be all one image in the background, not a repeated image of itself off to the side of the moniter. I am using the string: background image="001back" -- That's without the brackets because i don't think it would show with them. Any suggestions on fixing this? Or stretching the background?
Similar TutorialsHey All Groovie forum you got here Ok, now to my main point... I want to be able to stretch a image (banner) fully across the screen. I dont want to adjust the height, just make it run from one to side to the other. Also how do I stretch the background image to fullscreen without css? Cheers Hello all, First post here, been stalking for a few weeks and of course, I'm milking for information. Wish I knew enough to contribute. I've undertaken a web design project for a friend and I've run into a few snags I've never seen. I have a background color set, and the background color only extends the size of the browser window. It's grey when I scroll down. www.thephoenixpages.com/ourstory Forgive the design, not my doing. Also, is there a discrepancy in positioning with Chrome vs FF ? The picture box is off in each browser. Lastly, I attempted the sticky footer(as seen on some of the pages, but not the linked one) and it had the same problem. It wouldn't stick to the bottom, but the bottom of the window as seen on the screen. If anyone could shed some light on these problems, I'll email you a high five. Thanks. larsy Hi All, I have a problem that seems to only occurs in IE (i'm currently using IE8). Basically, i have web pages that consist of a header, content area and a footer. I am trying to stretch an image to be displayed as a left and right border in the content area. the image is not a solid color, so simply setting a border property would not work. In all browsers but IE, the image stretches just fine. The site is heavily table based due to the fact that it is written for a CMS known as NetSuite. A lot of the tables and html are created by the CMS and are very difficult and tricky to modify. You can see the page in action at - http://staging.marware.com/iphone-cases/iphone-4-cases I have tried numerous combinations of height:100% and different positioning values with little help. One of the problems is that the height of the content area is dynamically set. The code in place now looks like this: <table border="0" cellpadding="0" cellspacing="0" width="1020" height="100%" align="center"> <tr style="height:100%;"> <!-- left side image --> <td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td> <td valign="top" width="400" align="center"> <!-- right side image --> <td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td> </tr> </table> 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, 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? Hey, I'm wanting to use a larger background image with a height of around 810pixels. Currently when i implement it, only around half the image appears and there is no scroll bar to use to view the whole image. And currently when i put a css box into it, when i scroll down it will still only show the top section of the image. Can anyone assist in what code to put into the CSS to allow the scroll bar to appear so i can view the whole background image? Thanks (sorry, meant to put this in the CSS section, only just realised) Hello, Well im trying to make a web page type thing and i was wondering if there is a way to make the background change as if it were an image when you shrink the page down. http://www.legouniverseforums.com/radio.html thats the link. i want the video chat to be on the orange part box and the chat to be in its box but on some computers they go in there boxes but on other computers they dont. Here is how it looks on mine i would like it to look like this on every computer. http://www.legouniverseforums.com/Sc...34.34%20PM.png This is the current script I am using for background change upon a timer, does anyone know how and where I can add a no bg repeat and position the image on the bottom left? Any help would be great! Thanks <script type="text/javascript"> var bgImages = new Array(); bgImages.push("/image/girl.gif"); bgImages.push("/image/girl2.gif"); bgImages.push("/image/girl3.gif"); //bgImages.push("URL HERE"); function LoadRandomBackground() { var randomImageIndex = Math.floor(Math.random()*bgImages.length) document.body.background = bgImages[randomImageIndex]; } function StartBackgroundRefreshTimer() { var timer = setInterval('LoadRandomBackground()',10000); // 10 seconds } </script> </head> <body onload="LoadRandomBackground(); StartBackgroundRefreshTimer()"> How would I do this? Hi Guys, Firstly i apologise if this in the wrong section of the forum, please let me know. My problem: I have designed a webpage for my DJ services in Photoshop and plan to slice it up. The first problem is my background. I designed it myself so its not simple. Basically i dont have a clue on how i should export the background from CS5 or how to implement it into my website on dreamweaver cs5. Also i want to export my images once sliced from Photoshop with a transparent background, how would i do this? Thanks for any help Raver910 Hey everyone. I'm not too experienced in HTML and I'm having a problem with displaying a background image on this site I'm building. I know this probably isn't the best way to be doing what I'm trying to do, but I'm using a Frameset with 3 columns. The left and right I just want to display the background image and the main to be another frameset containing the main website content. It looks perfectly fine in Firefox, but in Internet Explorer the background images in leftMargin and rightMargin don't show; it's just blank. Here is my index.html file: 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>| Totaro's Restaurant |</title> </head> <frameset cols="15%, 70%, 15%" border=0> <frame name="left" src="leftMargin.html" /> <frame name="main" src="main.html" /> <frame name="right" src="rightMargin.html" /> </frameset> <noframes> I'm sorry, it seems your browser doesn't support frames! x( </noframes> </html> and here is the code of one of the margins: 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></title>
<style>
body {
background-image:url(images/bg.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
Here it is in Firefox: http://i34.photobucket.com/albums/d1...itefirefox.jpg And in IE: http://i34.photobucket.com/albums/d1.../websiteie.jpg Any help would be appreciated. Hello All, I hope this is a good place to ask my question. I was working on a a webpage and tinkering with two different screen capturing software to capture my website then all of a sudden I realized I can no longer see the background of my webpage. I can go online and see background images of someone else webpage but no the webpages stored on my computer. If anyone has any idea about the cause of the problem please help. Hello, 1) I need to know how to make my background image the size of every monitor that will view it in any browser? Any idea? OR at least the size of most monitors 2) Also, how do I make is stick so it doesn't scroll, everything scrolls above it or on it. If the answer is CSS could you please write out a bit of code for me and tell me where to put it. Pretty please, with sugar on top. I know it sounds lazy, but I use to now CSS can't remember anything now and I'm suffering from short term memory loss which is new for me. I have to relearn everything and remember it - hard to do when you can't remember what you did 5 minutes ago. ~eDee i'm trying to set an image from my harddrive as the background but it doesn't seem to be working. I've been trying <body background="image location.jpg"> but it doesn't work. Any thoughts or solutions? thanks Can somebody give me a full code <div style=""> for putting background images in divs... thanks in advance for you're help! hi i'm new! i'm pretty good with html and i'm setting up my website, jesse-m.com. if you go to this link: http://jesse-m.com/fourth%20layout/header_test.php, that is what i want the sidebar to look like. but when i put my cutenews code in under the news section, this is what happens to the sidebar: http://jesse-m.com/fourth%20layout/header.php how do i make the sidebar not follow the height of the news section? i don't want it to stretch! i just want it to stop when it has nothing else to show and just continue the white background. because it's a php document, here is the source of the page WITH the cutenews: 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"> <style type="text/css"> <!-- body { background-color: #E4E4E4; } --> </style> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>» JESSE-M.COM • a number one source for jesse mccartney fans</title> <link rel="stylesheet" href="http://www.katiecassidyfan.com/jesse/fourth layout/style.css" type="text/css" /> </head> <body> <div align="center"> <table width="610" border="0"> <tr> <td><img src="header.png" width="610" height="271" /></td> </tr> </table> <table width="614" border="0"> <tr> <td width="184" height="10" valign="top" class="sidebar">WELCOME</td> <td width="420" valign="top" class="sidebar">NEWS</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">welcome to jesse-m.com! we have been down for awhile but are now back stronger than ever and ready to supply you with the latest jesse gossip, pictures, and news. be sure to check back multiple times throughout the day because we will be following jesse's foot steps throughout his busy career and are happy to keep his most dedicated fans up to date.</td> <td rowspan="17" valign="top" bgcolor="#FFFFFF" class="news"><?PHP $number=10; include("/home/content/k/a/t/katiefan/html/jesse/cutenews/show_news.php"); ?></td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">STATISTICS </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">owners: kirstie and ana <br /> opened: march 1st, 2008<br /> layout version: 2<br /> host: <a href="http://www.katiecassidyfan.com" target="_blank">katiecassidyfan</a><br /> contact: <a href="mailto:staff@jesse-m.com">staff@jesse-m.com</a> </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">NAVIGATION</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"><a href="jesse">jesse</a>: facts, biography, awards<br /> <a href="http://www.jesse-m.com/gallery" target="_blank">gallery</a>: candids, photographs, scans<br /> <a href="video" target="_blank">video vault</a>: interviews, tv, movies<br /> <a href="web" target="_blank">web</a>: affiliates, links, official sources<br /> <a href="site" target="_blank">site</a>: information, webmasters, past</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">MUSIC PLAYER </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"><center><object type="application/x-shockwave-flash" width="171" height="83" data="http://katiecassidyfan.com/jesse/test/second/xspf_player.swf?playlist_url=http://katiecassidyfan.com/jesse/test/second/playlist.xspf"> <param name="movie" value="http://katiecassidyfan.com/jesse/test/second/xspf_player.swf?playlist_url=http://katiecassidyfan.com/jesse/test/second/playlist.xspf" /> <embed src="http://katiecassidyfan.com/jesse/test/second/xspf_player.swf?playlist_url=http://katiecassidyfan.com/jesse/test/second/playlist.xspf" width="171" height="83"></embed> </object></center></td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">RECENT PICTURES </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"> </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">ELITE AFFILIATES </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">1. <a href="http://www.katiecassidyfan.com" target="_blank">katie cassidy fan</a><br /> 2. <a href="http://www.glorianafans.com/" target="_blank">Gloriana Fans</a><br /> 3. because we have not been online for awhile, we erased all of our affiliates. if you'd like to be an elite, please contact us! </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">PROJECTS</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">"wanted" - body fragrance<br /> "alvin and the chipmunks: 2" - cinema </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">TAGBOARD</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"><Center><!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe frameborder="0" width="175" height="180" src="http://www3.cbox.ws/box/?boxid=3017165&boxtag=7321&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#EBEBEB 1px solid;" id="cboxmain"></iframe></div> <div><iframe frameborder="0" width="175" height="75" src="http://www3.cbox.ws/box/?boxid=3017165&boxtag=7321&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#EBEBEB 1px solid;border-top:0px" id="cboxform"></iframe></div> </div> <!-- END CBOX --></center></td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">DISCLAIMER</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">jesse-m.com is a fansite and <em>only</em> a fansite for <strong>jesse mccartney</strong>. we are no way affiliated with jesse or his management unless stated so. we do not pose to be him or any of his family members and any exclusive information that is sent to this site is for our use, <em>and our use</em>, <u>only</u>. everything on this site was created by either ana or kirstie and are not be resdistrubited any where else without persmission. these graphics are ours and not yours to use! all photos, videos, articles and interviews are owned by copyright their respective owners. jf you'd like to have any illegal content removed, please <a href="http://www.katiecassidyfan.com/jesse/staff@jesse-m.com">e-mail</a> us before taking an legal action. we would love to cooperate with you.</td> </tr> <tr class="bottom"> <td height="10" colspan="2" valign="top" bgcolor="#FFFFFF"><div align="center">copyright: <strong>JESSE-M.COM</strong> | opened: 2008 | <a href="jesse">Jesse</a>, <a href="gallery">Gallery</a>, <a href="video">Video Vault</a> | Hits: <!-- Start FastWebCounter.com --> <script src="http://fastwebcounter.com/secure.php?s=www.jesse-m.com"></script> <!-- End FastWebCounter.com --> | Online: <!-- Start FastOnlineUsers.com --> <script type="text/javascript" src="http://fastonlineusers.com/on2.php?d=www.jesse-m.com"></script> <!-- End FastOnlineUsers.com --></div></td> </tr> </table> <p><br /> </p> </div></body> </html> i have a custom friendster layout which i made using basic HTML which basically turns my friendster profile into a blog: http://www.friendster.com/jholicmks have a question though about the object tag. as you can see from the website i use the <OBJECT> tag to import my blog contents into the content area of the site. unfortunately, after fiddling around with its height properties i can't seem to get the <OBJECT> to expand to fit its contents. all i've managed to do is get the scrollbar to disappear and, after 800px down, it cuts off completely. here's the code i used: http://h1.ripway.com/onlymoderatelymad/jholic.js it's very messy javascript coding, i know. but if anyone has a solution for my problem i'd appreciate it. I am making an eBay layout for a friend but one of the cells doesn't seem to be stretching. The cell is the one with layout_09.jpg as the background. Heres how it looks like at the moment: http://ki114.phpnet.us/ebay/layout.html And heres the code: HTML Code: <html> <head> <title>layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (layout.psd) --> <table id="Table_01" width="780" height="700" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5" width="780" height="172"> <img src="images/layout_01.jpg" width="780" height="172" alt=""></td> </tr> <tr> <td colspan="5" width="780" height="4"> <img src="images/layout_02.jpg" width="780" height="4" alt=""></td> </tr> <tr> <td rowspan="2" width="34" height="471"> <img src="images/layout_03.jpg" width="34" height="471" alt=""></td> <td width="102" height="439"> <img src="images/layout_04.jpg" width="102" height="439" alt=""></td> <td rowspan="2" width="35" height="471"> <img src="images/layout_05.jpg" width="35" height="471" alt=""></td> <td rowspan="3" background="images/layout_06.jpg" width="562" height="478"> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>m </td> <td rowspan="3" background="images/layout_07.jpg" width="47" height="100%"> </td> </tr> <tr> <td width="102" height="32"> <img src="images/layout_08.jpg" width="102" height="32" alt=""></td> </tr> <tr> <td colspan="3" background="images/layout_09.jpg" width="171" height="100%"> </td> </tr> <tr> <td colspan="5" width="780" height="64"> <img src="images/layout_10.jpg" width="780" height="46" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> Thanks in advance. Hello everyone! I am having a trouble coding a website design. I am not even sure this is possible, but how can I stretch a window (pop-up window) between the top and the bottom of the page (so when I open the window on a larger display it looks the same)? Thank you in advance, Andrei Hello, I have recently ran into an issue with tables. I set a table width to 800px, and I want it so the text automatically breaks down to the next line instead of stretching the table past 800px wide. A solution that functions in both IE and FF would be very much appreciated. Thank you |
|||||||