I wonder if anyone can help me?

 

I have been trying to do the above for a number of hours and I think I have been looking at the code too long!

 

I have the following:

 

- a background image placed on the body tag which is a simple gradient from blue to white. This repeats-x

 

- a div (.background-graphic-wrapper) set to 100% and a z-index of -2 so it sits behind all the main content of the site (it's not set to -1 as they is another element above it later on in the code)

 

- within .background-graphic-wrapper I have .background-graphic set to margin:auto so it is centered. In this div I have a background image set to no-repeat.

 

What I want it to do:

 

- The background image in .background-graphic has graphical elements which make up the visual design of the site. This should only be seen if the user has a large enough screen. For those that have smaller screens, the image (and therefore the design) should simply move out of view to the left / right of the browser window.

 

What it is currently doing:

 

All works fine on a large screen and the background graphic sits perfectly behind the main content and continues the design of the site outside of the main wrapper which holds all of the content (apart from .background-graphic-wrapper and .background-graphic ). See screen grab-1.jpg attached

 

However, when viewed on a small browser window, the background graphic does not disappear gracefully off to the left of the window. Instead it bumps off the side of the window and moves under the content. See grab-2.jpg attached.

 

As you can see from the grabs, the graphic is the final part of the circle graphic / gradient behind the globe. which needs to just move off of the browser if viewed on a smaller screen.

 

My Code ( i have simplified it to the elements involve so as not confuse things!!):

<div class="background-graphic-wrapper">
 <div class="background-graphic"></div>
</div>
<div class="main-wrapper">
 ***Site Content Here***
</div>

.main-wrapper {
width:902px;
text-align:left;
margin-left:auto;
margin-right:auto;
}

.background-graphic-wrapper { 
z-index:-2;
overflow:hidden;
width:100%;
position:absolute;
top:0;
left:0;
}

.background-graphic {
width:1211px;
background-image:url(images/background-graphic.jpg);
background-position: top left;
background-repeat:no-repeat;
height:360px;
margin-left:auto;
margin-right:auto;
}

 

Essentially, I want a div with, say 1200px, set to center which only displays the proportion of the 1200px that can be viewed by the users screen. Any of the 1200px that do not fit on the screen to the left or right should simply not be shown.

 

I am not sure I am explaining this too well so let me know if not!!

 

I am pulling my hair out so if anyone has any ideas they would be greatly received!!!

 

Thanks!!

What you could do is screw IE6 and use a stransparrent png for the top graphic... (and placing the code/page online is SOOOOO much easier for us people trying to help you...) That's all I have to offer without getting dome sleep first...

On the background graphic do something like

 

padding-left:50%;
margin-left:-300px;

 

That way as the browser window gets smaller, it'll slide out to the left. Is that what you want?

That way as the browser window gets smaller, it'll slide out to the left. Is that what you want?

But with this method if the browser window is smaller than the site width you will not be able to scroll to the part outside the browser window...

Thanks for the replies!!

 

But with this method if the browser window is smaller than the site width you will not be able to scroll to the part outside the browser window...

 

Actually, that is not a problem as the content it only 'design' so if it is off the page I do not the user to be able to scroll to it.

 

I will give this a go and let you know how it goes!!

 

Thanks

Bocaj,

 

Tried that but that doesn't allow the background graphic to move freely around if the browser is re-sized. The graphic (the circle shape and gradient) has to be centered for the graphic to meet the logo in the main content.

 

Drewster,

 

I do not really want to add the image as a png and, if I thinking right, that would mean my main width would be too large as it would include the graphic (circle shape) in the main content??

 

I am unable to put the files online but would happily DM it to anyone if they would be kind enough to take a look?

 

Thanks for your help anyway guys - appreciated!!

Bocaj,

 

Tried that but that doesn't allow the background graphic to move freely around if the browser is re-sized. The graphic (the circle shape and gradient) has to be centered for the graphic to meet the logo in the main content.

 

Drewster,

 

I do not really want to add the image as a png and, if I thinking right, that would mean my main width would be too large as it would include the graphic (circle shape) in the main content??

 

I am unable to put the files online but would happily DM it to anyone if they would be kind enough to take a look?

 

Thanks for your help anyway guys - appreciated!!

 

Oh i was under the impression you had three layers, it'd probably be easier if their were.

 

1. The blue circle - could be jpg too, as the gradient doesn't change, so it should match on the y axis nicely.

2. The header image (including half the circle) - Solid jpg

3. The background gradient - 1px width repeating

 

Then apply my approach the to blue circle [#2], and as the width is reduced, it would slide out of view to the left.

 

A live link would help, but i don't see why that approach wouldn't work, and i'm pretty sure i've done it before.

 

Something like the attatchment

 

P.S never realised paint was so damn awkward :E

Ah - I see - but how would i make slice one go off the page if the browser was not wide enough. Say I set slice one to float alongside the main content (slice two) and then slice three to sit the other side, if i were to make the browser smaller then the content would jump down - how would I make the the side columns not count as content so they go off the page if the screen is too small to view them?

 

Thanks