12 replies [Last post]
xenatorres
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2008-08-20
Posts: 17
Points: 17

I caught this issue by chance and wonder if anyone knows how to correct it.

I am using a background image on the body tag - the image is a gradient that has a set width, and then repeats y down the page as needed.

There is no issue in IE.

However, on Safari, Firefox, etc, if the viewer has a smaller view window, the gradient image is shrunk. So instead of using the width I set it at (in this case 1225px), it adjusts to the size of the window, mucking up my layout.

Here's some screenshots:

www.julieruffell.com/gradient1.jpg (how it SHOULD look)
www.julieruffell.com/gradient2.jpg (how it looks when the window is shrunk)

The only way I can think to fix this issue is to move the image into the div box setting the size of the site, however, the background will only appear there if I set a height value, but I use the layout on many different sized pages, and want to be able to add text without having to resize the background every time.

Does anyone know how to make FF and Safari leave the image at it's correct size, or how to put a background image into a DIV that repeats as long as there is content, withOUT a height value?

This is only an issue because the background image is a gradient. Any other image - no problem. Bizarre!

xenatorres
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2008-08-20
Posts: 17
Points: 17

And just in case anyone wants

And just in case anyone wants the code on the body and/or main wrapper:

body {
background-color: #000000;
background-image: url("images/newheader.jpg");
background-repeat: repeat-y;
background-position: center;
}
 
.wrap {
margin-left: auto;
margin-right: auto;
width: 1224px;
background-color: transparent;
position: relative;
}

xenatorres
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2008-08-20
Posts: 17
Points: 17

Correction - it does do this

Correction - it does do this on IE too. Any suggestions would be AWESOME.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 13 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the image is not shrinking.

the image is not shrinking. You have set it to center, which it is doing - cropping both the left and right sides of the image as the body shrinks.

xenatorres
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2008-08-20
Posts: 17
Points: 17

If it was cropping, the

If it was cropping, the shading wouldn't be moving. It would just crop - and not completely change the alignment of the entire image - thus ruining the look.

I also need the image centered.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 13 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

it is cropping. the image is

it is cropping. the image is centered on the body and being cropped left and right as the body shrinks smaller than the image width (as previously stated). the shading stays centered with the body - not the other elements. if you'd like help in fixing it, help us by showing us your code or posting a link!

I can take a guess that the shading becomes misaligned as soon as a horizontal scrollbar shows. you could try a min-width on the body to match that of the wrapper...

xenatorres
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2008-08-20
Posts: 17
Points: 17

Okay - I did a test page I

Okay - I did a test page I can show (for privacy reasons I can't show what this site is for):

www.julieruffell.com/test.html (all the CSS code is on the page to make it easy to look at)

I tried the body width, but that didn't solve anything.

The coloured boxes are removed images. Ignore any code that doesn't have any HTML to match - I had to remove some items (but it doesn't affect the issue).

TIA!

xenatorres
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2008-08-20
Posts: 17
Points: 17

wolfcry911 wrote: I can take

wolfcry911 wrote:

I can take a guess that the shading becomes misaligned as soon as a horizontal scrollbar shows. you could try a min-width on the body to match that of the wrapper...

And, yes, you are correct. That is what is happening. I just can't seem to fix it (tried min width)

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 30 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Did you try my

Did you try my code?

background: #colour url(image) 0 0 repeat-y;
?

I think, because of how wide the image is, setting it to start at the left (actually top, the second 0, would be ignored because it's repeating down, but I always use two coords) should mean it would just get cut off if the browser isn't wide enough, instead of moving around to stay centered (it still looks like it's to the right to me... the whole image looks like dark on the left and white on the right).

If you want the left edge of the image to start a bit inwards from the left instead of right on the left side, you can set some other coord there:
background: #colour url(image) 40px 0 repeat-y;
or something.

IE has issues with using em as the unit for bg position but otherwise you could use anything there (though a % would prolly give you the same trouble you currently have).

I'm no expert, but I fake one on teh Internets

xenatorres
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2008-08-20
Posts: 17
Points: 17

Stomme poes - the code keeps

Stomme poes - the code keeps the picture still, but now my image isn't centered. I could center it for MY screen by moving it, but on someone else's monitor, it will either be left or right. For example, on a widescreen monitor, since it's not centered it's WAY FAR left.

As noted, this image MUST be centered.

If I have to, I will put it in the wrap div - but I can't find a way to make the background image work without a height value. But if I have a height value, I have to set a custom height for EVERY SINGLE PAGE on the site - thus really defeating the purpose of CSS. So, is there a way to have a background image on a DIV and NOT have to set the height value? (I have already tried "100%" and it doesn't work - the image doesn't appear at all).

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 30 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yeah height: 100% has special

Yeah height: 100% has special rules and most of the time it's ignored... there's an explanation for that but...

could you put that page up again?

We might be able to find a way to center this... however you also need that when the browser is too small, that the image at some point can't move any further left (to remain centered)?

Maybe post (somewhere) some screenshots of different screen sizes with the bg image and what you want it to do.

Does it otherwise do what you want when you put it in a div (other than the height issue)?

I'm no expert, but I fake one on teh Internets

xenatorres
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2008-08-20
Posts: 17
Points: 17

I'll create a page with the

I'll create a page with the new issue later today. I can't just now cause I'm uploading a massive video file. Smile

xenatorres
Offline
Regular
Last seen: 12 years 19 weeks ago
Timezone: GMT-8
Joined: 2008-08-20
Posts: 17
Points: 17

Ugh. Never mind. I'm just

Ugh. Never mind. I'm just going to have to deal and set a height for everything and put in the wrapper. People with lower res screens are just seeing a REAL MESS. I give up.

Thanks though everyone.