So, I removed the background color and changed repeat-x to repeat (Don't foget I substituted the original image provided by Artisteer with my own BIG image and gave it the same name). Inside the comment, add another style sheet with some styles to get IE 6 to play nice:īackground-image: url('./images/Page-BgTexture.jpg') Put the following after your style sheet:ħ. There are many ways to hide the CSS from every browser but IE 6, but the easiest (and least dangerous) is to use conditional comments. Internet Explorer 6 isn't standards compliant and still has some problems. Add this to your style sheet:Ħ.ěut you're not done. This will bring it above the background image in standards-compliant browsers. Position your content so that it's relative and has a z-index of 1. Why? Because the background image is 100% in height, and the content division is after the image in the flow of the document - most browsers won't display it.ĥ. The image should display stretched out, but your content is completely missing. Note: it's interesting to look at your page now. Add this below the image:Īll your content here - including headers, paragraphs, etc.
Add this to your style sheet:Ĥ.Ědd all your content to the page inside of a division called "content". Position the background image so that it's fixed at the top left and is 100% wide and 100% in height.
#ARTISTEER FLUID WIDTH HOW TO#
Here's how to do it:ġ.ğirst, make sure that all browsers have a 100% height, 0 margin, and 0 padding on the html and body tags:Ģ.Ědd the image you want as the background as the first element of the Web page, and give it the id of bg:ģ. Then you don't end up with extra space or have to worry that your text fits in the stretched area. The easiest way to fake a stretched background image is to stretch it across the entire page. Until CSS 3 is accepted as a recommendation and user-agents catch up, in order to get a background image to stretch, we have to fake it.
0 kommentar(er)
