5 replies [Last post]
Attafaz
Offline
newbie
Netherlands
Last seen: 9 years 36 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2012-09-10
Posts: 3
Points: 6

Hey, I'm new here, so I hope I'm not asking already answered questions. I couldn't really use the search function, because I have no idea how this is called. I don't even know whether this is possible using CSS or not, but that's why I'm here..

I'm looking for a way to implement a background such as on this website:
http://www.thecandlethieves.com/

There's a fixed background image, but on top of that there's this kind of raster which scrolls along with the rest of the design. Does anyone have an idea how to make this?

As I said I'm fairly new to web design and all its possibilities. I thought of creating a raster with a transparent background in Photoshop, and layering that on top of a body background image inside a div, but I feel there should be an easier way.

Obviously, I'm looking for help Wink

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Attafaz, This is the rule

Hi Attafaz,
This is the rule they use for the background image.

#spot {
  background: url('../images/man.png') no-repeat fixed center 80px transparent;
}

The most interesting part of that for you is the fixed background position.

Attafaz
Offline
newbie
Netherlands
Last seen: 9 years 36 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2012-09-10
Posts: 3
Points: 6

Thanks for your reply

Thanks for your reply Tony!

However, I think I haven't been as clear as I should've been.
I know how to set a background as a fixed background. The problem is something else.

The website seems to be layered like this:
Fixed background > raster > everything else

-Fixed background: (the blue man holding balloons)
-Raster: scrolls over the fixed background and acts like a "second background" between the fixed one and the content
-Everything else: scrolls along with the raster

The raster I'm talking about (the thousands of teeny-tiny diagonally crossing lines) is the thing I would love to be able to use.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Ok now I am starting to

Ok now I am starting to understand.
It actually under the man with balloons.
Here's the code, the #bg is on body, the man.png must be semi transparent.

#bg {
	background: url('../images/bg.png') repeat scroll 0 0 #455761;
	font: normal 12px Arial, Helvetica, sans-serif;
	line-height:1.6;
	color: #444;
}
#spot {
	background: url('../images/man.png') no-repeat fixed center 80px transparent;
}

Attafaz
Offline
newbie
Netherlands
Last seen: 9 years 36 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2012-09-10
Posts: 3
Points: 6

That seems to be it. Don't

That seems to be it.
Don't know why the font, color & line-height are specified since the #bg only uses an image, but that's another story.

Thank you!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

The font, line-height and

The font, line-height and color are inherited by other child elements unless overridden.