Multiple Background Images

8 replies [Last post]

Wed, 2010-08-18 04:59

Milan

Offline

newbie

Timezone: GMT+2

Joined: 2010-08-18

Posts: 6

Points: 7

Hey.

First off I wanna say that I'm pretty new with CSS, HTML and whatnot.
I've been working on editing a Forums Skin in the CSS lately.

This is what my Forums look like at the moment, http://outragetest.b1.jcink.com/ ,
and that is almost EXACTLY what I want them to look like.
The only problem is, if I view them in Internet Explorer it looks messed up, I only see the box the content is in (wich is a background image ... ) repeating from the left to the right, instead of it being in the middle with the repeating background pattern behind it.

I also know why this happens, probably because IE doesn't support CSS3, so what I am looking for is a way to have multiple background images without CSS3.
I've been desperately googling and browsing forums the whole day, I read alot of stuff about "divs", and that you can somehow use them to have multiple backgrounds, but I didn't really get smart of that.

Actually I don't even know if I had to use multiple backgrounds to archieve the effect I want to archieve.
I want to have a pattern background, and I want the content to be in a box.
It's just like these Forums are made, the content is in a box and there's pattern background.
If that's usually done otherwise, and I don't even have to use multiple backgrounds please help me and tell me how to do so!
Keep in mind I'm new with all this coding stuff, so if you tell me to add something please tell me where to add it, I hope you get my point.

Here's my CSS:

/*  
 * Author: Rikki Tissier, original IP.Board CSS by James Mathias
 * Copyright: 2005 IPS, Inc, all rights reserved 
 *
 * Converted to JFB By Gunblaza of GProjects
 */
 
html { overflow-x: auto; } 
 
/* The body, general text color and background colors */
 
BODY { 
	font-family: Arial, Verdana, Tahoma, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif;
	font-size: 12px;
	line-height: 135%;
	margin: 0px auto 0px auto;
	padding: 0px; /* required for Opera to have 0 margin */
	text-align: center; /* centers board in MSIE */
	color: #000;
        background: #000;
background-image: url(<a href="http://i33.tinypic.com/352g7wh.png" rel="nofollow">http://i33.tinypic.com/352g7wh.png</a>), url(<a href="http://i34.tinypic.com/10pt4r6.gif" rel="nofollow">http://i34.tinypic.com/10pt4r6.gif</a>);
background-position: 50% 0%, 50% 0%;
background-origin: border-box, content-box;
background-repeat: no-repeat, repeat;
background-attachment: fixed;
	width: 900px;
}
/* Tables */
table {
cell-spacing: 0px;
border-spacing:0px;
padding:0;
*border-collapse: expression('separate', cellSpacing = '0px');
}
TABLE, TR, TD {
	background: transparent;
	color: #000;
	font-size: 12px;
	line-height: 135%;
}
 
/* Board Width */
#ipbwrapper { 
	margin: 0px auto 0px auto;
	text-align: left;
        width: 100%;
}
 
/* Link Colors */
a:link,
a:visited,
a:active{
	background: transparent;
	color: #000;
	text-decoration: underline;
        outline: none;
}
 
a:hover{
	background: transparent;
        color: #000;
}
 
 
 
/* Calendar style */
#calendarname { font-size:22px; font-weight:bold; }
#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px; }
 
/* Profile stuff */
#profilename { font-size:28px; font-weight:bold; }
#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg   { text-align:center; margin-top:15px } 
 
 
/* UserCP/My Controls styles */
#ucpmenu{
width:22%;
}
#ucpcontent { 
	background-color: #F5F9FD; 
	border:1px solid #345487;
	line-height:150%; width:auto;
}
#ucpcontent p  { padding:10px;margin:0px; }
 
#ucpmenu,
#ucpcontent{ 
	background: #f3f3f3;
	border: 1px solid #c4c4c4;
	padding: 1px;
	line-height: 150%;
}
 
#ucpmenu p{ 
	margin: 0; 
	padding: 2px 5px 6px 9px;
}
 
#ucpmenu a:link, 
#ucpmenu a:active, 
#ucpmenu a:visited{ 
	text-decoration: none; 
}
 
#ucpcontent{ 
	width: auto;
}
 
#ucpcontent p{ 
	margin: 0;
	padding: 10px;
}
 
