Banner

Sponsor

Login

Welcome Back!
Guest
Guest

Register

Lost your password?

63 users online

Tiling Background Problem

Tiling Background Problem

Forums » Web Development » Client Side - HTML/Javascript/etc. » Tiling Background Problem

Currently viewing this thread: 1 (0 members and 1 guests)

#1
Old Post August 27th, 2007 10:41 PM
Mundo

Mundo

Neverside Newbie
Status: Offline!

Tiling Background Problem

Ive made a little splash screen for my website (10 minute thing) but I cant think of a way to make the background work with CSS because its a gradient with a tiled image on it... The only way i can think is to have 2 backgrounds but obviously i cant do that... Any ideas?

Attachments:

TheMungo.jpg TheMungo.jpg (Download) 21.78 Kb, 205 views

#2
Old Post August 28th, 2007 02:58 AM
sparky

sparky

I need a haircut
Status: Offline!

1. Use PNG

2. Center the background image and tile it, then adjust the main image to line up with where it falls. It should be (fairly) consistent across browsers.

___________________

Jon Culver Chia Pets

#3
Old Post August 31st, 2007 10:58 PM
Mundo

Mundo

Neverside Newbie
Status: Offline!

Nah, the problem is the gradient is not going to strech along the y axis...

#4
Old Post September 3rd, 2007 09:05 PM
sparky

sparky

I need a haircut
Status: Offline!

Oh, I'm dumb. Does it need to tile on the y-axis? Just make a very tall (1500px+) pattern of it to repeat horizontally.

___________________

Jon Culver Chia Pets

#5
Old Post October 29th, 2007 06:20 PM
flyingbuddha

flyingbuddha

Neverside Newbie
Status: Offline!

I'd do it as two bg's:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xyz</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<style type="text/css" media="screen">
body{
    background: #fc0 url(/grad.jpg) repeat-x;
}
#www{
    background: url(/pattern.gif);
}
</style>
</head>
<body>
<div id="www">
    123
</div>
</body>
</html>

___________________

Professional Geek

Quick Jump:

Main Navigation

Site & Graphic Design by Aeon Tan
Developed by Jeremie Pelletier & Scott Roach

NeverAPI generated this page in 0.0073 seconds.