jimfog Posted January 31, 2012 Share Posted January 31, 2012 For the body text of the site i am constructing, i am preparing a frame which will be the background of the text. It will be decorated using Ps techniques. But i have the following the question. This frame will be put as backg-image property. Since the height of the body text will-what i can do so that the frame varies with it. This frame as you guess will have fixed proportions. So, there is the problem that the height of the text might exceed the height of the frame. What can be done in such cases? I could use a solid color as backg-image, border, and set height auto, but from a design standpoint i would have not achieve what i want. What can be done? Link to comment Share on other sites More sharing options...
ShadowMage Posted January 31, 2012 Share Posted January 31, 2012 Depending on what your image looks like and which browsers you want to support, you could use the CSS3 border-image. Another option would be to create three separate images. One for the top border, one for the middle (repeated vertically), and one for the bottom. Here again, if you're only supporting newer browsers, you can use multiple backgrounds (CSS3), but if you want maximum support, you'll have to use absolutely positioned divs. Link to comment Share on other sites More sharing options...
jimfog Posted January 31, 2012 Author Share Posted January 31, 2012 I think your explanation covered me. One more thing. Can you give me links of sites(if you have available) that use the above strategies-just to see them in action. Thanks Link to comment Share on other sites More sharing options...
ShadowMage Posted January 31, 2012 Share Posted January 31, 2012 css3.info has some good examples: http://www.css3.info/preview/border-image/http://www.css3.info/preview/multiple-backgrounds/ Link to comment Share on other sites More sharing options...
jimfog Posted February 14, 2012 Author Share Posted February 14, 2012 one for the middle (repeated vertically), Yes,(something that occurred to me lately) but what if the background is a gradient-and assuming i am not going to use css3 for maximum compatibility-if i repeat the image, the appearance will not be good from a design point of you. How i can repeat an image and the same time preserve the gradient? Link to comment Share on other sites More sharing options...
ShadowMage Posted February 14, 2012 Share Posted February 14, 2012 Is it a horizontal gradient or a vertical one? A horizontal gradient is easily repeated vertically along with your border. Just include the gradient in your middle border section image. A vertical one is not so easy. You'll have to keep the gradient separate from your border images. I assume you will be using absolutely positioned divs to make your border, since you said you want maximum compatibility. So you'll have to set the background of the body to your gradient image and repeat it horizontally. The problem with this is that when the page gets longer, you'll notice the gradient doesn't fill out to the end anymore. You can set a background color to make it less obvious, but you can't make the gradient stretch. That is unless you use an absolutely positioned img tag (with src set to your gradient image) and set its width and height to 100%. This can cause quality loss on the image but since the image is just a gradient, you probably won't notice. CSS 3 offers some properties that can make this process a lot easier, but if you want maximum compatibilty, this is not an option. It's a choice you'll have to make: Use the new simpler CSS3 and lose browser support, or support as many browsers as possible but use complex and potentially confusing techniques to do so.That being said, IE is really the only one you have to worry about supporting. FF, C, S, O have supported these CSS3 background properties for quite a while (FF has supported them since about 3.5). IE does not support them until at least version 9, maybe 10. Link to comment Share on other sites More sharing options...
jimfog Posted February 14, 2012 Author Share Posted February 14, 2012 Is it a horizontal gradient or a vertical one? A horizontal gradient is easily repeated vertically along with your border. Just include the gradient in your middle border section image. A vertical one is not so easy. You'll have to keep the gradient separate from your border images. I assume you will be using absolutely positioned divs to make your border, since you said you want maximum compatibility. So you'll have to set the background of the body to your gradient image and repeat it horizontally. The problem with this is that when the page gets longer, you'll notice the gradient doesn't fill out to the end anymore. You can set a background color to make it less obvious, but you can't make the gradient stretch. That is unless you use an absolutely positioned img tag (with src set to your gradient image) and set its width and height to 100%. This can cause quality loss on the image but since the image is just a gradient, you probably won't notice. Actually is a gradient with a light source at -20%(made in Illustrator), i do not know were you would classify this, horizontal or vertical, but the approach you describe above seems to me it will the job, more or less. Do you know any good-looking site using it-succesfully? Link to comment Share on other sites More sharing options...
ShadowMage Posted February 14, 2012 Share Posted February 14, 2012 Actually is a gradient with a light source at -20%(made in Illustrator), i do not know were you would classify this, horizontal or verticalSo it's more of a radial or angled gradient. In that case, I would use the image technique I described above. Link to comment Share on other sites More sharing options...
jimfog Posted February 16, 2012 Author Share Posted February 16, 2012 I tried the image technique you suggested but the problem is that when typing some text the letters appear to below the gradient(and above the background color which is set in that segment)-take a look at the code. the HTML: <div id="main_article"><img style="position:absolute;" src="/Korakeiko/templates/korakotemplate/images/gradient_article.png" width="444" height="756" /></div> The image which is the gradient is called gradient_article.png-seen above. And the CSS: #main_article{ height:auto;color: inherit;background-color:#8585FF; width:450px;line-height:1.618em;padding-bottom:4px;box-shadow: 2px 2px 18px 1px #05058F;position:relative;} the gradient is white, so judging by the background-color property seen above(blue color) you will reach the conclusionthat in the end i want to achieve a gradient effect that goes gradually from blue to white or vice versa-depending on how you see it.It would be helpful if you could show me a site where the above technique is used. Link to comment Share on other sites More sharing options...
ShadowMage Posted February 16, 2012 Share Posted February 16, 2012 I would add another div inside #main_article and give it a class or id, something like "content". Give this div position: relative and a z-index of something greater than 0. Set the z-index of your img to 0. Link to comment Share on other sites More sharing options...
jimfog Posted February 16, 2012 Author Share Posted February 16, 2012 Thanks, that worked-alternatively, changing the order of the code in the markup also can have the same effect. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.