Aviway Posted June 26, 2009 Share Posted June 26, 2009 Hay,how can i poot 2 difrent backgrounds in one page, like that Link to comment Share on other sites More sharing options...
smerny Posted June 26, 2009 Share Posted June 26, 2009 have a background for the body of the webpage and have a background for a containing div Link to comment Share on other sites More sharing options...
Aviway Posted June 26, 2009 Author Share Posted June 26, 2009 and if the page is build with table? Link to comment Share on other sites More sharing options...
thescientist Posted June 26, 2009 Share Posted June 26, 2009 and if the page is build with table?if you have to use a table, just have the table be the content within the div with the second background. Link to comment Share on other sites More sharing options...
smerny Posted June 26, 2009 Share Posted June 26, 2009 would look something like this <body><div id="container"><table>...</table></div></body> css body { background: url(mainbg.png); }#container { background: url(secondbg.png); margin: 0 auto; } Link to comment Share on other sites More sharing options...
Aviway Posted June 26, 2009 Author Share Posted June 26, 2009 Do you mean that?: <body style="background: url('images/page_bg_top.gif') top left repeat-x;"> <div style="background: url('images/page_bg.gif') left bottom repeat;"> <table> . . . </table> </div></body> Link to comment Share on other sites More sharing options...
thescientist Posted June 26, 2009 Share Posted June 26, 2009 it's considered good practice to keep your CSS seperate from your HTML. Link to comment Share on other sites More sharing options...
Aviway Posted June 26, 2009 Author Share Posted June 26, 2009 I didnt succeed, this is the code : <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html> <head> <title> new document </title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <style>body{ background: url('images/page_bg_top.gif') top left repeat-x; margin:0 auto; }#container{ background: url('images/page_bg.gif'); }table{ margin: 15px 15px 50px 15px; border:1px solid black; }#body_bg_top{ background: transparent url('images/body_bg_top.gif') center center no-repeat; width:798px; height:100px; }#body_bg_top div{ padding-left:30px; padding-bottom:15px; color:#74712e; font-size:20px; }#body_bg_top div span{ font-size:12px; padding-left:30px; color:#000; }#body_bg{border:4px solid black; background: transparent url('images/body_bg.gif') center center repeat-y; width:798px; height:50px; }#body_bg li{ display:inline; list-style-image: url('images/arr.gif'); }a{ text-decoration:none; color:#000; }#body_bg_bot{ background: transparent url('images/body_bg_bot.jpg') center center no-repeat; width:798px; height:705px; } </style> </head> <body><div id="container"> <table border="0" cellpadding="0px" cellspacing="0px" align="center"> <tr> <td id="body_bg_top"> <div> TRANSPORT COMPANY<br> <span>We care about your cargo</span> </div> </td> </tr> <tr> <td id="body_bg"> <ul> <li><a href="">MAIN PAGE</a></li> <li><a href="">TRACKING</a></li> <li><a href="">RATES</a></li> <li><a href="">PICK UP</a></li> <li><a href="">SERVICES</a></li> <li><a href="">CONTACT US</a></li> </ul> </td> </tr> <tr> <td id="body_bg_bot"></td> </tr> </table> </div> </body></html> and this is the resoult Link to comment Share on other sites More sharing options...
smerny Posted June 26, 2009 Share Posted June 26, 2009 body{ background: url('images/page_bg_top.gif') top left repeat-x; margin:0 auto; } this is the only thing the background is getting, the other things are backgrounds within the table which is within the container div.. Link to comment Share on other sites More sharing options...
Aviway Posted June 26, 2009 Author Share Posted June 26, 2009 So why its dont work? see the picture.what should i do to make it be same as the first picture that i published? Link to comment Share on other sites More sharing options...
Aviway Posted June 26, 2009 Author Share Posted June 26, 2009 never mind i succeed Link to comment Share on other sites More sharing options...
jlhaslip Posted June 27, 2009 Share Posted June 27, 2009 What was the solution you found? Link to comment Share on other sites More sharing options...
Aviway Posted June 27, 2009 Author Share Posted June 27, 2009 <style>body{ background: url('images/page_bg.gif'); margin:0 auto; }#container{ background: url('images/page_bg_top.gif') top left repeat-x; }</style> Link to comment Share on other sites More sharing options...
Ingolme Posted June 27, 2009 Share Posted June 27, 2009 You could apply a background image to the <html> element and another one to the <body> element. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.