|
HTML - Image That's Not A Background Repeats
Hi,
I am making a basketball site and I decided to make my own kind of ESPN "Bottomline" (thing thing that tells you all the stats and facts). I made a new table row under the banner and made the image a new td's background. The image displays correctly but once it ends it repeats about 3 pixels or so over the background image and I don't know why. Can someone please help me? Here's the link: http://www.freespaces.com/kotcleague/index.html Also, if someone could point me in the right direction in HTML or CSS to moving the text that will be in the TD so its in the black section of the image. Thanks a LOT Mike Similar TutorialsAn image that repeats itself until it hits 100% width.. How is that possible? My html file works perfectly fine in IE but in Firefox It duplicates itself. Please can you help me sort this out. Thanks screenshot of problem: http://i111.photobucket.com/albums/n...reenshot-4.png Code of html page: Code: <html>
<head>
<style type="text/css">
img
{
border: none;
}
.content
{
padding: 30px 30px 20px;
}
.nav
{
padding: 10px 22px 6px;
font-size: 12px;
}
.mnav
{
border: none;
}
/* link styles.. */
a:link
{
color: #000000;
text-decoration: none;
}
a:visited
{
color: #000000;
text-decoration: none;
}
a:hover
{
color: #FFFFFF;
text-decoration: none;
}
</style>
<title> Index </title>
<script src="flash/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body background="images/bg.jpg"><table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="652" ><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','652','height','69','title','banner','src','flash/banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/banner' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="652" height="69" title="banner">
<param name="movie" value="flash/banner.swf">
<param name="quality" value="high">
<embed src="flash/banner.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="652" height="69"></embed>
</object></noscript></td>
</tr>
<tr>
<td class="mnav"><a href="Index.html"><img src="images/eportfolio-v1_04.gif"></a><a href="Publications.html"><img src="images/eportfolio-v1_05.gif"></a><img src="images/eportfolio-v1_06.gif"><a href="Danceometer development.html"><img src="images/eportfolio-v1_07.gif"></a><a href="Review.html"><img src="images/eportfolio-v1_08.gif"></a></td>
</tr>
<tr>
<td height="35" background="images/eportfolio-v1_09.gif" class="nav">
<!-- --></td>
</tr>
<tr> <td background="images/eportfolio-v1_10.gif" width=582 height=630 valign="top" class="content"> <font face="Arial">
<p><font color="#FFFFFFF"><font color="#FFFFFFF" face="Pristina" size="5"><u><Center>Welcome!</centeR></u></font><br> <br>Welcome to my Dance O' Clock Eportfolio!<br>
<br>
The Eportfolio is a showcase of all the work I have made throughout the Dance 'O Clock project.
Evidence of the publications and a review of the whole project is also included in the eportfolio. Below is the required information for the eportfolio.
</font></p>
<p><font color="#FFFFFFF"><hr color="#969696" width="540">
<br>
<font color="#FFFFFFF">Name: Richard Dyson</font><br>
<font color="#FFFFFF">SPB title: Dance o'Clock Level 2 </font> <Br>
<font color="#FFFFFF">Registration number: 9086 </font> <br>
<font color="#FFFFFF">Center name: Whitchurch High school</font> <br>
<font color="#FFFFFF">Center number: 68751</font><br>
<br>
</font>
<hr color="#969696" width="540">
<Br>
<p><font color="#FFFFFFF" face="Pristina" size="4"><u>Recommendations</u></font></p>
<p>
<font color="#FFFFFF">Browser: Internet Explorer</font><br>
<font color="#FFFFFF">Resolution: 1024 * 968</font><br>
</font> </p></td>
</tr>
</table>
</body>
</html>
cheers 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 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. 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 Can somebody give me a full code <div style=""> for putting background images in divs... thanks in advance for you're help! How would I do this? 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 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 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 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. 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 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()"> Hi, I know only the very basics of HTML coding. My 'website' used to promote my singing is a Tumblr page due to 'Tumblr' being free. I used custom coding to create my website which was working fine and looked like this: http://s3.amazonaws.com/data.tumblr....u4yZA3k98I8%3D Now however the background image isn't showing up and I don't know how to fix it. Attached is all of the coding. The url for the background img is http://img197.imageshack.us/img197/6296/unled2kb.jpg . Please help me! Thanks so much guys. Let me know if you need anymore info. Hi, I'm new here but have been teaching myself html and css for a few months. I'm trying to figure out the best way to use a image for the background in a form, for example a login form. I have been using a image I made with gimp that has nice rounded corners and the shiny 3D look with drop shadows and all that. Up to this point I just use a table inside a div to place my input tags and submit button over the image but I can't really do anything fancy with the input text boxes so I was wondering is there a way to put my inputs over an image that has boxes for the input. That way I can use gimp to determine the look of the input text areas. I tried using map and figuring out a way to put a input in there but it doesn't work because you can't put form elements inside a hot zone on an image. I could use tables like I have been but the input area shows up white and won't match if I have another color in my image. Also the table always renders different in different browsers moving my form up and down or making the text areas closer or farther apart. So is there a better way to place my input text areas over an image ? Thanks and I hope I gave enough info without confusing the issue. Hello, I have an swf movie player embedded into the index page of a website. I was wondering what is the best way to insert a preview image into the swf player before you press play? Hey, I've recently set up a small e-bay business, and have had a few problems in designing the listings. Mainly with this one; http://cgi.ebay.co.uk/ws/eBayISAPI.d...MESE:IT&ih=019 I want to replace the solid blue colour that's running around and between the tables with a tiled image, but after two hours of failed trial and error, I have no idea what to change in the HTML without putting a background image on the whole page. It's soo frustrating, Can anyone please help? Thank you, Jeremy Im using an email newsletter with a few inline css styles. I have a side background and looks like this <td width="145" valign="top" background="http:www.etcetc.com/images/BLsidegrey.gif"></td> NOW.this shows up fine in web based email like hotmail and gmail. HOwever the w3c validator says it not right to use the background part etc. So i tried the format below <td width="145" valign="top" style="background: url('http://www.etcetc.com/images/BLsidegrey.gif')" ></td> and the validator says great! ure html code is good. But the browser based emails dont show the image.However, when i download it to my mail program the image shows up. So im taking its the web based emails that r having an issue with it since most ppl just read it online and in their mail programs like outlook etc I even tried the bottom creating a seperate style and same issue and they dont show up. also i create a table in my newsletter and the text seems to be squishing to the sides of my coloumns in gmail. As the title says: Is it possible to repeat an image horizontally that is not a background image? Thank you! |
|||||||