feytus Posted June 8, 2009 Share Posted June 8, 2009 Hello people! I'm designing a webpage now, and I want the far right side of it to have background that repeats both x and y, but only to the right of the entire site. If you see this example of how it looks now, you can see the background image being placed to the right of the navigation bar. As you can see, it repeats itself vertically, but as soon as I set the repeat to both x and y, the image will appear all over the background, starting from the top left hand corner. I've put the css in the body-tag of the entire site. Don't know if this is smart or not. Is there a way to place this background where I want it from within the body-css tag, or should I make a new element to the right, and place it in there? How do I then set it to be a background element, and how can I set so that it displays the image no matter how big you expand your browser window?I hope that made sense. I'm a noob at this. Any suggestions? All suggestions will be much appreciated! Link to comment Share on other sites More sharing options...
cedric Posted June 8, 2009 Share Posted June 8, 2009 I'm fearly new aswell.My first idea is to put evrything in a wrapper <div> and work with z-index.It would look like this then<body style="background-image:url(''); repeat:repeat x&y; position:relative; z-index: 1" ><div id="wrapper" style="everything you have in the body-css now+ position:relative; z-index: 2"></div></body>I'm not 100% sure it will work but I would give it a try. Link to comment Share on other sites More sharing options...
feytus Posted June 8, 2009 Author Share Posted June 8, 2009 It doesn't really work, as the front element still doesn't cover all the area where the background shouldn't be (like; the navbar doesn't go all the way down to the bottom, so the background image still appears under it). It sounded like a good idea, but didn't really work. Thanks a lot for your try though, much appreciated! :)Any other tips? Link to comment Share on other sites More sharing options...
cedric Posted June 8, 2009 Share Posted June 8, 2009 could you link to the site so we can view the code and test it?Or post the code here? Link to comment Share on other sites More sharing options...
feytus Posted June 8, 2009 Author Share Posted June 8, 2009 Sure thing. Here it is;http://www.marsmelons.com/textpattern/ Link to comment Share on other sites More sharing options...
cedric Posted June 8, 2009 Share Posted June 8, 2009 Im sorry, I only found to put a div next to the menu with background but I dont know how to make the divs width adapt to the page. Link to comment Share on other sites More sharing options...
feytus Posted June 9, 2009 Author Share Posted June 9, 2009 Yeah, me neither. But thanks for the attempt, man, much appreciated! Link to comment Share on other sites More sharing options...
cedric Posted June 9, 2009 Share Posted June 9, 2009 maybe this can help you http://www.webmasterworld.com/forum83/200.htm Link to comment Share on other sites More sharing options...
roundcorners Posted June 9, 2009 Share Posted June 9, 2009 create a div and position in to the right. Give it a width and use background:transparent url(images/image.gif) repeat 0 0; Link to comment Share on other sites More sharing options...
Ingolme Posted June 9, 2009 Share Posted June 9, 2009 Put the background image on both the html and body elements, rather than just the body: html,body{ margin: 0; padding: 0; font-family: Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif; color: #000; background-color: #fbf1a8; background-image:url('http://www.marsmelons.com/textpattern/images/10.jpg'); background-attachment:fixed;} And you possibly will get better results with a Strict DOCTYPE rather than a Transitional one. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2009 Share Posted June 9, 2009 you require css layout like this for this to work<!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=iso-8859-1" /><title>Untitled Document</title><style type="text/css">body { margin: 0px; background-color: #fbf1a8;}.col1 { width: 313px; float:left;}.col2 { background-color: #fbf1a8; width: 508px; float:left; text-align:justify; padding-left: 15px;}.col3 { padding: 0px; background-color: #bebe8a; border: 3px solid #fff; width: 157px; float:left;}.outer_col2_col3_container {position: relative; z-index: 0; width: 690px; float:left; height: 100%; background-image:url(10.jpg); background-position: 40px 0px; background-attachment:fixed;} ?*IS FIXED BG REALLY REQUIRED?*/</style></head><body><div style="text-align:center;"><div align="center" style="width: 100%; display:inline-table;"> <div class="col1"> <div id="sidebar-1"><img src="/textpattern/images/7.jpg" width="313" height="640" alt="---" title="" /> </div> </div> <div class="outer_col2_col3_container"> <div class="col2" style=""> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> <p>ENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT HEREENTER CONTENT</p> </div> <div class="col3"> <div id="sidebar-2"><img src="/textpattern/images/5.jpg" width="150" height="70" alt="---" title="" /> <ul class="section_list"> <li> » <a href="http://www.marsmelons.com/textpattern/">Home</a> </li> <li> <a href="http://www.marsmelons.com/textpattern/about/">About</a> </li> <li> <a href="http://www.marsmelons.com/textpattern/articles/">Articles</a> </li> <li> <a href="http://www.marsmelons.com/textpattern/gallery/">Gallery</a> </li> <li> <a href="http://www.marsmelons.com/textpattern/records/">Records</a> </li></ul> <form method="get" action="http://www.marsmelons.com/textpattern/"><p>Search<br /><input type="text" value="" name="q" size="15" /></p></form> <p><a href="http://www.marsmelons.com/textpattern/rss/" title="RSS Feed">RSS</a> / <a href="http://www.marsmelons.com/textpattern/atom/" title="Atom Feed">Atom</a></p><img src="/textpattern/images/6.jpg" width="150" height="70" align="bottom" alt="---" title="" /> </div> </div> </div></div></div></body></html> Link to comment Share on other sites More sharing options...
feytus Posted June 12, 2009 Author Share Posted June 12, 2009 Thanks guys! I tried it out, but came to the conclusion that it didn't look so cool afterall. But many, many thanks for your replies, you are stars! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.