Minimeallolla Posted February 17, 2011 Share Posted February 17, 2011 <style type="text/css"> body { margin-left:25%; background:#5d9ab2 url(zoidberg_dance_animate.gif) no-repeat top left; margin-right:25%; background:#5d9ab2 url(zoidberg_dance_animate.gif) no-repeat top right; } </style> How can I do something like this? have 2 gif animations and a plain colour as the set background? The two gif animations on seperate sides of the page. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted February 17, 2011 Share Posted February 17, 2011 hi mini, i just commented on a post, but seeying this gives me a little feeling you should maybe start reading the very basics of css again. The thing is that what you are now doing is you give body 2 sets of properties simple said. but the first gets overridden by the latter (last) What you are trying to do is place an image left and an image right on the screen i guess. but to each element you can only assign 1 image so you should do it differently. maybe the folowing can help you out a bit. but i can reccomend an external style sheet": <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <style type="text/css"> body{background:#5d9ab2;} #wrapper{ width:966px;/* set a width you like in this case 6 pixels extra come from borders of left mid right*/ margin:0 auto; /*center this div */ border:1px solid red; /*just to show where it is*/ } #left{ width:150px; min-height: 500px;/* a minimal to show the backgournd image */ background:url(images/urlzoidberg_dance_animate.gif) no-repeat top left; border:1px solid greenyellow; } #middle{ width:660px; /* 960 - 300 of left and right */ min-height:500px; border:1px dotted yellow; } #right{width:150px; min-height: 500px; background:url(images/urlzoidberg_dance_animate.gif) no-repeat top right; border:1px solid blue; } </style> <body> <div id="wrapper"> <div id="left"></div> <div id="middle"></div> <div id="right"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted February 17, 2011 Share Posted February 17, 2011 oops i forgot to add float to left mid and right so the code should look like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <style type="text/css"> body{background:#5d9ab2;} #wrapper{ width:969px;/* set a width you like in this case 6 pixels extra come from borders of left mid right*/ margin:0 auto; /*center this div */ border:1px solid red; /*just to show where it is*/ } #left{ width:150px; min-height: 500px;/* a minimal to show the backgournd image */ background:url(images/urlzoidberg_dance_animate.gif) no-repeat top left; border:1px solid greenyellow; float:left; } #middle{ width:660px; /* 960 - 300 of left and right */ min-height:500px; border:1px dotted yellow; float:left; } #right{width:150px; min-height: 500px; background:url(images/urlzoidberg_dance_animate.gif) no-repeat top right; border:1px solid blue; float:left; } </style> <body> <div id="wrapper"> <div id="left"></div> <div id="middle"></div> <div id="right"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.