PDA

View Full Version : Styling CSS to make BG image stay still?


FethrdWlf
03-27-2011, 07:22 PM
I have a background image that is just some weird gradient all messed around with in Photoshop. It is set in CSS to always stay as large as the page. The only problem is, if the page is taller than the screen, then the bg pic gets all stretched out. How can I prevent this?

I've tried putting the image inside of a DIV, and then styling it from there, but that just gets all messed up for me.

d a v e
03-27-2011, 08:48 PM
link to the image might help ;)

FethrdWlf
03-27-2011, 08:51 PM
link to the image might help ;)

Do you mean a link to the BG image itself, or a pic of the whole site WITH the BG image?

Ricky55
03-27-2011, 10:02 PM
A link to the page would be even better, I'm not totally sure I know what you mean.

FethrdWlf
03-27-2011, 10:16 PM
A link to the page would be even better, I'm not totally sure I know what you mean.

Sorry, no link is available. I'm running it off of Apache right now, and it can't be sustained anywhere else at the moment. However, I can try to further elaborate:

You know how on some websites they have those sidebars or feedback icons that always stay in place, even when you scroll the page? Well, that's how I would like to have my background image. Fixed, as it's called.

Furthermore, I want the background picture to always be the size of someone's screen, not the page. For example, my screen is 768px high, but the page is perhaps over 1000. At the moment, the picture automatically stretches to the height of the page (1000+, give or take), not the screen. I have made the image I am using twice as big as my own screen, therefore if someone has a larger screen than I do, it won't be blurry.

d a v e
03-28-2011, 07:44 AM
in your css

background-attachment: fixed;

but it sounds like a huge image filesize-wise ;

FethrdWlf
03-29-2011, 01:16 AM
in your css

background-attachment: fixed;

but it sounds like a huge image filesize-wise ;

Oh it's huge. 2.65mb. I'll use photoshop and take down the quality some, in hopes of getting some size stripped down.

P.S. thank you, your method worked!