|
HTML - Simple Html Background Image Problem
Hi all,
I want to have 2 images as backgrounds but have one on top of the other. Is this possible? If so how would I do it / what is the code? Cheers Raggy Similar TutorialsHey guys, please forgive me if this has already been posted but im at a total loss I'm having major issues with getting a background to fit properly around my html page. I wonder if you can help me. the code i have is this style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(http://i488.photobucket.com/albums/rr248/kingofkingspoker/borderbg.png);" id="homediv" onload="start();" alink="#000000" link="#000000" vlink="#000000"> I really have no idea how to fit it to the whole screen so it doesn't look like the border around the BG image is cutting half the page up and repeating. If this cannot be corrected is there a code i can add to it to implement a border around the actual web page in full, as if to say i could remove the background image, have it has standard white but use a code to implement a border that would look fine on all computers. Plz Help I've made an incredibly simple html page as an active desktop for a gpo policy, however there's been an uproar about colours so I thought I'd give it a stab to have a drop-down box to select from a range of colours for the body style tag. Any suggestions? <html> <head> <!--808080--> <title>ArchitenBG</title> <STYLE type="text/css"> body { background-color:#3A6EA5; } #div1 { position: absolute; size: 50%; bottom: 0px; right: 0px;} </STYLE> </head> <body> <div id="div1"><img src="Talbg.png" /></div> </body> </html> My html problem keeps failling, with all my image codes.. shown for 10 errors which are all for the images what's wrong? Here is the 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" /> <!-- New Perspectives on HTML and XHTML 5th Edition Tutorial 2 Case 2 Fiddler Home Page Author: Date: 2-16-2011 Filename: home.htm Supporting files: fiddler.jpg --> <title>, ITSE 1411 Lab Project 2, Tutorial 2 Case 2, Due 02/23/2011</title> </head> <body> <div> <img src="fiddler.jpg" alt="Fiddler on the Roof" /> <hr /> <a href="home2.htm"><img src="home.jpg" alt="home" /></a> <a href="slide1txt.htm"<img src="start.jpg" alt="start" /></a> <a href="slide1txt.htm"<img src="back.jpg" alt="back" /></a> <a href="slide2txt.htm"<img src="forward.jpg" alt="forward" /></a> <a href="slide6txt.htm"<img src="end.jpg" alt="end" /></a> <br /> <a href="slide1txt.htm"<img src="thumb1.jpg" alt="slide1" style="border-width: 5" /></a> <a href="slide2txt.htm"<img src="thumb2.jpg" alt="slide2" style="border-width: 0" /></a> <a href="slide3txt.htm"<img src="thumb3.jpg" alt="slide3" style="border-width: 0" /></a> <a href="slide4txt.htm"<img src="thumb4.jpg" alt="slide4" style="border-width: 0" /></a> <a href="slide5txt.htm"<img src="thumb5.jpg" alt="slide5" style="border-width: 0" /></a> <a href="slide6txt.htm"<img src="thumb6.jpg" alt="slide6" style="border-width: 0" /></a> </div> <hr /> <div> <img src="slide1.jpg" alt="slide1" /> </div> <blockquote> <p><i>Do You Love Me?</i> sung by Deb Ingalls and Thomas Gates</p> </blockquote> </body> </html> Newbie here. Hello to everyone. I have a huge problem. I am VERY new to HTML and my website was going great until the background image just went away. I have gone through every part of the layout and can not seem to find out why. Please help. I can send the entire HTML( its is not that big) to anyone who is willing to help me. Or, someone can call me or give me their number and I will call them. I need to get this website up tonight so that my business will start tomorrow. Thanks in ADVANCE> Thanks, Matt 479-643-4221 Hi, I have a table with a background image. i want that this background image adjust itself dynamically according to the size of the table. Can this be achieved. can anyone post any technique of doing this? Thanks in advance geniuses htmlgroom I'm using firework and dreamweaver, but i need to expand some side bar images in html in a table so client can input their own copy so it expands vertically without compromising the design. I need to use HTML code not CSS What code can i use to vertical align the background image in a table? Presently i have this working... <td rowspan="9" background="expansion_images/right_001_r2_c5 copy.png"> </td> Hi everyone, I'm new to the board and wondered if I could pick your brains... I'm in the process of finishing off a website to showcase my photography work. There is one small problem with it that has been bugging me. On two of the pages, the menu buttons are higher up than on every other page. I've tried fixing it in FrontPage, but had no luck so far. If anyone could help me figure out why this is so I can fix it I'd be very grateful! Many Thanks, James Hi, Im making a website for a family member. It turns out we need to modify some html to get it to look how we want. (we are using a control panel / template style program) to make the website I have a search box and go button layered on top of the header/banner of my website. In internet explorer the banner is partially blanked out by the search box (but not in firefox or safari). Take a look at: http://cart.street-pharmacy.com. Below is the code I think needs modifiying. Thanks in advance Ben <div> <form action="{$url_http}" method="get" style="padding:0px;margin:0px;"> <table border="0" style="float:right; margin:32px 4px 0px 0px;"> <tr><td><input type="hidden" name="p" value="catalog"/> <input type="hidden" name="mode" value="search"/> <input type="hidden" name="search_in" value="all"/> <input maxlength="256" type="text" name="search_str" style="width:122px;font-size:10px;"/></td> <td><input type="submit" value="Go"/></td></tr> </table> </form> </div> Okay so im making a new site and i have one problem. All i need to do is when you click on a button an image appears saying "Generating" and then after around 5 seconds it then shows a link. Only problem is i don't know how to do it Could anyone tell me how i could do this? Thanks! Hello, im a new at html but i got the swing of it quickly. but my body paragraph i cant get right. its in the center when i want it up more here is my coding. whats in red is what im having problems with. also my website is universalentertainmentcentral.hostoi.com oh and please ignore the comments at the bottom they are embarrassing. HTML Code: <html>
<head>
<title> Entertainment Center </title>
<style type="text/css">
body
{
background-image: url("Background.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center
}
p.margin
{
margin-top:0cm;
margin-right:1.8cm;
margin-left:4.8cm;
}
p.chat
{
margin-right:4.8cm;
margin-left:0cm;
}
p.def
{
margin-top:0cm;
margin-right:4.8cm;
margin-left:4.8cm;
}
#HCB_comment_box input.text
{
color:white;
}
#HCB_comment_box div.comment {
color:white;}
#HCB_comment_box textarea, #HCB_comment_box input.text {
color:white;}
</style>
</head>
<body>
<center><img src="images\logo.jpg"></img></center>
<center><div style="white-space: nowrap;"><tr><img src="button1.jpg" onmouseover="this.src='button1c.jpg';" onmouseout="this.src='button1.jpg';"/><img src="button2.jpg" onmouseover="this.src='button2c.jpg';" onmouseout="this.src='button2.jpg';"/><img src="button3.jpg" onmouseover="this.src='button3c.jpg';" onmouseout="this.src='button3.jpg';"/><img src="button4.jpg" onmouseover="this.src='button4c.jpg';" onmouseout="this.src='button4.jpg';"/><img src="button5.jpg" onmouseover="this.src='button5c.jpg';" onmouseout="this.src='button5.jpg';"/></tr></center>
<p class="def"><table border=0 cellpadding=0 cellspacing=10>
<tr>
<td>
<!-- Counter Code START --><a href="http://www.e-zeeinternet.com/" target="_blank"><img src="http://www.e-zeeinternet.com/count.php?page=572456&style=LED_r&nbdigits=9&reloads=1" alt="Free Hit Counter" border="0" ></a><br><a href="http://www.e-zeeinternet.com/" title="Free Hit Counter" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-decoration: none;"></a><!-- Counter Code END --></div></td><td><img src="images\fb.png"></img></td>
</tr>
</table></p>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><p class="margin"><font face="Times New Roman" size="+3" color="white">Site Under Construction</font></p>
<p class="margin"><font face="Times New Roman" color="white">[color="Red"]New to the site? well then I extend my welcome! We are currently under construction and looking forward to opening soon. What we do is make a fun and safe place for people to go on in there down time.
Also we host buisness software and write game reviews for anyone who is not in the know. We also host Java, Shockwave, and Flash games. If your not a game player we will host anime shows from various titles "If we can get the rights." Hope to see everyone soon[/color]. ; )</font></p></td>
<td><p class="chat"><object width="250" height="360" id="obj_1292110525893"><param name="movie" value="http://EntertainmentCent.chatango.com/group"/><param name="AllowScriptAccess" VALUE="always"/><param name="AllowNetworking" VALUE="all"/><param name="AllowFullScreen" VALUE="true"/><param name="flashvars" value="cid=1292110525893&a=000000&b=100&c=999999&d=848484&e=000000&g=CCCCCC&h=333333&i=29&j=CCCCCC&k=666666&l=333333&m=000000&n=CCCCCC&p=12&s=1&t=0"/><embed id="emb_1292110525893" src="http://EntertainmentCent.chatango.com/group" width="250" height="360" allowScriptAccess="always" allowNetworking="all" type="application/x-shockwave-flash" allowFullScreen="true" flashvars="cid=1292110525893&a=000000&b=100&c=999999&d=848484&e=000000&g=CCCCCC&h=333333&i=29&j=CCCCCC&k=666666&l=333333&m=000000&n=CCCCCC&p=12&s=1&t=0"></embed></object><br>[ <a href="http://EntertainmentCent.chatango.com/clonegroup?ts=1292110525893">Copy this</a> | <a href="http://chatango.com/creategroup?ts=1292110525893">Start New</a> | <a href="http://EntertainmentCent.chatango.com">Full Size</a> ]</p></td>
</tr>
</table>
<p class="def"><table border=0 cellpadding=0 cellspacing=0 width="950">
<tr>
<td><!-- begin htmlcommentbox.com -->
<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
<link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" />
<script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((typeof hcb_user !== "undefined" && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&opts=406&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end htmlcommentbox.com --></td>
</tr>
</table></p>
</body>
</html>
<html> <head> <title> Entertainment Center </title> <style type="text/css"> body { background-image: url("Background.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: top center } p.margin { margin-top:0cm; margin-right:1.8cm; margin-left:4.8cm; } p.chat { margin-right:4.8cm; margin-left:0cm; } p.def { margin-top:0cm; margin-right:4.8cm; margin-left:4.8cm; } #HCB_comment_box input.text { color:white; } #HCB_comment_box div.comment { color:white;} #HCB_comment_box textarea, #HCB_comment_box input.text { color:white;} </style> </head> <body> <center><img src="images\logo.jpg"></img></center> <center><div style="white-space: nowrap;"><tr><img src="button1.jpg" onmouseover="this.src='button1c.jpg';" onmouseout="this.src='button1.jpg';"/><img src="button2.jpg" onmouseover="this.src='button2c.jpg';" onmouseout="this.src='button2.jpg';"/><img src="button3.jpg" onmouseover="this.src='button3c.jpg';" onmouseout="this.src='button3.jpg';"/><img src="button4.jpg" onmouseover="this.src='button4c.jpg';" onmouseout="this.src='button4.jpg';"/><img src="button5.jpg" onmouseover="this.src='button5c.jpg';" onmouseout="this.src='button5.jpg';"/></tr></center> <p class="def"><table border=0 cellpadding=0 cellspacing=10> <tr> <td> <!-- Counter Code START --><a href="http://www.e-zeeinternet.com/" target="_blank"><img src="http://www.e-zeeinternet.com/count.php?page=572456&style=LED_r&nbdigits=9&reloads=1" alt="Free Hit Counter" border="0" ></a><br><a href="http://www.e-zeeinternet.com/" title="Free Hit Counter" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-decoration: none;"></a><!-- Counter Code END --></div></td><td><img src="images\fb.png"></img></td> </tr> </table></p> <table border=0 cellpadding=0 cellspacing=0> <tr> <td><p class="margin"><font face="Times New Roman" size="+3" color="white">Site Under Construction</font></p> <p class="margin"><font face="Times New Roman" color="white"> New to the site? well then I extend my welcome! We are currently under construction and looking forward to opening soon. What we do is make a fun and safe place for people to go on in there down time. Also we host buisness software and write game reviews for anyone who is not in the know. We also host Java, Shockwave, and Flash games. If your not a game player we will host anime shows from various titles "If we can get the rights." Hope to see everyone soon . ; )</font></p></td> <td><p class="chat"><object width="250" height="360" id="obj_1292110525893"><param name="movie" value="http://EntertainmentCent.chatango.com/group"/><param name="AllowScriptAccess" VALUE="always"/><param name="AllowNetworking" VALUE="all"/><param name="AllowFullScreen" VALUE="true"/><param name="flashvars" value="cid=1292110525893&a=000000&b=100&c=999999&d=848484&e=000000&g=CCCCCC&h=333333&i=29&j=CCCCCC&k =666666&l=333333&m=000000&n=CCCCCC&p=12&s=1&t=0"/><embed id="emb_1292110525893" src="http://EntertainmentCent.chatango.com/group" width="250" height="360" allowScriptAccess="always" allowNetworking="all" type="application/x-shockwave-flash" allowFullScreen="true" flashvars="cid=1292110525893&a=000000&b=100&c=999999&d=848484&e=000000&g=CCCCCC&h=333333&i=29&j=CCCC CC&k=666666&l=333333&m=000000&n=CCCCCC&p=12&s=1&t=0"></embed></object><br>[ <a href="http://EntertainmentCent.chatango.com/clonegroup?ts=1292110525893">Copy this</a> | <a href="http://chatango.com/creategroup?ts=1292110525893">Start New</a> | <a href="http://EntertainmentCent.chatango.com">Full Size</a> ]</p></td> </tr> </table> <p class="def"><table border=0 cellpadding=0 cellspacing=0 width="950"> <tr> <td><!-- begin htmlcommentbox.com --> <div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div> <link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" /> <script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((typeof hcb_user !== "undefined" && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&opts=406&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script> <!-- end htmlcommentbox.com --></td> </tr> </table></p> </body> </html> Eyup people I was just wondering how I would go about centering or stretching a background image on a webpage without it doubleing itself. i hope that makes sense lol... sorta like when you set a wallpaper on your computer screen and set it to "tiled", there maybe more than 1 image showing. Id just like it to be stretched. any help would be appreciated thanks Basically i have made this site and i am having problems with the nav bar. http://www.srnsf.com As you can see it resizes at certain pages and it looks strange. Why is this happening? I have 3 images, one is a background image that repeats, one is aligned left and another is aligned right. <td background="screen_header_02.gif" height="103"><img src="screen_header_04.gif" align="left"><img src="screen_header_03.gif" align="right"></td> it is fine, but the background image is not viewable when printing. so i need to come up with another way of using 3 images in the way i have, without using the background image. any ideas? Hi all, I've just set up my website but there's a small problem when it's viewed in Internet Explorer. The address is http://www.angelsmithphotography.com.au When it's viewed in Internet Explorer, there's a small (approx 3-4 pixel height) black strip between the header image and the text below. I designed the site in Mozilla Firefox and so far, when viewing in that browser, this issue isn't there. I know my HTML is probably riddled with other issues (a legacy of learning HTML seven years ago and never bothering to update my knowledge much) but for now my primary focus is this one issue. I have had a poke around in the HTML and usually I would eventually find (or fluke) the solution, but I'm currently running out of time and patience and so hoped somebody else could help me! Thanks very much. im having trouble in finding a way to transfer the infos ive collected in 1st and 2nd pages going to 3rd page. e.g. Quote: 1st page: First Name: ___________ <--- the user will input his first name 2nd page: Last Name: ___________<--- the user will input his last name 3rd page: My name is [first name] [last name].. <----- will display the user's first and last name.. i already made a code for this program but my problem is only the information in the 2nd page is shown in the 3rd page.. there's still a problem *sob*.. need help pls.. Hey guys, First i'd just like to say in advanced thanks for the help. Anyway here is my question I have created a website with godaddy's website tonight which is basically a simple cookie cutter program. But I cant seem to find out where to insert a button that says something like "Click here to Print" then that prints off a document I have in Micrsoft Word. So I was wondering if anyone could tell me how to do this in HTML. Thanks again guys. Tyler McGinnis ps sorry its such a noobish question All I want is to have my image placed in the center of my web page... Every code I try doesn't work. The image is either at the top of the page or it doesn't stay in the center at different resolutions. Can someone help me? I used the following code in Firefox-3.0.4 (Full Screen mode) . I have two vertical frames (Video and messenger). In the video frame VLC playing on top of the video frame (Not embedded into HTML). The Video is playing correctly, except sometimes only "a black color background" comig, not always (Within the video frame, vertically left-half/right-half/Full of the frame is black color background) is appearing between VLC-video and Frame. Since I have positioned the video (top:8px; left:57px), I can noticed when above taken place. Actually, in my application VLC is independent of Firefox/HTML.l So I want to avoid the black-color background. I dont want the black color background. Actually, this is happening when skin changes, the code attached is currently having skin_10 (for resolution 1024x768). Similarly changing skin_1 for the same resolution, but cols, and rows only changing. ie. frame size is changing for different skins. (Every skins having different rows and cols) I attached 5 images, 1. bg_skin_1024_768.jpg =>skin background image 2. sample.jpg => a sample required output image. 3.sample_left_black.jpg => Error with left side black background 3.sample_right_black.jpg => Error with right side black background 3.sample_full_black.jpg => Error with full black background Please can anybody know about this issue me? thanks Kanesh <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <head> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> </head> <frameset rows="0,*" cols="*" style="background-color:#ffffff;" frameborder="NO" border="0" framespacing="0" > <frame src="121term_ctrl.php" style="background-color:#ffffff;" name="control" scrolling="NO" framespacing="0" noresize="noresize" > <frameset style="background-image:url('./skin/skin_10/images/1024_768/bg_skin_1024_768.jpg'); background-repeat:no-repeat;" cols="704,*" margin-height="0" frameborder="no" border="0" framespacing="0" noresize="noresize"> <frame transparency="true" src="vp/play_video.php?width=704&height=658&top=57&left=8" frameborder="0" margin-height="0" scrolling="no" name="video" noresize="noresize"> <frame transparency="true" src="./skin/skin_10/messenger.php?width=320&height=768&top=200&left=20" frameborder="0" margin-height="0" scrolling="no" name="messenger" noresize="noresize"> </frameset> </frameset> <noframes> </noframes> </HTML> My Headfirst book on page 404 says to add the background-image property to a paragraph so I add the code for that and a few other changes highlighted in bold in last paragraph but it doesn't show the image on the browser and the css validator does not show it as an error, also what I don't understand is why there are THREE classes with the same name [.guarantee] in this stylesheet? The url is: file:///C:/Headfirst/HFHTML_ch10/lounge/lounge.html body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 background-image: url (images/background.gif) ; } How come this code: <img src="tick.gif" alt="+" width="15" height="15" />This is a test, etc. ...puts the image on one line, with the text "This is a test, etc." beneath it? I want the text to be on the same line as the image. (Prob. occurs with IE and FF.) Any ideas? Cheers, James |
|||||||