...

View Full Version : Background



losse
11-09-2008, 10:05 PM
Hi there
Just wondering if anyone can provide me with the basic CSS to setup a background similar to the following sites:

http://www.bikes.com/main+en+00_100+home.html?zone=1
http://psd2cssonline.com/

In a nutshell... the background consists of a top portion, middle portion and the bottom portion.

What I would like to do is create a top portion, say in "blue" colour, make the bottom "grey" and then the middle portion would be a graphic that blends in the blue and the grey...

Any idea how to accomplish this?

Millenia
11-09-2008, 10:08 PM
What that site has used is a giant image for the background. One of them.
If you want to create a background using more than one image like you say. You would have to make it as one in Photoshop, then slice it with the slicing tool.

Make a giant background image in Photoshop, then split it into 3 how you want.
You should do this for graphics for a site usually.

Here I found you some links, they're all useful.

http://www.google.co.uk/search?hl=en&q=designing+a+site+in+photoshop&btnG=Google+Search&meta=

Good luck :)

losse
11-09-2008, 10:16 PM
wouldn't making one giant image take forever for the site to load?

If I were to slice it, how would I code it into the background? Would I just create a background image in that particular DIV?

Millenia
11-09-2008, 10:21 PM
wouldn't making one giant image take forever for the site to load?

If I were to slice it, how would I code it into the background? Would I just create a background image in that particular DIV?

Yes, you would add the background to the div that you want it to.
Or if you don't have a div that's convenient enough to slap a background image onto it, make a new one.

like


.bgimage {
background-image: url('something.png');
some more properties;
}


et cetera

losse
11-09-2008, 10:26 PM
any hints on the CSS to have a 100% background but the content be fixed width? Say 900px?

Millenia
11-09-2008, 10:28 PM
any hints on the CSS to have a 100% background but the content be fixed width? Say 900px?

Do you mean:

Have a fixed background image at the top.
One that stretches in the middle.
and have a fixed on at the bottom?

losse
11-09-2008, 10:30 PM
Just like that first link: http://www.bikes.com/main+en+00_100+home.html?zone=1

The background would stretch to 100% of the browser but in terms of the content inside (let's say the width of the header and the columns holding the content) would be 900px rather than also 100%...

Let me know if that's still unclear

losse
11-09-2008, 10:31 PM
Oh... I guess, yeah the images would stretch... I'd make them wide enough for 1024x768 resolution and hope for the besT!

Millenia
11-09-2008, 10:33 PM
Just like that first link: http://www.bikes.com/main+en+00_100+home.html?zone=1

The background would stretch to 100% of the browser but in terms of the content inside (let's say the width of the header and the columns holding the content) would be 900px rather than also 100%...

Let me know if that's still unclear

You could have 1 big background in the back.

So:


body {
other stuff;
background-image: url('something.png');
}


that's for you're background, then you can have another background image on the div that's holding the content.

That way the background image on the content div, will be placed on top of the actual background one.

losse
11-09-2008, 10:35 PM
So I don't need to specify their widths? how do I make sure it's 100% of the browser?

Millenia
11-09-2008, 10:37 PM
So I don't need to specify their widths? how do I make sure it's 100% of the browser?

I'm not sure about that, I don't work with backgrounds much. You might have to google it. Sorry

losse
11-09-2008, 10:38 PM
Great thanks!!

By the way... is there a certain size image that should be kept in mind for the background? Or should I just slice it up?

Millenia
11-09-2008, 10:47 PM
Great thanks!!

By the way... is there a certain size image that should be kept in mind for the background? Or should I just slice it up?

Well I'm thinking of it from a logical point now, not a designer:

If you have a background image that is bigger than the max height resolution on any monitor, you will get a vertical scroll bar in any browser on any resolution. So if you're content is more than a page then you can just do that, and you're background will always occupy all the browser

But if you have little content, you might want to slice it up.

BabyJack
11-09-2008, 10:49 PM
If you have little content, then wouldn't you put

height: 100%?

Or am I just talking rubbish?

Millenia
11-09-2008, 10:50 PM
If you have little content, then wouldn't you put

height: 100%?

Or am I just talking rubbish?

But you can't really change the height of an image at will like that. It will distort it.

BabyJack
11-09-2008, 10:51 PM
Im sure you could. Abduraoof told me... :)


body{
height: 100%;
}

Millenia
11-09-2008, 10:52 PM
Im sure you could. Abduraoof told me... :)


body{
height: 100%;
}

Wouldn't it distort the image though?

BabyJack
11-09-2008, 10:57 PM
It didn't when I did it. And my background was my sites structure.

Millenia
11-09-2008, 10:58 PM
It didn't when I did it. And my background was my sites structure.

Really? I don't understand how that works :p
but if it does I'm not going to argue :thumbsup:

losse
11-10-2008, 12:16 AM
Ok...
So how does this site do it?
http://www.bikes.com/main+en+00_100+home.html?zone=1

Notice there's black at top, white at the bottom and then "blending" the 2 colours together, there's that brush-like looking graphic...

The background of this site is a fixed width because when you resize the browser or change monitor resolution, the graphics don't move... AND there isn't any side to side scrolling...

Also, although the background is 100%... or the entire width of the monitor, the content itself is centered within the page... say with a width of 900 pixels or so...

This is the effect I'd like to re-create...

Avril
11-10-2008, 11:04 AM
At first glance, seems like it is done by layering. The background is actually three divs, one above the other with a 100% width. The painted edges that blend in are in the images themselves. Then the other divs of fixed size with the contents are layered on top of the three background divs, probably within a container div. Each of them have their own backgrounds. Right-click on the site and you will be able to open and see the images used.

abduraooft
11-16-2008, 03:46 PM
Really? I don't understand how that works :p
but if it does I'm not going to argue :thumbsup:
I'm also not sure about what BabyJack says :confused:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum