[SOLVED] Trying to stop background image from moving when the screen gets small

[starxox]

Hi, I'm new to css and indeed customising templates.

Here is my latest site http://www.psychicreadingbyphone.co.uk/

I've managed to customise most things but for my background image I basically have a file that looks like PIC 3.

I've positioned it correctly and most of the time the result is the second picture, but when I make the screen size picture it throws the white center bit of the background out of line.

I'm guessing this isn't the best way to set this up - can anyone tell me what bits of global css I need to change to sort this out?

Many many thanks for any help on this

Louisa

[Seanmcn]

Not a CSS genius myself like other's on this website but I think your mistake is actually having the white there at all.
I'd keep the background image like the top part of the picture of attached.
The middle will be white anyway as you can just define #page as having a background of white, it probably will by default anyway.

Obviously the uploaded image won't help you at all, but its going past 2am here and I really have to sleep. Hope i have explained this well!

Good luck!

Note: I downloaded the thumbnail so its ridiculously small, but I think you'll get what I'm on about..

[starxox]

Hi thanks so much for taking the time to get back to me.

However there are 2 reasons I didn't do what you suggested. Firstly, if you do that, it seems you have to define a height for that bit of the page(because I can't repeat it due to the blank bit at the top), and I want mine to be fluid (You can check my other website http://www.stormjewelgifts.com where I did this with the page element but used a png file - it looks a bit rubbish as I had to fade it to nothing to stop it looking weird).

Secondly I wanted a drop shadow on the sides of the white center column. When I tried to upload a png or gif file with this in it went all weird, not sure why!

Any other suggestion pleases? )

[Seanmcn]

background-attachment: fixed; ?

What do you need blank at the top? Kind of missing that somehow.. :|

[starxox]

background-attachment doesn't seem to do anything for this. When I changed the #page colour to white instead of transparent it looks like the picture below. I know how to make it longer - by setting the height to a value in px, instead of 100% but I don't know how to change the width or the height (have played around with margins and padding, doesn't seem to help)

Also if I set the height in px this messes up the height of the pages (as explained before)

Hope this makes sense, sorry a bit hard to explain!!

[9Presta]

Hi,

You can remove padding: 0 20px in div id="page" to fix this problem.
In addition, you use to large background, cut it down and using background-repeat to solve problem
Hope this help.

[starxox]

Wow that fixed it!! Thanks so much, yay!!!!!! who knew it could be so easy!!! Only thing is I dont think i can make the background smaller due to the fact of the problem of having a weird gap in the white bit! (but that's no big problem the main thing was fixing what you just fixed!

Thanks to both for taking the time to reply, if you have any questions I'll happily Attempt to help!! :-)

[Pinkloveshy]

Hello All

My background fails to centralise like this site and when I shrink the window it gets very messy. I need to keep the white background central and for the blue border to shrink at I reduce the window (Screen size)
what is wrong with my background / CSS.

Please can one of you fantastic CSS people help me. I'm going crazy

Regards
Gillian