Is it possible for this background to "stretch" to the right?

[Susie]

I have a potential client asking about this. I have my suspicions, but I wanted to check with others before giving them my answer.

 

They are asking if the attached background can be "stretched" to the right depending upon the viewer's resolution. The left side of this background image will be almost flush with the left side of the main content area. Then if the viewer's monitor is smaller, they would see a portion of this background. If the monitor is larger, the background (in their hopes) would extend further right to reach the edge of their monitor.

 

(I hope I'm making sense here....)

 

So, what would your answer be? I am curious to know if I'm thinking correctly here....

[virtual]

Take a look at this article, I believe there is an updated version of it, but I will have to look through my code snippets.

http://css-tricks.com/how-to-resizeable-background-image/

[virtual]

Here you go, Wickham had one too

 

http://css-tricks.com/perfect-full-page-background-image/

http://www.wickham43.net/backgroundfullwidthflexible.html

[Susie]

Thanks for the links, Lynne. I googled a bunch, but did not come across them. Off to study!

[Susie]

So, using what is in Wickam's link, do you think it would make sense to position it right: 0, top: 0 but not include left: 0 since they only want it to expand to the right?

 

The other thing I can't see how to do is that they want the left side of the image lined up with the left side of the content container. That means it would need to be in the div....then how could it expand all the way to the right if the div is fixed width?

 

Here....I've attached another image...it's not exact/perfect, but it gives you an idea of what I mean....

Edited June 26, 2010 by Susie

[virtual]

Hi Susie,

This might work for you if I'm understanding what your client wants. The "susie.jpg" is 2000px wide by 800px high and absolutely awful, I just threw it together to try it out. I'm not sure what the biggest monitor width size would be. I have dual monitors at 1280px wide each and I dragged the browser window across both screens to get the right hand side to go to full limit with the content staying in the middle. I only tested in Firefox (Mac)

 

You can see it here

http://180virtual.com/susie/

[Susie]

Lynne, thanks so much for your time. I will be revisiting this (got sidetracked by another client today) tomorrow or Wednesday. I got the job (yay!) so I will need to figure this out. Be back soon!

[BeeDev]

Looks like the background image fades into a single color (or should) on the left hand side. So can you not just position the background to the right so the black area always sticks to the right hand edge of the browser, and set a background-color on the body that's same as the single color the left side is fading into? (I've checked the image and the left side color is not fading into one single color. So there has to be some editing involved to dissolve all of the left side into a single color.)

 

If this is not viable then you can also try using an absolute positioned div that contains the background, and a separate div for the content. That way you can set the height or the width of the background div with %'s but this is really painful way of doing this. and you may need some jquery/javascript to set the heights to match

 

Last option that I could think of is using a fixed background that's stretched across the full browser's length or height. This is not ideal for your client's requirements, but just to give you an idea, and perhaps maybe another angle that you can approach your client with. But I'm not 100% sure how this (site below) looks on a widescreen resolution. For example try the following website and try to zoom in & out. The background image stays the same, but only the text zooms in and out.

http://w ww.redchat .co.uk/

 

Achieved by setting height 100% to html and body. Then inside body there's 2 divs, one for the content and menu, and one that contains only the background(s). The div for the background is set to 100% height and width (or maybe just height) and absolutely positioned and given z-index. The content div however has position relative (for the z-index to work on certain browsers) and z-index set bit higher than the background div.

 

Hope this is useful, Good luck

[Susie]

Thanks for your input, BeeDev. It got me to thinking....

 

http://tinyurl.com/29wlcbb

 

Can you guys check this and tell me what you see? I'd love to hear from someone with a large monitor.

 

It's in the very beginning stages and I still have a lot of work to do on the page as a whole.

Edited July 15, 2010 by Susie

[BeeDev]

Looks ok if you zoom out of the page to imitate a large screen.

 

But the div#stripes needs a min-width (and also possibly an IE6 min-width hack) that's equal to the #wrap width. Because when the screen width is smaller than #wrap width, 100% width of div#stripes only matches the screen size, but not the page size (Try zooming in a until scrolbars appear and scroll to the right)

[Susie]

Thanks! I added the min-width (will look at IE 6 soon).

 

Do you think the image needs to be adjusted at all?

[BeeDev]

I don't have a good design eye, so to me looks fine, not noticeable. Don't take my word for it tho