Re: [WSG] background images fluid
Short answer: you can't. And, given general browser capabilities when it comes to scaling/resampling of images, a site that uses a resized background indiscriminately can't possibly look good at all resolutions. Probably best to make an image that fades off to whatever colour your background-color is set to, and leave it at that... On Mon, 2005-08-01 at 06:11 -0400, Bruce wrote: What is the best way to get a 100% width on a background image in a banner? I believe in fluid sites that look good in all resolutions, img tag works easy at 100% width, but even searching for hours on google didn't help for css background sizing in %. Anyone can help? Thanks in advance. Bruce Prochnau BKDesign Solutions Kind Regards, Joshua Street base10solutions Website: http://www.base10solutions.com.au/ Phone: (02) 9898-0060 Fax: (02) 8572-6021 Mobile: 0425 808 469 Multimedia Development Agency E-mails and any attachments sent from base10solutions are to be regarded as confidential. Please do not distribute or publish any of the contents of this e-mail without the sender’s consent. If you have received this e-mail in error, please notify the sender by replying to the e-mail, and then delete the message without making copies or using it in any way. Although base10solutions takes precautions to ensure that e-mail sent from our accounts are free of viruses, we encourage recipients to undertake their own virus scan on each e-mail before opening, as base10solutions accepts no responsibility for loss or damage caused by the contents of this e-mail. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] background images fluid
What is the best way to get a 100% width on a background image in a banner? I believe in fluid sites that look good in all resolutions, img tag works easy at 100% width, but even searching for hours on google didn't help for css background sizing in %. Anyone can help? Thanks in advance. Bruce Prochnau BKDesign Solutions
RE: [WSG] background images fluid
Can you give an example of what you mean? From: Bruce [mailto:[EMAIL PROTECTED] Sent: Monday, 1 August 2005 8:12 PM To: wsg@webstandardsgroup.org Subject: [WSG] background images fluid What is the best way to get a 100% width on a background image in a banner? I believe in fluid sites that look good in all resolutions, img tag works easy at 100% width, but even searching for hours on google didn't help for css background sizing in %. Anyone can help? Thanks in advance. Bruce Prochnau BKDesign Solutions ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bitmap grpahic is not intended to be rescaled/stretched. You can tile it, or combine it (like on mozillazine), but no stretching, please... -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Jan Brasna wrote: Bitmap grpahic is not intended to be rescaled/stretched. You can tile it, or combine it (like on mozillazine), but no stretching, please... That's right. What I'd probably do (not having seen your banner) is - if the image doesn't stretch forever and isn't suitable to be repeated - to have a fluid section of the banner with a background image set to repeat in the CSS, and with the un-repeatable image on one side, blending it with the stretchy section with a gradient. You could adapt this if you wanted an image on both sides, creating a fluid mid-section. Hope I've understood what you were asking. :-) -- Vicki Berry DistinctiveWeb http://www.distinctiveweb.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Hi Bruce, Try http://www.edgedesigns.com.au/resourcedw.htm. Not sure just how relevant this is, but it's a Dreamweaver extension (free) which you may be able to adapt to use in a div? (Not checked!) Bob Bruce wrote: What is the best way to get a 100% width on a background image in a banner? I believe in fluid sites that look good in all resolutions, img tag works easy at 100% width, but even searching for hours on google didn't help for css background sizing in %. Anyone can help? Thanks in advance. Bruce Prochnau BKDesign Solutions ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Andreas Boehmer wrote: Can you give an example of what you mean? A header or banner at the top. I can put an image in there: div id=banner img src=anything.jpg width=100% height=120px alt=mynicebanner / /div It will size according to the resolution. Stretch and shrink. But I cannot make it do that in the stylesheet as a background image. Is there a way? Thanks everyone for answering, I should have been more specific. Bruce Prochnau BKDesign Solutions. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] background images fluid
Hi Bruce I've come up against this myself when going for a liquid 3 column layout with a header graphic that I want to span all three columns at the top. You could 'sniff' the browser width/screen res, but I don't like doing that myself. The solutuion I came up with is pretty much the solution that Vicki suggested. I think this is a real limitation. Even Eric Meyer's site suffers this 'banner won't stretch' problem (try viewing http://www.meyerweb.com/ at 1600px screen width to see what I mean). The only alternative I have come up with is using a fixed width which sets the max width of a container div to the width of the banner. Strange, this never used to be a problem with table based layouts! Lol ... Only kidding! -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bruce Sent: 01 August 2005 12:13 To: wsg@webstandardsgroup.org Subject: Re: [WSG] background images fluid Andreas Boehmer wrote: Can you give an example of what you mean? A header or banner at the top. I can put an image in there: div id=banner img src=anything.jpg width=100% height=120px alt=mynicebanner / /div It will size according to the resolution. Stretch and shrink. But I cannot make it do that in the stylesheet as a background image. Is there a way? Thanks everyone for answering, I should have been more specific. Bruce Prochnau BKDesign Solutions. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- No virus found in this incoming message. Checked by AVG Anti-Virus. Version: 7.0.338 / Virus Database: 267.9.7/60 - Release Date: 7/28/2005 -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.338 / Virus Database: 267.9.7/60 - Release Date: 7/28/2005 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bruce schrieb: It will size according to the resolution. Stretch and shrink. Not stretching, not static, though: http://www.satzansatz.de/cssd/wide.html Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Vicki Berry wrote: if the image doesn't stretch forever [***I can't get it to stretch at all, thats the problem***] and isn't suitable to be repeated - to have a fluid section of the banner with a background image set to repeat in the CSS, and with the un-repeatable image on one side, blending it with the stretchy section with a gradient. You could adapt this if you wanted an image on both sides, creating a fluid mid-section. ... with the un-repeatable image on one side, blending it with the stretchy section with a gradient. Looks like a perfect solution. At least as perfect as can be had. Thanks to all who ansered. Funny how it can be easily done as an image IN the banner , but not in staylesheet. Bruce Prochnau BKDesign Solutions ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Ingo Chao wrote: Bruce schrieb: It will size according to the resolution. Stretch and shrink. Not stretching, not static, though: http://www.satzansatz.de/cssd/wide.html Ingo That's it!! Thank you Ingo Awesome Bruce Prochnau BKDesign Solutions - just got a solution. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Hi Bruce, I had a quick look at your current header and see what you are trying to do. At the end of the day I think you need to just be a bit more clever with your image. I *borrowed* your current image and did a very crude editing job to it so it will look good at the avg resolution, but you will need to tile it across the header (repeat-x) and it will tile for people with higher resolutions!! Give it a try http://img.photobucket.com/albums/v113/matrix_revolutions/header_sample.jpg Again, I could have made it a bit nicer so it tiles/aligns better, but you will get the picture!! Cheers Nathan Andreas Boehmer wrote: Can you give an example of what you mean? A header or banner at the top. I can put an image in there: div id=banner img src=anything.jpg width=100% height=120px alt=mynicebanner / /div It will size according to the resolution. Stretch and shrink. But I cannot make it do that in the stylesheet as a background image. Is there a way? Thanks everyone for answering, I should have been more specific. Bruce Prochnau BKDesign Solutions. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
I guess I cannot communicate what I mean. I have an image on my own website of a sunset. I put it in the banner div as an image and set the width to 100%. I am perfectly happy with it, it looks good and stretches to fit all resolutions. There is nothing wrong with it at all. At 1024 it fills the monitor to both edges, and does the same at 800 with no scroll bars. I have no clue at all what being clever with my images means. I don't even want to be clever with them. I prefer being as I am, just a dumbass old country boy trying to make websites. I was wondering if an image would stretch as a background image in the stylesheet as a background. That's all. Ingo did a demo as a background image of a h1 tag. I thought that would work. Using the EXACT same code that he used, in the stylesheet for the banner it does not work. I have no idea why not. I was trying to do that for a client on another website. Maybe it cannot be done. Maybe I have no idea how to describe making a background image stretch. Thank you to all who answered. Bruce Prochnau Hi Bruce, I had a quick look at your current header and see what you are trying to do. At the end of the day I think you need to just be a bit more clever with your image. I *borrowed* your current image and did a very crude editing job to it so it will look good at the avg resolution, but you will need to tile it across the header (repeat-x) and it will tile for people with higher resolutions!! Give it a try http://img.photobucket.com/albums/v113/matrix_revolutions/header_sample.jpg Again, I could have made it a bit nicer so it tiles/aligns better, but you will get the picture!! Cheers Nathan Andreas Boehmer wrote: Can you give an example of what you mean? A header or banner at the top. I can put an image in there: div id=banner img src=anything.jpg width=100% height=120px alt=mynicebanner / /div It will size according to the resolution. Stretch and shrink. But I cannot make it do that in the stylesheet as a background image. Is there a way? Thanks everyone for answering, I should have been more specific. Bruce Prochnau BKDesign Solutions. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bruce schrieb: That's it!! Bruce, I didn't expect that this attempt works for you. You need a very big image, resulting in 25k. --- You can choose a focus of the picture, which determines the percentage-value for the background-position. This makes the image look fixed (here: x=30%), When you use percentages, you position a point within the image itself, not the top left corner. This point is moved to the corresponding percentage point location in the box. (Zoe Gillenwater, http://www.communitymx.com/content/article.cfm?cid=AFC58) Further, note that the heading text can be aligned to that spot with the same %-padding-left. Opera and IE/Win are playing ball, Fx not. But the average user won't play with the screen size permanently, so I think its ok with Fx. --- I think it's not a good solution, due to the size of the image needed. I'd prefer the gradient solution with a small image, as Vicki said, you might combine the fluid mid with a percentage alignment. good luck. Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] background images fluid
Another alternative would be to produce the image for a largish resolution (e.g. 1024), set max-width to 1024 and set width to 100%. I believe readability begins to decrease above 1280 - surely there's some research on maximum widths and readability somewhere. - Chris www.semioticpixels.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bruce schrieb: I guess I cannot communicate what I mean. ... I was wondering if an image would stretch as a background image in the stylesheet as a background. That's all. Ingo did a demo as a background image of a h1 tag. I thought that would work. Using the EXACT same code that he used, in the stylesheet for the banner it does not work. I have no idea why not. Because my image is 2048px wide. You can't stretch bg-images in CSS. It's not that we didn't understand what you want to accomplish, but it's just not possible. We are trying to find a workaround, not a solution. Follow Vicki's attempt and put a gradient on both sides of the bg-image, than position it 50% 100% in the horizontal mid. Or put the gradient just to the right, as Roger does: http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/ There is a maroon gradient to the right, and the container has the same background-color. Check in Firefox with cntr++, and view the bg-image. Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bruce, I guess I cannot communicate what I mean. I have an image on my own website of a sunset. I put it in the banner div as an image and set the width to 100%. I am perfectly happy with it, it looks good and stretches to fit all resolutions. There is nothing wrong with it at all. At 1024 it fills the monitor to both edges, and does the same at 800 with no scroll bars. You can't do that with a background-image. CSS3 will (probably) have some properties to control the size of background-images. There were some proposals how to circumvent this problem, but none of these solve your problem. If you assign a percentage width/height to an img, AFAIK the percentage-value is calculated relative to the original size of the image. That means that it won't solve your problem too. What you could do is using an img-tag and caculate the width by Javascript and assign a value in px. But a much better solution would be to let the sunset just cover about 1024px and use either the method Ingo proposed or the small-pic with gradient method. You could even nest two divs and use two background-images, the sunset fixed and a small one repeated which composes a nice effect. Martin. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bruce wrote: I guess I cannot communicate what I mean. I was wondering if an image would stretch as a background image in the stylesheet as a background. That's all. Short answer: No, you cannot, with CSS and HTML as it is today, resize a background image. The only properties available for background are: background-attachment background-color background-image background-position background-repeat There is no CSS property background-size or background-zoom or similar in CSS2. So for now, if you want to stretch it you will have to use a (foreground) image and use trickery (absolute positioning, z-index etc) to make it appear behind other objects. Hope this answers your question -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Thank you to all who responded. I see that it is a problem with CSS at present. Partial solution seems to be making the image wide (I had it at 720px or thereabouts) I made the image itself 1026w, and 11k, now it sscales nicely, and for larger res the fade or framed with another image seems the answer. Fading into background color on the right seems good idea. Thanks for the feedback, it helped immensely with different methods to workaround. I thought I was just bein dumb, but seems not. Was just tryin what cannot be done! ;-) At least now 800 and 1024 res are covered. Thanks Again Bruce Prochnau BKDesign Solutions ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Result: http://peoriaaz.nexcess.net/index.php Anyways, that's what all the fuss was about. Site was just started this morning. Done in Expression Engine. Redoing everything yet. Thanks again Bruce Prochnau BKDesign Solutions ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] background images fluid
Hi Bruce Instead of stretching an image, try the sliding doors approach. This may seem odd in a photograph, but could work in situations where the image has a repeatable section. #wrap gets the left corner with generic content. #innerwrap gets the right side with the juicy part of the image. As the page gets smaller the juicy part of the image gets closer to the left side and overlaps the generic section. As the page gets wider, the juicy part moves to the right unveiling the generic section. I know this sounds really vague, but read up on the sliding doors technique. I think stopdesign.com did a tutorial on this. I've used it for creating a background with distinct edges that needed to stretch. Hope this helps. Ted - ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bruce wrote: Looks like a perfect solution. At least as perfect as can be had. Thanks to all who ansered. Funny how it can be easily done as an image IN the banner , but not in staylesheet. wait 'til css3 and you can use an svg image in the background, that will do exactly what you want. only the browsers will have to support svg natively. best, dwain -- Dwain Alford [EMAIL PROTECTED] http://www.alforddesigngroup.com The artist may use any form which his expression demands; for his inner impulse must find suitable expression. Wassily Kandinsky, Concerning The Spiritual In Art ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