/*header stuff*/
#logo{ 
	height: 150;
	margin: 0px -26px 0px -25px;
	padding: 0;
	text-align: middle;
        background: transparent;
        border-top:0px solid #212832;
        background-image: url(<a href="http://i34.tinypic.com/10pt4r6.gif" rel="nofollow">http://i34.tinypic.com/10pt4r6.gif</a>);
background-position: 50% 0%;
 
}
 
 
#menu{ 
	margin: 0px -26px 0px -25px;
	height: 30px;
	text-align: right;
	background: #804C66;
	color: #000;
}
 
	#submenu_left a {
		float: left;
	}
 
	#submenu_right a {
		float: right;
	}
 
	#menu a {
		display: block;
		padding: 7px;
		text-decoration: none;
                color: #000;
	}
 
	#menu a:hover {
		background-color: #c5c7ca;
		color: #000;
         }
 
 
.userbar { 
	height: 30px;
	clear: both;
	font-size: 11px;
	font-weight: bold; 
	text-align: right;
        margin: 0px -26px 0px -25px;
}
 
.userbar_left a 
{
float: left;
}
.userbar_right a 
{
float: right;
}
 
.userbar.user {
	background: #B87FA9;
	border-bottom: 1px solid #ced5e0;
}
.userbar.guest {
	background: #B87FA9;
	border-bottom: 1px solid #d1a9a9;
}
 
.userbar a 
{
display: block;
padding: 7px;
text-decoration: none;
}
 
.guest a:hover 
{
background-color: #fceaea;
}
 
.user a:hover
{
background-color: #ebf0f7;
}
 
/* hide */
#logostrip { 
display:none;
}
#submenu   {
display:none;
}
 
/* User links menu (ex: Messages  / View new posts / etc ) */
#userlinks { display:none;}
#navstrip{ 
	font-size: 12px;
	font-weight: bold;
	margin: 0;
	padding: 5px 0px 0px 0px; 
}
 
#navstrip a:link, 
#navstrip  a:visited{ 
	text-decoration: none;
}
 
#navstrip a:hover, 
#navstrip a:active{
 
}
 
/* Topic and post related styles */
 
 
.normalname
{
	text-align:left;
	padding:4px;
	font-weight:bold;
}
 
 
.normalname a:link,
.normalname a:visited
{ 
	text-decoration: none;
	-moz-outline: none;
}
 
 
.unreg { font-size: 11px; font-weight: bold; color: #000; }
.post_head {
	background: #cfd6e1;
	color: #000;
}
 
.post_head {
        background: #cfd6e1;
        color: #000;
        border: 0;
}
.post1{
	background: #f0f0f0;
}
 
.post2{
	background: #eff1f3;
}
 
 
.postdetails{ 
	font-size: 11px;
}
 
.postcolor{ 
	font-size: 13px; 
 
}
 
.postlinksbar { 
	padding:3px;margin-top:1px; font-size:10px; 
	border-right:1px solid #F5F9FD;
	border-left:1px solid #F5F9FD;
	background-color: #C2CFDF; 
}
 
.signature{  
	background: transparent;
	color: #737373; 
	font-size: 10px;
	line-height: 150%;
}
 
/* Global general table/div row styles */
.row2{ 
	background: #FFF; 
}
 
.row4,.row3,.row1{ 
	background: #FFF; 
}
 
table .row2,
table .row4,
table .row3,
table .row1 {
border-bottom: 1px solid #dcdcdc;
}
 
 
.darkrow1,
.darkrow3,
div.darkrow2 {
	background: #661552;
	color: #404957; 
	border-top: 1px solid #a8b1bd;
}
th.darkrow1 { text-align:left; }
.darkrow2,
div.darkrow1,
.catend { 
	font-size: 1px;
	background: #661552;
	color: #000;
}
.catend{
height:5px;
}
div.darkrow1 {
padding:2px;
}
div.darkrow2
{
        font-size:11px;
}
.hlight { background-color: #DFE6EF }
.dlight { background-color: #EEF2F7 }
 
/* Top table bars / gradient holders */
 
.maintitle {
	font-size: 13px;
	font-weight: bold; 
	margin: 0px;
	padding: 8px 8px 8px 15px;
	background: #997499;
	color: #000;
}
 
.maintitle a:link, 
.maintitle  a:visited, 
.maintitle  a:active 
{
	background: transparent;
	text-decoration: none;
        color: #00000;
 }
.maintitle a:hover 
{ 
		color: #e9eef4;
		border-bottom: 1px solid #e9eef4;
}
 
/* The bar directly below the maintitles */
.titlemedium,
.postlinksbar,
.caldate { 
	font-size: 12px;
	font-weight: bold;
	margin: 0; 
	padding: 5px; 
	background: #F5F5F5;
	border-bottom: 1px solid #9aa4b1;
	color: #000;
 }
.titlemedium {
        border-right: 1px dotted #b0bbcd !important;
}
 
 
.titlemedium  a:link, 
.titlemedium  a:visited, 
.titlemedium  a:active,
.postlinksbar  a:link, 
.postlinksbar  a:visited, 
.postlinksbar  a:active { 
	text-decoration: none;
	color: #464c55;
        border-bottom: 1px dotted #464c55;
}
 
.titlemedium a:hover,
.postlinksbar a:hover
{
border-bottom: 1px solid #464c55;
}
/* Forum borders */
.tableborder { 
	background: #FFF;
	padding: 1px; 
	margin: 0px; 
	border: 1px solid #c4c4c4;
}
.plainborder,
.tablefill,
.tablepad{ 
	background: #f5f5f5;
	border: 1px solid #c4c4c4;
}
.tablebasic {
width:100%;
}
.tablefill,
.tablepad{ 
	padding: 6px;  
}
 
.tablepad{ 
	border: 0 !important;
}
 
.wrapmini{ 
	float: left;
	line-height: 1.5em;
	width: 15%;
}
 
 
.pagelinks{
	float: left;
	line-height: 1.2em;
	width: 35%;
}
 
.desc{ 
	font-size: 11px; 
        color: #434951;
}
 
.edit{ 
	font-size: 9px;
}
 
.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }
 
/* QUOTE and CODE BBCode boxes */
 
#QUOTE { 
	white-space:normal; 
	font-family: Verdana, Arial; 
	font-size: 11px; 
	color: #465584; 
	background-color: #FAFCFE; 
	border: 0px; 
	padding:2px;
	border:1px solid #576984; margin-top:2px; 
}
 
#CODE  { 
	white-space:normal; 
	font-family: Courier, Courier New, Verdana, Arial;  
	font-size: 11px; 
	color: #465584; 
	background-color: #FAFCFE; 
	border: 0px; 
	padding:2px;
	border:1px solid #576984; margin-top:2px; 
}
 
/* Form related styles */
 
form       { display:inline; }
label      { cursor:pointer; }
fieldset.search { padding:6px; line-height:150% }
 
input,
textarea,
select{
	font-family: verdana, helvetica, sans-serif;
	font-size: 11px;
	margin: 5px;
	padding: 2px;
	vertical-align: middle;
}
 
select
{
	margin: 0px;
}
 
optgroup option{
	font-family: verdana, helvetica, sans-serif;
	font-size: 12px;
}
 
.codebuttons{ 
	font-family: Verdana, Helvetica, Sans-Serif; 
	font-size: 10px; 
	vertical-align: middle;
	margin:2px;
}
 
.textarea,
.searchinput,
.forminput,
.gobutton{
	font-family: Verdana, Helvetica, Sans-Serif;
	font-size: 11px;
	padding: 2px;
	vertical-align: middle;
}
 
.radiobutton,
.checkbox,
.helpbox { 
	border: 0;
	vertical-align: middle;
	background: transparent;
}
 
 
input,
textarea,
select,
.textarea,
.searchinput,
.forminput,
.gobutton {
	background: #FFF;
	border: 1px solid #6a7382;
	color: #000;
}
 
.thin{
	border: 1px solid #FFF;
	border-left: 0;
	border-right: 0;
	line-height: 150%;
	margin: 2px 0 2px 0;
	padding: 6px 0 6px 0;
}
 
.thin a { text-decoration:none; }
 
/* More form/general table styles, left/right/top pads */
 
.pformstrip,
.activeuserstrip{
	background: #dcdcdc;
	border: 1px solid #9FB9D4; 
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	font-weight: normal;
	border: 0;
	color: #474747;
	font-weight: bold;
	padding: 5px;
}
 
 
.pformleft,
.pformleftw,
.pformright{
	border-left: 0;
	font-weight: bold;
	margin: 1px 0 0 0;
	padding: 6px;
	background:#F5F9FD;
	border-bottom: 1px solid #dcdcdc;
width:25%;
}
 
.pformleft,
.pformleftw {
	background-color: #e4e6e9;
}
 
.pformright {
	background-color: #eff1f3;
}
 
.pformleftw,
.pformright{
width:40%;
}
.pformright{
	border-right: 0px;
	font-weight: normal;
	width: auto;
} 
 
 
 
 
/* The copyright. Removing or hiding it is against Terms of Service */
.copyright{ 
	font-size: 11px; 
	margin: 0 0 5px 0;
	padding: 8px;
}
 
 
/* General image styles */
img        { vertical-align:middle; border:0px }
img.attach { border:2px outset #EEF2F7;padding:2px }
 
/* Misc */
 
.purple { color:purple;font-weight:bold }
.red    { color:red;font-weight:bold }
.green  { color:green;font-weight:bold }
.blue   { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }
 
.warngood { color:green }
.warnbad  { color:red }
 
.right {
float:right;
}
.left { 
float:left;
}
.center {
text-align:center;
}
 
input[type=submit], 
.click
{
cursor:pointer;
cursor:hand;
}
 
.hide {
display:none;
}
/* Tabs */
div.opentab
{
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	padding:8px;
	float:left;
	width:auto;
	margin-top:1px;
	font-size:11px;
	border-color: #262d35;
	background-color:#303b4a;
	color:#FFFFFF;
        cursor:hand;
        cursor:pointer;
}
 
.closedtab
{
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	padding:8px;
	float: left;
	width: auto;
	margin-top:1px;
	font-size:11px;
	border-color: #939fae;
	background-color: #b4c1d3;
	color: #2d2d2d;
        cursor:hand;
        cursor:pointer;
}
 
div.opentab a:link, 
div.opentab a:visited, 
div.opentab a:active
{
text-decoration:none;
color: #fff;
}
 
.closedtab a:link, 
.closedtab a:visited, 
.closedtab a:active
{
	text-decoration:none;
color: #2d2d2d;
 
}
 
.toplinks{
	background: transparent;
	color: #565656;
	margin: 0;
	padding: 0 0 5px 0;
	text-align: right;
}
 
.toplinks span{
	color: #565656;
	font-size: 11px;
	font-weight: bold;
	margin: 0;
	padding: 5px;
}
 
.toplinks a {
	color: #686868;
}
 
.wrapmini{
	background: #eff1f3;
	border: 3px solid #d7d7d7;
	margin: 2px;
	padding: 0px;
	font-size: 11px; 
        color: #434951;
}
 
/*drop downs*/
.dropdown
{
   background: #f4f4f4;
   border: 1px solid #989898;
   text-align:left;
   font-size:11px;
   white-space:nowrap;
}
 
 
.newslink{
	background: #eeeeee;
	margin: 0;
	color: #222;
	font-size: 11px;
	padding: 5px 5px 5px 10px;
        margin-bottom:15px;
}
 
 #myabox{  
 display:none;
 top:0;
 left:0;
 position:fixed;  
 width:400px;
 z-index:3;  
 text-align:left; 
 }
.mya-back
{
	background: #eaeaea;
	margin:1px;
	padding: 1px;
}
 
 
.mya-contentbox-back
{
	background-color: #cacaca;
	padding: 6px;
}
 
.mya-contentbox
{
	height: auto;
	background-color: #f7f7f7;
	border: 1px solid #8e8e8e;
	line-height: 140%;
	padding: 8px;
	margin-bottom: 1px;
}
.mya-info
{
 
	border-right: 1px solid #eee;
}
.mya-tabwrap
{
	height: 34px;
	margin:0px;
	padding:0px;
}
 
.mya-row {
	padding: 8px;
	white-space: nowrap;
	border-bottom: 1px solid #eee;
	color:  #000000;
	font-weight: normal;
        width:auto;
        height:auto;
}
 
/* overlay */
#overlay
{
position:fixed;
left:0;
top:0;
z-index:2;
background-color:#fff;
display:none;
}

And here are my "Board Wrappers" - I hope it's the "HTML" you asked for, I know to add multiple backgrounds, I have to do something in there, didn't touch it yet though because I didn't know what to do.

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head> 
  <title>
    <% TITLE %>
  </title> 
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <% GENERATOR %> 
  <% CSS %> 
  <% JAVASCRIPT %> 
  <script src='http://resourceempire.com/filehosting/gunblaza/library/qtip.js'>
  </script>
