Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts

    image in background

    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

  • #2
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <body background="yourimage.jpg">
    ALWAYS remember to validate your code

  • #3
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by codingmasta View Post
    Code:
    <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:
    Code:
    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

  • #4
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    U jokin me about >>>transparent<<< url. AH, this is the good thing:
    Code:
    <style type="text/css">
    background-image:
    url('yourimage.gif');
    </style>
    ALWAYS remember to validate your code

  • #6
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by codingmasta View Post
    U jokin me about >>>transparent<<< url. AH, this is the good thing:
    Code:
    <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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •