Jump to content

Background Image in Firefox


Jaykay12
 Share

Recommended Posts

Good morning - rookie here :) I want to insert 1 image in my website background. I don't see anything in the CSS Styling background pages on how to make the 1 image full width and height.Either by default it tiles V&H or it stays a small image (say 900x548) where placed (top left).How can I achieve this look? For instance, Yahoo is using it on their email sign-in page.Currently my image repeats full width & height but looks off because the pattern is easily edged visually. My site is http://www.sporthistoreplays.com and has a grass background.Any advice would be most welcomed. Happy holidays all. Jaykay

Link to comment
Share on other sites

There is no easy way (currently) to scale a background image to fill the entire viewport, though you can simulate an effect using image tags, positioning, and z-indexes. However, the image would have to be very big and slow to load, or else it would become fuzzy at any decent resolution.A much easier way, especially with a background like yours, is to just modify the image so it does tile nicely. PSDTuts has a nice article on how to do this: http://psd.tutsplus.com/articles/how-a-tur...led-background/.P.S. Yahoo's email sign-in page just has a simple gradient for me.

Link to comment
Share on other sites

There is no easy way (currently) to scale a background image to fill the entire viewport, though you can simulate an effect using image tags, positioning, and z-indexes. However, the image would have to be very big and slow to load, or else it would become fuzzy at any decent resolution.A much easier way, especially with a background like yours, is to just modify the image so it does tile nicely. PSDTuts has a nice article on how to do this: http://psd.tutsplus.com/articles/how-a-tur...led-background/.P.S. Yahoo's email sign-in page just has a simple gradient for me.
Holiday Cheers Synook:Thanks so much for a reply. Love the fact that your recommended link uses a grass photo :) Looking forward to using the tutorial today. I can't properly post an image here, but I have created a temp page on our website. You can find the page under the 'MORE' category tab at top right menu bar of www.sporthistoreplays.com. It features the full viewport image used for their new 2.0 beta campaign. Thanks mate ! Jaykay Edited by Jaykay
Link to comment
Share on other sites

  • 2 weeks later...

Thanks Synook, we were able to optimize our preferred background image successfully. A great improvement - thanks!If | when I learn more about 'How To' expand a single image into the page background like Yahoo has been using the last 2 months or so, I'll post here.Happy Holidays! Jaykay

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...