HTML - Background Html Help
Hello!
I have just started using HTML, and Im already stuck! I want to have a blue background, with a limited white frame (like the white frame you can see he http://xrk.no/ ). The background color is no problem, but how do I make that white frame, without using a picture? Hope this one is a easy one for you! Thanks Similar TutorialsHi all, This is a really basic question I'm sure. I'm creating a simple HTML website for someone. I'm using Pagebreeze HTML editor. When I'm in Pagebreeze and using the 'preview' option etc, my background image appears without a problem. But when I upload the .htm file to the FTP server, and try to go to the URL, the background doesn't appear. The code I've got is just as follows: <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta content="MSHTML 6.00.6000.17063" name="GENERATOR"></head> <body language="Javascript1.2" background="Lights1.jpg"> Any ideas why this might be happening? The image is definitely on the FTP site. Thanks in advance for any help you can offer. Kevin Hey People! So I've been beating my head against a wall attempting to figure this out. I'm creating a website from scratch, and my problem is that the background image that I have set, is not appearing UNDER my text or other images (like my page content) The background image is appearing above my content, or under my content. I have tried placing the html code for the background under body, head, and also I have attempted to correct it using padding-top (etc) and also margin. Again I also tried <div-id> and other things like that.... but I'm not sure on what else to try... I've done everything that I know. This is driving me nuts! Here is what I have right now....Please, if you know what I am missing from my code to fix this, let me know!!! Code: <body> <center><div style=background-image="<a target='_blank' title='ImageShack - Image And Video Hosting' href='http://img717.imageshack.us/i/background1250copy.jpg/'><img src='http://img717.imageshack.us/img717/4030/background1250copy.jpg' border='0'/></a> <Background-repeat="no repeat"/> <width="500px"/> <height="200px"/> </center> <body bgcolor="#787878"> <div-id> <padding-top="100px"> <padding-left="100px"> <padding-right="25px"> <center> <img><a target='_blank' title='ImageShack - Image And Video Hosting' href='http://imageshack.us/photo/my-images/51/thefinaltester.png/'><img src='http://img51.imageshack.us/img51/4365/thefinaltester.png' border='0'/></a></img> <p><a style> <font-family="courier new"> <font-size="18px">MetalNihilism.co.cc is currently under construction, please continue to check for updates!! </font-family> </font-size></p></a style> </center> </div-id> </div style> </body> Sorry if this was a long post, BUT I'M DYING HERE lol <3 thanks to anyone who can help! I'm quite new to this and used a tag generator thing, how do I make the background black and has anyone got any other tips to make this look more attractive? Here is the code: HTML Code: <p style="text-align: center;"><span style="background-color: rgb(0, 0, 0);"><br></span></p> <p style="text-align: center;"><span style="color: rgb(255, 255, 255);"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="background-color: rgb(255, 255, 255);">if this newsletter is not displaying properly, click <a title="Sternberg Clarke New Talent - February 2010" href="http://www.scflyers.com/newsletterfeb10.html" target="_blank">here</a> to see it in its full splendour</span></span></span></span></p> <p style="text-align: center;"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="background-color: rgb(255, 255, 255);"><br></span></span></span></p> <table style="border: 4px solid rgb(244, 249, 249); width: 751px; height: 604px; background-color: rgb(255, 255, 255);" align="center" border="4" cellpadding="0" cellspacing="6"> </table> <table style="border: 0pt solid rgb(0, 0, 0); width: 600px; height: 183px;" align="center" border="0" cellpadding="0" cellspacing="0" frame="border"> <tbody> <tr> <td style="width: 20px; height: 20px;" colspan="8"> <p><img style="border: 1px solid black;" title="sclogo" src="http://www.scflyers.com/htmlfiles/logo_600px.gif" alt="sclogo" width="600"></p> </td> </tr> <tr> <td colspan="8"> <p style="text-align: center;">performers of the month - March 2010</p> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">the langley sisters</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="5" valign="middle"> <p style="text-align: center;"><img style="border: 1px solid black;" title="Langley Sisters" src="http://www.scflyers.com/langley-sisters_250px.jpg" alt="Langley Sisters" width="250" height="238"></p> <p style="text-align: center;"> <object style="width: 250px; height: 206px;" data="http://www.youtube.com/v/1uSKPIZaZtg&feature" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/1uSKPIZaZtg&feature"> </object> </p> </td> <td> <p style="padding-left: 30px;"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis. </span></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </td> <td> <p> </p> <p> </p> </td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">puncture kit</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td><br></td> <td colspan="5" valign="middle"> <p style="text-align: center;"><img style="border: 1px solid black;" title="pk" src="http://www.scflyers.com/puncture_250px.jpg" alt="puncture kit" width="250" height="238"></p> <p style="text-align: center;"> <object data="http://www.youtube.com/v/wCdauhGajBE&feature" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/wCdauhGajBE&feature"> </object> </p> <p> </p> <p> </p> <p> </p> <p> </p> </td> <td style="padding-left: 30px;" valign="top"> <p><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p><span style="font-size: small;"><br></span></p> </td> <td style="width: 20px; height: 20px;"><br></td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">cash cows</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="5"> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong><img style="border: 2px solid black;" title="cashcows" src="http://www.scflyers.com/cashcows_250px.jpg" alt="cashcows" width="250" height="238"></strong></span></span></p> <p style="text-align: center;"> <object data="http://www.youtube.com/v/IvTHGp8Yui8" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/IvTHGp8Yui8"> </object> </p> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong> </strong></span></span></p> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong> </strong></span></span></p> </td> <td style="padding-left: 30px;" align="left"> <p style="text-align: justify;"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"><span style="font-size: small;"><br></span></p> </td> <td><br></td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td style="text-align: center;" colspan="8"> <p><span style="font-size: x-large;"><span style="text-decoration: underline;">kate mlynar</span></span></p> <p><span style="font-size: x-large;"><span style="text-decoration: underline;"><br></span></span></p> </td> </tr> <tr> <td> </td> <td colspan="5"><img title="km" src="http://www.scflyers.com/km_250px.jpg" alt="km" width="250" height="238"> <p> <object data="http://www.youtube.com/v/tz8BvSiop5Q" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/tz8BvSiop5Q"> </object> </p> </td> <td style="padding-left: 30px; text-align: justify;" valign="top"> <p><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> </td> <td> </td> </tr> <tr> <td><img title="bottomleft" src="http://www.scflyers.com/htmlfiles/bl.gif" alt="bottomleft"></td> <td colspan="5"><br></td> <td> </td> <td><img title="bottomright" src="http://www.scflyers.com/htmlfiles/br.gif" alt="bottomright" width="20" height="20"></td> </tr> </tbody> </table> <p style="text-align: center;"><span style="color: rgb(255, 255, 255);"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;">click <a href="mailto:sarah@sternbergclarke.co.uk?subject=unsubscribe"> here</a> to unsubscribe</span></span></span></p> <p style="text-align: center;"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="color: rgb(0, 0, 0);"><br></span></span></span></p> <p> </p> 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 all, I want to change the look of my blog, and am interested in the overlapping style shown in this example: http://etsytreasuryteam.blogspot.com...ingcolors.html I need to know how to have a main background and then the overlapping image shown in the example (the leaves and colored dots/berries(?)) Hope this makes sense! I know basic HTML, but am stumped with this one. I am still working on creating the images I am going to use. Any help with this would be MUCH appreciated. Thanks! im not sure if this is an issue with html or css but im i have 3 columns in a table of 1 row and im using css to assign a background image to the table columns and the 1st and 3rd column will not top align the background image properly to line up with the background image of the 2nd column (or possibly its the 2nd not lining up with the 1st and 3rd) i will link to the site and post the affecting code here (you can view source on the page to see the html) http://www.wiffleague.com/main.php Code: td.mainBoxTitle { background-color: #4d6066; background-image: url('../images/topmiddleedge.png'); background-repeat: repeat; background-position: top left; background-attachment: fixed; font-family: Geneva, Verdana, Tahoma; color: #000000; font-size: 8pt; text-decoration: none; font-weight: bold; border-left: 0px; border-right: 0px; border-top: 0px; border-bottom: 0px; } td.mainBoxTitleLeft { background-color: #4d6066; background-image: url('../images/topleft.png'); background-repeat: no-repeat; background-position: top left; font-family: Geneva, Verdana, Tahoma; color: #000000; font-size: 8pt; text-decoration: none; font-weight: bold; border-left: 0px; border-right: 0px; border-top: 0px; border-bottom: 0px; } td.mainBoxTitleRight { background-color: #4d6066; background-image: url('../images/topright.png'); background-repeat: no-repeat; background-position: top right; font-family: Geneva, Verdana, Tahoma; color: #000000; font-size: 8pt; text-decoration: none; font-weight: bold; border-left: 0px; border-right: 0px; border-top: 0px; border-bottom: 0px; } note: the 3 background images in question were sliced off of the same original psd file and exported as png files using the same pixel height per slice (35px) and a 35px width for the left and right image with a 3px width for the middle image Hey 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 want this picture duplicated so it fills my whole background with multiple pictures of the same thing What code would I have to use cos Im using HTML The picture is http://www.freewebs.com/call--of--duty--4/M4.jpg So could somebody tell me the code I would need to put in Hi there, I have the almost impossible task to create a newsletter (text + pics) that contains a background image and needs to be distributed using Microsoft Business Contact Manager (Microsoft Outlook add-on). So, can you tell me if background images are 100% good html or not? If yes what could I be doing wrong (CSS, links to images...) Please help Marco 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 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> 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> I have a client who's dead-set on sending out their own HTML emails via Outlook. I create the HTML with absolute links for them via Dreamweaver; then they attach the HTML "as text" into a new Outlook message and send it out. It works surprisingly well except for one thing: Outlook always drops out any background image so that part of the message just looks blank. Is there any easy way to force Outlook to display a background image correctly? Thanks! 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 Here's a site I did recently: http://www.siaacoustics.com I don't know why but when I'm loading the page there's lots of white flashes - in the main content window, you can see this black box only around the text before the rest of the window fills in. There are embedded Flash movies in the top, navigation + content frames - is this what's causing this white flash? Anyone have any ideas? FISHPAWS Here's what I'm up to: Made this scrolling desktop background on my Windows XP machine and found that the desktop icons, which appear transparent over a standard, static wallpaper, are no longer so when the desktop background is changed to an HTML one. That is, the text that displays as if typed with a drop-shadow over a static .jpg wallpaper image shows up over an HTML background inside a colored box. I'd like to get the "no box" effect, the standard XP text with a drop shadow, over the HTML background. Is this possible? I've seen it done, but probably not in html. Every time the page is reloaded, the background colour within certain areas of the page will change to one of a series of pre-set colours. Usually this is all background divs or table cells that have been earmarked for this colour change, but how on earth do you set that up in html? Any ideas? 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> Hi, Background: I have a small page that need to be embeded into a bounch of other html pages. Help needed: 1. Please provide the html chunk that I can use to embed the small page in to other html pages. 2. Is there a way of not using iframe? Can I use <Object> or <embed>? How? --------------------------- mba colleges in london hospitality management diploma |