How do I get this look?

Get Started
1

Hi guys

I really like this site

Notcie the white at the top in the header? and how the next section has that slight gradient?

they use an image:

and they have a super subtle tiny tile underneath it. Do they get that gradient because there is an alpha on the image? Does not appear to be . Anyway I have a tile I made already, I just want layer a background image on top. I suppose a zindex wont hurt.

Really getting there with this stuff, working every night almost.

Thanks!

2

It looks like they have created the layout in photoshop, including the page background, header background etc.
Cropped the top header part out and use that as the header background whilst the rest of the page uses a tiled ‘noise’ background.

note: that made perfect sense in my head…!

3

thanks - did you see the image I found? they are repeating it. Just for fun, I tried to take part of thier tile and use it but it looked nothing like thiers.

4

The texture should also be noted on the gradient background. It looks like they added some Noise on Photoshop to add that piece of texture to make it less polished which looks great.

5

Why not? If you repeat it on a test page, it looks the same: a black band at the top, with a white section underneath and then a gray gradient.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
body {background: url(http://feedgrids.com/assets/images/bg.png) repeat-x;}
</style>
	
</head>

<body>

</body>
</html>

Personally, I don’t like the way they’ve constructed this. I would use a different bg image for each of those sections.

6

sorry - I should be more clear.

See the white space in the header? Also see the tile in the main body area?

How do they get nice little gradient at the top of the content box?

7

I’m still not really clear what you are asking. Did you run by code example in your browser?

That’s part of the background image you first linked to. Again, see my example.

How do they get nice little gradient at the top of the content box?

If I understand which gradient you mean, that also is part of the background image you first linked to. Again, run my code in your browser.

If I’m missing the point, take a screen shot of the site and indicate which parts of the design you are interested in. I’m not sure why you were referring to the title, so I may be missing the point.

8

Ok you nailed it for me. It seems that the gradient at the bottom of their background image goes over the top of the barely visible tile they have in place. Is there an alpha on that part of the image?

9

It seems so, but you don’t need to do it that way. You could have it solid and just merge into the bg color of the body element.

10

So just make an image that merges into the next one, that’s probably how they did it. Thanks Ralph you are always very helpful.

11

I wouldn’t do it the way they did it, mind you. I would break a background like that into bits, and add each bit to a separate section.

As for that gradient part, you can have a background color and a background image, so the little gradient image (whether transparent or not) can just sit over the background color.