PDA

View Full Version : Using background images with CSS


tommisauce
10-04-2007, 01:38 PM
Hi there,

I am building a site using CSS and want to make sure I'm building it in the correct way. My quesion is on the background image, are there any great toturials or does someone have a definitive answer how to make those really plush looking web2 backgrounds. I've seen various examples including sites which appear to use large imagery for the background, however wouldnt this slow down browsers? I'm not sure if I am looking at this problem in the right way and in need of some guidance.

There's two parts to this question:
1. How do you make the site have the shadow on the main window?
Example:
http://www.visioncomm.co.uk/
(very simple version) I tried applying borders (just left & right) to my container div but that didn't work - any ideas?

2. How do you incorporate a whole background without producing it in PhotoShop at 800x600 or whatever measurement to make sure it covers the whole of the browser window.
Some examples:
http://shiflett.org/
http://www.okapistudio.com/
http://www.period-three.com/

Many thanks in advance.

domedia
10-04-2007, 02:08 PM
1. How do you make the site have the shadow on the main window?
Example:
http://www.visioncomm.co.uk/
(very simple version) I tried applying borders (just left & right) to my container div but that didn't work - any ideas?

Those are not shadows, just a 1px border on the left and right hand side.
example: #wrapper {border-right: 1px solid black; border-left: 1px solid black;} If you prove a url or the html/css code, I could see why it's not working for you.

2. How do you incorporate a whole background without producing it in PhotoShop at 800x600 or whatever measurement to make sure it covers the whole of the browser window.
Some examples:
http://shiflett.org/
http://www.okapistudio.com/
http://www.period-three.com/
Those are all repeating backgrounds. the first site uses a tall vertical graphic and repeat-x, the other ones are just tiling the same image over and over.
http://shiflett.org/img/bg_body.jpg
http://www.okapistudio.com/imgs/bg.gif
http://www.period-three.com/public/img/bg.jpg

Make it a practice to view source on websites when you see something and you wonder how it's done. all the source is available for you :)

tommisauce
10-04-2007, 03:06 PM
Those are not shadows, just a 1px border on the left and right hand side.
example: #wrapper {border-right: 1px solid black; border-left: 1px solid black;} If you prove a url or the html/css code, I could see why it's not working for you.
Those are all repeating backgrounds. the first site uses a tall vertical graphic and repeat-x, the other ones are just tiling the same image over and over.
http://shiflett.org/img/bg_body.jpg
http://www.okapistudio.com/imgs/bg.gif
http://www.period-three.com/public/img/bg.jpg

Make it a practice to view source on websites when you see something and you wonder how it's done. all the source is available for you :)

Cheers for that - I did view the source I just couldnt see how the background was done - more patience next time!

Just one question for, what do you mean by: If you prove a url or the html/css code, I could see why it's not working for you.

Thanks for your help.

Jittor
10-04-2007, 03:21 PM
Just one question for, what do you mean by: If you prove a url or the html/css code, I could see why it's not working for you.

Do you have a site up that you can give the URL so we can look at it? Or paste your code in a post so we can look at it?

As for the background, you would still have to create them in Photoshop (or something else), but as Dom pointed out and in the links he provided it's a much smaller graphic but it repeats, and has to be seamless or it looks like crap.

The is an actual shadow on this site: http://www.period-three.com/

but it is within the graphic that repeats on the y axis to make it look seamless: http://www.period-three.com/public/img/bg.jpg

tommisauce
10-04-2007, 03:49 PM
I tried to replicate the Viscomm one - but there's slight differences.

Here's my version:
http://www.viscomm.dt7design.co.uk/index.html
Many thanks again.