How is this bg done?

I've had trouble duplicating it in a different color

Page 1 of 1

3 Replies - 877 Views - Last Post: 11 March 2010 - 12:03 PM

#1 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

How is this bg done?

Posted 17 February 2010 - 04:56 PM

http://media.modernl...kit.php#formtop


These 3 files I've attached complete the effect I mean I see it's done with bg-repeat in HTML but in terms of design is it just a color with black lines on it or what color r the lines? I'm trying to create a similiar background with the color #6c6344 and haven't been able to duplicate it yet any help would be greatly appreciated.

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: How is this bg done?

#2 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon



Reputation: 1335
  • View blog
  • Posts: 3,398
  • Joined: 28-November 09

Re: How is this bg done?

Posted 18 February 2010 - 12:08 PM

It's a texture, not straight stripes. Html repeats? No. Try CSS repeats using
background:url(image.gif) #000;



to get repeats on both the X and Y axis. Put no-repeat on the end or repeat-x or repeat-y for other methods.
Was This Post Helpful? 0
  • +
  • -

#3 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 97
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: How is this bg done?

Posted 24 February 2010 - 01:53 AM

the way i would do it is like this :

to capture that whole light to dark gradient (extending from the nav bar down the page). I would use image 1 or 2 (I can't tell in chrome right now which one) -- it is going to contain the navbar and the fade actually from white to a transparency. it's probably a 6-7 hundred pixels tall. I don't think it will have any vertical scan lines in it but it might - i think the little bit of texture coming through is from the real background which is that third image.

so your body background for the page is going to be that third image, set to repeat vertically and horizontally, and then in a wrapper of some sort set to 100% width you just do a horizontal only repeat of that 1st or 2nd image i talked about.
Was This Post Helpful? 0
  • +
  • -

#4 gfeeley  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 24
  • Joined: 11-March 10

Re: How is this bg done?

Posted 11 March 2010 - 12:03 PM

I would create an image 2 pixels wide and 1 pixel in height. Use a 1 pixel stroke color black and fill half the image with the color. What you end up with is a half black and half transparent image. Save it as .png file. In the css file create a background image like thus.
body{ background-image:url(your_bg.png);
background-repeat:repeat;
}
. This will tile a 1 pixel stripe alternately with transparent down the page.
I made a correction. I meant for you to use repeat not repeat-y. Also this will give you a fine line. for thicker lines just use a wider image. i.e. 1 pixel high and 6 pixels wide and color half black. You can also use another alternating color instead of transparency. Using similar shades of colors will give you a nice subtle effect.

This post has been edited by gfeeley: 11 March 2010 - 12:20 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1