Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css to tile image along x.... 1

Status
Not open for further replies.
Yogi39

Yogi39

Technical User
Jun 20, 2001
273
CA
I'm already using a tile for the background of my body.
I need to also tile an image from top left to top right(x axis) to "complete" or extend a logo that is placed top center of my page with a lower z- index that the image to be tiled.
Can this be acomplished using css ?
Code: 
top center logo css :
#logo {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1
}
body css:
background-image: url('images/st.gif');

What would the x-axis tile css be for my filler to the logo ?
 
Sort by date Sort by votes
Yogi,

Try this:

Code: 
#logo
{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
	background-image:url(yourimage.gif);
	background-repeat:repeat-x;
}

Hope this helps!

Dan
 
Upvote 0 Downvote
Thanks Dan, .....

I'm using 3 images on my page.

1: tile.gif is a full body tile.

2: logo.gif is top center

3: is a logo_tile wich I would like to extend the logo.gif to reach both sides of the body...to be tiled along the x-axis underneath the logo.gif...

can this be done ?
 
Upvote 0 Downvote

Sure...

Have your body set up with its own background image (tile.gif) - I believe you have this already?

Then setup a DIV to cross the entire top. Set the background image here to be your tile GIF, and use the repeat-x CSS I gave earlier.

Inside that top DIV, have another DIV with the dimensions of your logo, centred in the existing DIV.

That should (in theory) do the trick.

Dan
 
Upvote 0 Downvote
Try this. I have used .png instead of .gif so you'll have to replace that and fine tune the positioning a bit. But there is a main tile, a logo and a tile behind the logo.

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
&quot;<html xmlns=&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>
<head>
<title>Background Tile</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; />
<style type=&quot;text/css&quot;>
body {
background-image: url('tile.png');
}
#logo {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
background-image: url('logobg.png');
background-repeat: repeat-x;
background-position: center;
}
</style></head>
<body>
<div id=&quot;logo&quot;>
<image src=&quot;logo.png&quot; />
<p>This is the logo part. You could put an image here and the x-tiled image would appear behind.</p>
</div>
</body>
</html>

Cheers, Faded
 
Upvote 0 Downvote
Code: 
CSS:
#logo {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1
}

#logotile {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 2;
	background-image: url('images/vvs_tile.gif');
    background-repeat: repeat-x;
}
HTML:
<div id=&quot;logo&quot;>
  <img src=&quot;images/banner.gif&quot; alt=&quot;Pastels Logo&quot; width=&quot;720&quot; height=&quot;118&quot; /><div id=&quot;logotile&quot;>
  <img src=&quot;images/banner.gif&quot; alt=&quot;Pastels Logo&quot; width=&quot;11&quot; height=&quot;118&quot; /></div></div>
 
Upvote 0 Downvote
Thanks, tried your code Faded...but the the backgroung tile works, the main logo works but the x-axis tile does not...
 
Upvote 0 Downvote
This should be just what you're after. Works a treat for me:

Code: 
<html>
<head>
<style type=&quot;text/css&quot;>
body
{
	background-image: url('images/tile.gif');
	padding: 0px;
	margin: 0px;
}
#logobg
{
	background-image: url('images/logotile.gif');
	background-repeat: repeat-x;
	text-align: center;
}
#logoimage
{
	width: 100px;
	height: 50px;
	background-image: url('images/logo.gif');
	background-repeat: repeat-x;
	background-position: center;
}
</style>
</head>

<body>
<div id=&quot;logobg&quot;><div id=&quot;logoimage&quot;></div></div>
</body>
</html>

Hope this helps!

Dan
 
Upvote 0 Downvote
THanks Dan ...works like a charm..:)
 
Upvote 0 Downvote
Works in IE works partially in NS7 the logo is left alinged not centered.....
 
Upvote 0 Downvote

The following works in IE, NN, and Opera... The main logo image has been moved out of style sheets:

Code: 
<html>
<head>
<style type=&quot;text/css&quot;>
body
{
	background-image: url('images/tile.gif');
	padding: 0px;
	margin: 0px;
}
#logobg
{
	background-image: url('images/logotile.gif');
	background-repeat: repeat-x;
}
#logoimage
{
	background-color:#00ff00;
	text-align:center;
}
</style>
</head>

<body>
<div id=&quot;logobg&quot;><div id=&quot;logoimage&quot;><img src=&quot;images/logo.gif&quot; width=&quot;100&quot; height=&quot;50&quot; border=&quot;0&quot;></div></div>
</body>
</html>

Hope this helps!

Dan

 
Upvote 0 Downvote
Wow...works great...however had to remove the color from:
#logoimage
{
background-color:;
text-align:center;
}

Thanks..!
 
Upvote 0 Downvote
No Problem...*lol*
Thanks again !
 
Upvote 0 Downvote
Actually, this is a bloated code that uses IE's horrible misunderstanding of the CSS and forces it onto other browsers. Using Dan's code, here's what to do:
Code: 
<html>
<head>
<style type=&quot;text/css&quot;>
body
{
    background-image: url('images/tile.gif');
    padding: 0px;
    margin: 0px;
}
#logobg
{
    background-image: url('images/logotile.gif');
    background-repeat: repeat-x;
    text-align: center; /* bug to accomodate IE */
}
#logoimage
{
    width: 100px;
    height: 50px;
    background-image: url('images/logo.gif');
    background-repeat: repeat-x;
    background-position: center;
    margin-left: auto; /* correct way to center, for Mozilla&Opera */
    margin-right: auto; /* correct way to center, for Mozilla&Opera */
}
</style>
</head>

<body>
<div id=&quot;logobg&quot;><div id=&quot;logoimage&quot;></div></div>
</body>
</html>
 
Upvote 0 Downvote
Thanks....
In IE works fine , However NS7 realy does not like it..:(
 
Upvote 0 Downvote
I must be missing something. Wouldn't something like this work?
[tt]
<html>
<head>
<style type=&quot;text/css&quot;>
body
{
background-image: url('images/tile.gif');
padding: 0px;
margin: 0px;
}
#logobg
{
background-image: url('images/logotile.gif');
background-repeat: repeat-x;
text-align: center; /* to centre the logo */
}
</style>
</head>

<body>
<div id=&quot;logobg&quot;><img src=&quot;logoimage.gif&quot;></div>
</body>
</html>
[/tt]

-- Chris Hunt
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
319
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
338
pmonett
pmonett
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
349
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
268
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top