How to place 2 image banners next to each other ?

[GHOSTWRiTAZ]

Hey Guys,

Need some of yours expertise advise, hope that someone can help.
What is the right code to have 2 image banners next to eachother ?

This is the code below :

Code: Select all

html, body {
	margin: 0;
	padding: 0;
	text-align: center;
	height: 100%;
	background: #252525;
	font-size: 100%;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #7C7C7C;
	font-size: 10px;
}

#container {
	height: 100%;
	background: #1C1C1C;
	width: 97%;
	text-align: left;
	border: 0;
	padding: 0;
	margin: 0 auto;
	min-width: 900px;
}

#banner {
	background: #090909 url('{T_THEME_PATH}/images/header.png') top center no-repeat; 
	height: 250px;
	text-align: center;
}

#header {
	background: url('{T_THEME_PATH}/images/top_bg.jpg') top center repeat; 
	height: 134px;
	text-align: center;
}

What I want is to place 2 banners next to each other so I'll have a header.png and header2.png !

Code: Select all

#banner {
	background: #090909 url('{T_THEME_PATH}/images/header.png') top center no-repeat; 
	height: 250px;
	text-align: center;

Using v3.0.7-PL1

Best Regards,

[cisco007]

if you are talking about in the header take a look at this maybe this might help!

http://www.phpbb.com/kb/article/add-an- ... 5e7843935a

[GHOSTWRiTAZ]

if you are talking about in the header take a look at this maybe this might help!

http://www.phpbb.com/kb/article/add-an- ... 5e7843935a

Hey Cisco, tnx for your quick reply m8, appreciate this.

Guess the knowledge tutorial is talking about something else :

Tried this but without any luck :

Code: Select all

#banner {
	background: #090909 url('{T_THEME_PATH}/images/header.png') top left no-repeat;
        background: #090909 url('{T_THEME_PATH}/images/header2.png') top center no-repeat;
        height: 250px;
	text-align: center;

Example at this site banner looks like this :



and I want 2 banner/images next to each other so the result would look like this :



hope you can help me out m8, tnx..

[cisco007]

that is what that link that i gave you to read does, read the whole thing carefully! Did you read it? did you try it?
what were the results!?

[GHOSTWRiTAZ]

that is what that link that i gave you to read does, read the whole thing carefully! Did you read it? did you try it?
what were the results!?

Yes m8, tried it and no results at all

[KukY13]

Try this:

Code: Select all

#banner{background: url(banner1.png) left no-repeat, url(banner2.png) right no-repeat;}

[GHOSTWRiTAZ]

Try this:

Code: Select all

#banner{background: url(banner1.png) left no-repeat, url(banner2.png) right no-repeat;}

Thanks KukY13, but unfortunally without any luck

[KukY13]

Well, CSS 2 doesn't support multiple background images, and in CSS 3 it is done that way.

So, curently I see no other way of doing this but by placing another <div> inside the main one:
CSS:

Code: Select all

#banner1{
width:100%;
heigth:200px;
margin: 0px;
padding: 0px;
background: url(banner1.png) left no-repeat;}

#banner2{
width:50%;
heigth:200px;
margin: 0px;
padding: 0px;
background: url(banner2.png) right no-repeat;
float: rigth;}

HTML:

Code: Select all

<div id="banner1"><div id="banner2"></div></div>

Hmm... I have a feeling I made an incredibly stupid mistake up there and I left something out...

[Steve]

why not just use a table?
example:

Code: Select all

<table>
<tr>
  <td>image1 here</td>
  <td>another image here!</td>
  <td>and another image ?</td>
</tr>
</table>