...

View Full Version : image in background



losse
12-19-2006, 06:09 PM
Hi there
Have a look at this page: http://omis.ca/test/main.php See the background of the site? Does anyone know of a software or a tutorial on how to create those backgrounds?

Thanks

codingmasta
12-19-2006, 08:19 PM
<body background="yourimage.jpg">

Graft-Creative
12-20-2006, 12:08 AM
<body background="yourimage.jpg">

Hmm, it's not quite as simple as that I'm afraid!

The above is simply a way of applying a background image, but not of creating one.

Do you have Firefox? If you do, do a right click on the background then select: View background image, that will give you a clue as to how its's done.

The real tricky bit is how to cut the image so it repeats correctly,
How to apply it to your page is simple enough:


body {background: transparent url(images/myimage.jpg) top left repeat-x;}


Hope that helps - I wish I had time to do a proper walk thru, but as background repeats are all fairly unique - it would take me a while to cover everything.

A search on your favourite SE should bring up a few goodies though :)

Kind regards,

Gary

losse
12-20-2006, 05:49 PM
Thanks Graft!
i did just that when I came across the background... Back in the day they used to be nice and simple and fit in a little 5 pixel by 5 pixel square... this one is nice and intricate (which is why I like it) and it took me forever to find where it splits and where the next one begins... It's almost like the pattern is designed specifically to be cut in a certain way and look like it's "one" image... That's why I figured there was a software to do that...

I'll look around...

Please keep your eye(s) peeled in case you find something!

Cheers

codingmasta
12-20-2006, 06:33 PM
U jokin me about >>>transparent<<< url. AH, this is the good thing:


<style type="text/css">
background-image:
url('yourimage.gif');
</style>

Graft-Creative
12-20-2006, 08:57 PM
U jokin me about >>>transparent<<< url. AH, this is the good thing:


<style type="text/css">
background-image:
url('yourimage.gif');
</style>


Nope, no joke codingmasta: 'transparent' refers to the background colour (or lack of), and while not entirely necessary - it does stop the CSS validator throwing warnings back at you ;)

@ losse: no problem at all. I'm not entirey sure what you'd call the type of repeat pattern we're talking about - offset, maybe? But yeah, it's a bit trickier than the 5px square, regular repeats you mentioned.

There are probably a ton of useful resources online about creating repeating patterns of all types (pattern design is one of the oldest disciplines in the field of applied arts after all, long before computers).

All good fun :)

Kind regards,

Gary



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum