|
HTML - Body Background Problem
Hello guys,
I have just created very simple website with an older Flash 7. Then I had embeded that .swf file on simple html document. (I did input code for black body background): <body bgcolor="000000"> It looks OK on Safari, but for some reason, background color turns white when viewed on FireFox. I dont have Internet Explorer, so I don't know how it looks there. Any idea what I do wrong? Here is the link to that website: http://www.icebergfilms.com Thank you for any advise. Similar TutorialsIs it possible to declare background image separately and use it in body tag to declare it as background using it's id ???? please reply.... Hi...I'm not new to html but i've come across something i cant get to work. I have created a page with a background image to repeat-x and it look great. Next I want to place a three column table at the top and over this repeated background image. The problem is that the table get placed below the 'background_img.jpg'. So there is a large gap between the top of the page and the table. How do I get the table to be placed over or on top of the repeated background img? Thanks 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> I have a picture that I have used in Front Page as a background. The picture continues to tile to the right and also down. I do not want the tile period. I want the background to only stay behind the table that I am using. Any suggestions will be appreciated. Thanks Much Launchnet 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? Hello everyone! I am so grateful that there are sites like this to help those like me. I'm ready to be hit by rotten tomatoes because my method for building my first site probably breaks tons of rules. I used Photoshop to create a webpage by slicing a single image with the intention of laying it out in a table. When I first sliced the image and simply set each image using "img src=" in each Table Data cell, it came together fine and looked perfect. The problem happened when I made one of my images the background image for the cell. The reason I did this is because this is going to be my main "Content" area and I want to be able to enter content over the image. For some reason, right when I made this change, the cell directly to the left of my "main content cell" is pushing to the right and creating unwanted blank space...and I can't for the life of me figure out why. I'm pulling my hair out and I'll probably cry myself to sleep tonight. I thought it was my HTML and found a tiny bit of CSS to help, but the problem remains. Thanks so much in advance for any assistance you can provide. The site is here (I added red borders to the table for assistance with review): http://www.geocities.com/mena_beena/Rosco.html Here is my HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="rosco.css" /> </head> <body bgcolor=black> <table bordercolor=red border=1 cellspacing="1" cellpadding="0"> <tr> <td colspan=3><img src="Template4_01.jpg"></td> </tr> <tr> <td colspan=2><img src="Template4_02.jpg"></td> <td><img src="Template4_03.jpg"><br><img src="Template4_04.jpg"></td> </tr> <tr> <td><img src="Template4_05.jpg"></td> <td class="bg">asdfasdf</td> <td><img src="Template4_07.jpg"><br><img src="Template4_08.jpg"><br> <img src="Template4_09.jpg"><br><img src="Template4_10.jpg"></td> </tr> </table> </body> </html> Here is my CSS Stylesheet: Code: td.bg{
background: url(Template4_06.jpg);
}
Hi, i want the background color of a div to only span a percentage of the div. For example HTML Code: <div style="width: 90%; padding: 1%; background: green;">50%</div> But i only want the green background colour to span the percentage (in this case 50%) of the div. Is this possible, and if so can somebody point me in the right direction? Thankyou. 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 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? Ok, I dont paticualy want to use flash for this as im not very good with it. I have these 4 images: Background.gif Background-Open.gif Background-Close.gif Background-Side.gif As you can see there is the completely closed, the opening, the closing, and the completly open. What im trying to acheive is an entrance page. On mouseover the image changred from background.gif to background-open.gif and then when the door has opened to stay at background-Side.gif. Then, once the mouse is taken off basicaly the reverse. So background-Side.gif change to background-Close.gif and then to stay at background.gif. Ive seen this on other websites...any ideas? Hi, I am having dramas with a template and it lining up with the Backgroung Image. The template has the same background image as the page background but its like a mesh effect so its a real pain in the butt to line up. And its not working because different screen resolutions and browser widths move the template on the page background. See he http://www.superiorshine.com.au/new If you load the page and the make your browser width smaller you will see the template move along the background image this is why it never lines up cause its floating all over it. Is there anyway i can stop this? I have spent a total of 7 hours fiddling with the background and i still cant get it to work. My last resort is to go into the .PSD and make the website width and height bigger then peoples resolution and save for web and make the bits outside the template (background image) a picture in a cell so the page doesnt see images and expands the scroll bars. Here is the template overlapping: www.superiorshine.com.au/sample/overlap.jpg Any other idea's as this is really getting to me LOL.. Cheers Well I got a website I want to code and I'm not too good in coding though I'm designing/coding websites for 2-3 years(ocassional hobby).I always tried and retried and asked and searched but I always got side effects.So I want to make this one by-the-book 100% XHTML Strict/transitional W3C Valid So I was thinking where should I start with and I thought I should start with the background.I can't seem to manage even this one. As in every single thing I ever done I can't get it to look the same in every evil screen resolution ....Enough talking.As you see in the picture it has 2 parts. the first is a gradient from blue to white(bottom to top) and the other part is a black pattern thing. How can I implement it?I can't simply adjust it's size to fit my resolution and browser.It needs to look the same for everyone. Also while the top part can be made with a vertical 1px slice the bottom one has a pattern so it can't. i was thinking I could divide the website in 2 DIVS:main and footer and set a height percentage % like 80&20 from CSS.Use as background for main a vertical slice and a big image for the footer.But still that wouldn't fix too much ...I don't know. What would you do if it was your website? _____________________________ Hi, I have an image "m1" set as the background of a table on my website. The table is set to the width of the image "340". However, when I add text it pushes the border and the image repeats/cuts off. http://www.monkeygambling.com/newpage.htm This problem only happens in IE, not in opera. Can anyone help? thanks 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> First Hi. I am new to this forum and quite newbie in HTML...I looked around the web, but info can be messy sometimes and I remain stucked...so here am I hoping I will solve this. Thanks to you in advance :-) SO : The problem is recurrent and simple : I HAVE A PSD BACKGROUND THAT I WANT TO STRECH ALL ALONG MY HTML PAGE...BUT WHATEVER I DO IT DOES NOT WORK , it repeats but does not strech. I am working with D8. Somebody could guide on this ? 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 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) ; } I'll be really impressed if someone is able to figure out this issue. I've wracked my brain and asked around, but no luck so far. However, this looks like a good place to come to for help. The problem is with the splash page at the link below. It works great in IE6 and the new Firefox. However, it doesn't work in Chrome and in IE9, if the zoom is greater than 100%, the size of the page (and the linked buttons) expands beyond the viewable area. The background is constructed from a simple table, with the image broken up into the cells. Any help you can offer is appreciated. http://www.jaguaraudiodesign.com/splash/index4.htm <html> <head> <title>JAGUAR AUDIO DESIGN</title> <link rel="stylesheet" type="text/css" href="PageStyle.css"/> <link rel="icon" href="Icon5.ico" type="image/x-icon"> <link rel="shortcut icon" href="Icon5.ico" type="image/x-icon"> <style> body {background-image:url();} </style> <style> {overflow:hidden; height:100%; width:100%;} </style> </head> <body bgcolor="Black" scroll="no"> <div id="content" align="center" scroll="no"> <table id="table1" scroll="no" border="0" cellpadding="0" cellspacing="0" valign="bottom" width="100%" height="100%"> <tr valign="top" border="0" cellpadding="0" cellspacing="0" align="center" height="90%"> <td colspan="5"><img alt="JaguarSplashPageBlkBg (245K)" src="JaguarSplashPageBlkBg.jpg" width="100%" height="100%" /></td> </tr> <tr valign="top" border="0" cellpadding="0" cellspacing="0" align="center"> <td><img alt="JaguarSplashPageBlkBg2 (7K)" src="JaguarSplashPageBlkBg2.jpg" width="100%" height="100%" /></td> <td><a href="store.htm"><img alt="SplashStoreBtn (5K)" src="SplashStoreBtn.jpg" width="100%" height="100%" border="0" /></td> <td><a href="consulting.htm"><img alt="SplashConsultingBtn (5K)" src="SplashConsultingBtn.jpg" width="100%" height="100%" border="0" /></td> <td><a href="blog.htm"><img alt="SplashBlogBtn (3K)" src="SplashBlogBtn.jpg" width="100%" height="100%" border="0" /></td> <td><a href="tv.htm"><img alt="SplashTVBtn (2K)" src="SplashTVBtn.jpg" width="100%" height="100%" border="0" /></td> </tr> </table> </div> </body> </html> 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 I have a jQuery plugin on my website called Facebox and it for some apparent reason when the div opens up in a small pop up window like Facebook it shows my background image of my content div. I have been working all day trying to fix this issue. When I take out the background-image from "content" div i dont have this problem but I need my content background-image to stay where it currently is. Here is the code and an example... anyone know how I can fix this? Thank HTML Code: <div class="content">
<p> <a href="#info" rel="facebox">View the 'info' div in the Facebox</a> </p>
<div id="info" style="display:none;">
<p>Hey, I'm the 'info' div!
I look like this:</p>
</div>
</div
CSS FOR CONTENT DIV IN A SEPERATE STYLESHEET FROM FACEBOX CSS Code: .content {
width: 640px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/_backgrounds/homepage_content.jpg);
background-repeat: no-repeat;
position:relative
}
CSS FOR FACEBOX PLUGIN Code: #facebox .b {
background:url(/facebox/b.png);
}
#facebox .tl {
background:url(/facebox/tl.png);
}
#facebox .tr {
background:url(/facebox/tr.png);
}
#facebox .bl {
background:url(/facebox/bl.png);
}
#facebox .br {
background:url(/facebox/br.png);
}
#facebox {
position: absolute;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}
#facebox .popup {
position: relative;
}
#facebox table {
border-collapse: collapse;
}
#facebox td {
border-bottom: 0;
padding: 0;
}
#facebox .body {
padding: 10px;
background: #fff;
width: 370px;
}
#facebox .loading {
text-align: center;
}
#facebox .image {
text-align: center;
}
#facebox img {
border: 0;
margin: 0;
}
#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 10px;
text-align: right;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}
#facebox_overlay {
position: fixed;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.facebox_hide {
z-index:-100;
}
.facebox_overlayBG {
background-color: #000;
z-index: 99;
}
* html #facebox_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
|
|||||||