Jump to content

Position Background Image And Repeating It


feytus
 Share

Recommended Posts

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. bgutsnitt2.jpgAs 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

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

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

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

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.

Edited by Ingolme
Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...