Jump to content

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


Susie

Recommended Posts

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....

top-background.jpg

Link to comment
Share on other sites

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....

sample.png

Edited by Susie
Link to comment
Share on other sites

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/

Link to comment
Share on other sites

  • 2 weeks later...

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 :P

 

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

Link to comment
Share on other sites

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 by Susie
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...