I am almost finished with the theme I'm working on and I needed to know how to put the background images
This code goes into page container
background-image: url(images/bkr.gif);
background-repeat: repeat-y;
background-position: right;
after I put in this,It shows only on one side
background-image: url(images/bkl.gif);
background-repeat: repeat-y;
background-position: left;
I need the code to make it on both sides
If you only want the image to go across the top of the page container, try the following:
background: url(images/bkr.gif) repeat-x;
You can't make it like that. You have to create necessary 2 objects (like two columns), each one with a background. You can't assign 2 times the same property to an object.
Another way in order to obtain the same effect with less code, is to make a picture with the width of your container, and on the sides the pattern you like and you make a repeat-y of that single large picture.
I mean instead of doing two patterns:
@
@
@
and
@
@
@
you create one pattern like this
@---------container width--------@
@ @
@ @
You do a fixed width for the forum container. Then you background the page with a single image that's centered.
i.e.
http://www.industrialforums.com
CSS will be something like this added to your body
background: #3C4B56 url('images/industrial/main_back.jpg') repeat-y top center;
labrocca Wrote:You do a fixed width for the forum container. Then you background the page with a single image that's centered.
i.e. http://www.industrialforums.com
CSS will be something like this added to your body
background: #3C4B56 url('images/industrial/main_back.jpg') repeat-y top center;
I would like to just use 2 seperate images,whenever I change the width of the board the image fits in.and it will be harder making a new one
Then you will need to "wrap" your forum container by changing the templates header and footer. You should add divs or even a table...split it up...then add backgrounds to the left and right sides. Not nearly as easy and for an inexperienced person it will be some work.
Here is the basics.
<div id="container">
<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>
</div>
You will then use CSS to define everything.
It's late here and I'm tired to explain.
You can look at my site and view my source code and see how I resolved the same problem.
Basically with 2 divs and css you can solve your problem!
I still can't figure it out how to do this
Header:
<a name="top" id="top"></a>
<div id="bgleft">
<div id="bgright">
<div id="container">
<div id="header">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a></div>
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" />{$lang->toplinks_help}</a></li>
<li><a href="{$mybb->settings['bburl']}/downloads.php"><img src="{$theme['imgdir']}/toplinks/downloads.png" border="0" alt="{$lang->toplinks_downloads}" />{$lang->toplinks_downloads}</a></li>
<li class="rules_link"><a href="{$mybb->settings['bburl']}/misc.php?action=rules"><img src="{$theme['imgdir']}/toplinks/rules.gif" border="0" alt="" />Rules</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
<navigation>
<br class="clear" />
Additional CSS:
.bgright {
background-image: url(images/bgr.gif);
background-repeat: repeat-y;
background-position: right;
}
.bgleft {
background-image: url(images/bgl.gif);
background-repeat: repeat-y;
background-position: left;
}
As I already mentioned you have to change footer template as well.