Forum Moderators: not2easy

Message Too Old, No Replies

setting background image with extenders

         

Kysmiley

12:30 pm on Feb 2, 2005 (gmt 0)

10+ Year Member



I have a background image that goes across the top of the page and down the left side. I want to put what im calling extenders/fill-ins on the ends to keepm the page from having virticle or horizontal scroll bars. If i make the image larger and a visitor has thier resolution set to 600x480 it will cause scroll bars or if they have it set smaller the image wont fit the page. Do i have to set two top divs one to float left of the other? what would i do with the botton left then? Is there an easier way to do this is CSS that I am not aware of yet.
Pat

createErrorMsg

1:26 pm on Feb 2, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If i make the image larger and a visitor has thier resolution set to 600x480 it will cause scroll bars

Actually, if the image is set as background for a page element, the image size will not cause scrollbars.

Say you had a header div set to 80% of the viewport width, with an image as a backghround to fill that header. If you made the image large (wide) enough to fill the header at whatever maximum resolution you decide, you would be fine.

Say you chose 1200X800 res. You would want an image that is about 1200px wide. In a browser at 1200X800 res, the whole image displays. In a browser at 800X600 res, just the first ~800px display. The rest will simply disappear off the side of the div.

Another option would be to make the image fit your ideal resolution (say, 800X600) and fade the right side to an acceptable, web-safe background color. Then position the background image to the left and set the background-color to the web-safe color you selected above. When the resolution is larger than the image, the % sized div will expand and show both the image and the background.

cEM