SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation A question about backgrounds

    I have seen many pages such as this one:
    http://www.xoasis.com/home.html
    (Look at the right hand side of the page.)

    that use a background that appears to be lined.
    I was wondering if someone could please help explain how this is done. I wish to apply this background effect to some of my pages. (I'm just now learning CSS and Styles but I'm a quick learner) Any info (E.g. where to go to learn about this topic or codes example etc.) would be GREATLY appreciated.

  2. #2
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This effect is known by most as 'scan lines' and the bg is simply made up of a repeating 'scan lines' tile.

    I don't know which programs you have available to you, so I've found tutorials in both Photoshop and Paint Shop Pro. Hope they help.

    Photoshop - http://www.phong.com/tutorials/scan/

    Paint Shop Pro - http://www.jellygrin.com/scanlines.htm
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2001
    Location
    Southampton, UK
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is it possible to get this effect by tiling a 1x2 pixel image (top half one colour, bottom half another colour) as the background ?

  4. #4
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by ollspin
    is it possible to get this effect by tiling a 1x2 pixel image (top half one colour, bottom half another colour) as the background ?
    I've never tried it, but I should think so.
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  5. #5
    SitePoint Guru sowen's Avatar
    Join Date
    Feb 2001
    Location
    Stockport, UK
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a 1x2 pixel tile will work but you are better off using a tile about 20x20 as this reduces memory usage on the client.

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, an even better solution would be to use a 1000x50.

    The reason why you should use a larger image for the tiling is that every time the image draws once on the screen it takes up a chunk of memory from the browser. In other words, it's a better tradeoff to have a slightly larger image (.1k as opposed to 1k) than to have that image draw on the screen 300 times (or more).
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2001
    Location
    Southampton, UK
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by creole
    Actually, an even better solution would be to use a 1000x50.

    The reason why you should use a larger image for the tiling is that every time the image draws once on the screen it takes up a chunk of memory from the browser. In other words, it's a better tradeoff to have a slightly larger image (.1k as opposed to 1k) than to have that image draw on the screen 300 times (or more).

    the thing i love about designing for the web is that i'm constantly learning new stuff . . . even simple little tweaks like this

  8. #8
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I never thought about it either but that makes perfect sense

    Thanx again creole *L*
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  9. #9
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I was messing around and achieved the effect this way...

    <html>
    <head>

    <style type="text/css">
    .blue {color: rgb(0,0,255)}
    .blk {color: #000000}
    div {line-height: 1px}
    </style>

    </head>

    <body>
    <div class="blue"> ___________________________________________________________________________________________________________________________<div/>
    <div class="blk"> ___________________________________________________________________________________________________________________________<div/>
    <!--These lines were repeated ALOT more than shown here-->
    </body>
    </html>

    As you can imagine this way really eats up resources though. I will read those tutorials provided by Saz249.
    Thanks alot for the info and any info to come.


Bookmarks

Posting Permissions

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