</head> 
<body>
<div id="logo">
  <a href='index.php?'>
    <{LOGO}>
  </a>
</div>
<div id="menu">
  <div id='submenu_left'></div>
  <div id='submenu_right'>
    <a href='index.php?act=calendar'>Calendar</a>
    <a href='#' menu='searchmenu'>Search</a>
    <a href='index.php?act=Help'>Help</a>
    <a href='index.php?act=Members'>Members</a>
    <a href='index.php'>Forums</a>
  </div>
</div>
 
<div id='searchmenu' style='display:none;width:210px'>
  <div class='dropdown' style='text-align:center;padding:4px;'>
    <form action="index.php?act=Search&CODE=01" method="post">
      <input type="hidden" name="forums" value="all">
      <input class="forminput" type="text" size="25" name="keywords">
      <input class="forminput" type="submit" value="GO"></form>
  <div style='text-align:right;'>
    <a href="index.php?act=Search" style='text-decoration:none;'>More Search Options</a>
  </div>
  </div>
</div>
 
 
<div id='guest' class="userbar guest" style='display:none;'>
  <div class='userbar_left'>
    <a href="index.php?act=Login&CODE=00">Log In</a>
    <a href="index.php?act=Reg&CODE=00">Register New Account</a>
  </div>
  <div class='userbar_right'>
    <a href='index.php?act=Reg&CODE=reval'>Resend Email Validation</a>
  </div>
</div>
 
<div id='user' class="userbar user" style='display:none;'>
  <div class='userbar_left'>
    <a href="index.php?showuser=<!-- |id| -->">Logged in as <!-- |name| --></a>
    <a href="index.php?act=modcp" id='modcp' style='display:none;'>Mod CP</a>
    <a href="admin.php" target="_blank" id='admincp' style='display:none;'>Admin CP</a>
  </div>
<div class='userbar_right'>
  <a href="index.php?act=Login&CODE=03&key=<!-- |auth_key| -->">Log Out</a>
  <a href='#' onclick='mya.open("#mya1","overlay");return false;'>Assistant</a>
  <a href='index.php?act=Msg&CODE=01'>Messenger(<!-- |new_msg| -->)</a>
  <a href="javascript:window.open('index.php?showuser=<!-- |id| -->&CODE=friends','Friends','width=620,height=460,resizable=yes,scrollbars=yes');void(0);">Friends</a>
  <a href="index.php?act=UserCP&CODE=00" title="Edit my settings, such as signature, avatar and more...">Settings</a>
</div>
</div>
 
 
<div id="ipbwrapper">
  <% BOARD HEADER %> 
  <% NAVIGATION %>
  <% BOARD %>
  <% STATS %>
 
 
  <% COPYRIGHT %>
  <div class='copyright' align='center'>
    <span>IP.Board Pro Skin Author: Rikki Tissier of <a href='http://invisionpower.com'>IPS</a></span>
  </div>
 
<script>
new_msg ='<!-- |new_msg| -->';
username ='<!-- |name| -->';
userid ='<!-- |id| -->';
msg_tot ='<!-- |msg_total| -->';
g_id = '<!-- |g_id| -->';
g_is_mod = '<!-- |g_is_supmod| -->';
g_admin = '<!-- |g_access_cp| -->';
</script>
<script src='http://resourceempire.com/filehosting/gunblaza/mods/assist.js'></script>
<script src='http://resourceempire.com/filehosting/gunblaza/mods/ipro.js'></script>
</div>
 
</body> 
</html>

Tags:

Beginners CSS Questions

Fri, 2010-08-20 00:22

Milan

Offline

newbie

Timezone: GMT+2

Joined: 2010-08-18

Posts: 6

Points: 7

Can no one help me?

Can no one help me? :/
Thought this was an easy one, since I was able to do in CSS3 without any knowledge about using CSS before, and almost every forum/website has a big content box with a background pattern.

Fri, 2010-08-20 04:10

Tony

Offline

Moderator

Timezone: GMT+10

Joined: 2003-03-12

Posts: 3705

Points: 1115

Can you provide a screenshot

Can you provide a screenshot of what you see in IE6.
I can't understand what background image is repeating.

Your question may have already been answered, search and read before you ask.

Fri, 2010-08-20 18:12

Milan

Offline

newbie

Timezone: GMT+2

Joined: 2010-08-18

Posts: 6

Points: 7

OK. I have 2 background

OK.

I have 2 background images.
One is the background pattern, it's behind everything else.
Then, the other background image is my content box, I didn't know how to make one so I just made a big white content box in Photoshop and used it as background image, and made it look like a content box.

My problem is that the method I used to use multiple background images is CSS3, wich IE doesn't support.

So I have to know:
- How do I use multiple background images without CSS3?
or
- How do I create a content box that looks like the background image I made?

I know multiple background images are possibly done with "div"s, but I have no clue how to use a "div container", I read serveral guides that provided some code, but none of these explained the code or told me where to add the code, what it does.

in IE6 my content box (background image) repeats, but that's not relevant, it's because I made the multiple background image method in CSS3, wich IE doesn't support.

Help Please ,
Still didn't figure this out .

Sat, 2010-08-21 04:37

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

Milan wrote: Then, the other

Milan wrote:

Then, the other background image is my content box, I didn't know how to make one so I just made a big white content box in Photoshop and used it as background image, and made it look like a content box.

You're going to have to post an image of what you're trying to achieve because it's too hard to work it out from your description.

Milan wrote:

Help Please

You know that's the 'sticking tongue out' smiley, as in not being very polite, right?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Sun, 2010-08-22 11:17

Milan

Offline

newbie

Timezone: GMT+2

Joined: 2010-08-18

Posts: 6

Points: 7

Tyssen wrote: Milan

Tyssen wrote:

Milan wrote:

You're going to have to post an image of what you're trying to achieve because it's too hard to work it out from your description.

Milan wrote:

Help Please

You know that's the 'sticking tongue out' smiley, as in not being very polite, right?

I am trying to archieve this: http://outragetest.b1.jcink.com/ , so it also looks like that in IE.

To archieve that I used two background images located in the body.

The repeating background-pattern: http://i34.tinypic.com/10pt4r6.gif
The contentbox-image, not repeating, fixed in the middle: http://i33.tinypic.com/352g7wh.png

What I try to do is to have those both background images at once, I archieved this effect using CSS3, but I want to do this without CSS3.

Mon, 2010-08-23 01:35

Deuce

Offline

Guru

Timezone: GMT-6

Joined: 2005-11-20

Posts: 4416

Points: 1835

Why not give that grey

Why not give that grey background to html { background: url(<a href="http://i34.tinypic.com/10pt4r6.gif" rel="nofollow">http://i34.tinypic.com/10pt4r6.gif</a>) }

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Wed, 2010-08-25 17:59

Milan

Offline

newbie

Timezone: GMT+2

Joined: 2010-08-18

Posts: 6

Points: 7

Still can't solve this! My

Still can't solve this!

My question: How can I use more then one background-Image?

My wanted effect: I want to create a box behind the content, I am new to CSS so I had the idea to do it with a solid that has borders to the left and right repeating to y.
And have an other background pattern behind it.

I managed to get this effect using CSS3 - I didn't realize that and I want to archieve this effect without using CSS3!

So yea, either I have to know how to use more background-images at once, or if there's a way to build a content box tell me please!

Need help.

Tryed to do it with div's, but when I add an image with a div it's automatically placed between the first maintitle and the userbar.

Wed, 2010-08-25 18:46

Milan

Offline

newbie

Timezone: GMT+2

Joined: 2010-08-18

Posts: 6

Points: 7

Update: Managed to create

Update:

Managed to create images using div containers.
Also managed to change the position.

Now I tryed to positionate a div image in the middle of the screen, and make it VERY big, so it covers the whole screen.

My problem now is it covers everything, I want it behind all the content, I only want it to show left and right of my content wich has a width of 900px.

I tried to arhieve this by adding padding. (padding: 0px 450px 0px 450px;).
I thought this would remove 900px of the middle, since it's centered I thought it would uncover my content, but I thought wrong.

If anyone can help me at making a div image that covers everything but my 900px width content, please help!

Or if there's a way to make the div image behind EVERYTHING else, that would be way easier!

Multiple Background Images

Can no one help me?

Can you provide a screenshot

OK. I have 2 background

Milan wrote: Then, the other

Tyssen wrote: Milan

Why not give that grey

Still can't solve this! My

Update: Managed to create

New forum topics

User login

Navigation