Background Size Trouble Options

[christil]

I apologize if this is the wrong forum. I'm ready to pull my hair out over a background image problem I'm having. I know backgrounds will display slightly differently on different monitors due to size and resolution, but mine seems to be getting chopped more than most. I've already tried a little CSS with background auto, etc. without any luck.

When I view my background, my computer displays it perfectly while my husband's chops it. I *know* it's possible to make them show up somewhat the same. When I view classroomfreebies.com on both computers, I can view the crayons at the bottom of the page on both computers. One computer does show slightly more than the other, but I'm still pleased with the look on both computers.

On my website, the frogs keep getting cut off on one computer (left to right and top to bottom). I made a blank blog, but copied the background so I could share the url. http://designtesterforme.blogspot.com/

What on earth do I have to do to get this background fixed?

Thanks!

[Darin McGrew]

It looks like classroomfreebies is using multiple images manipulated with JavaScript.

The simplest answer is to use the new CSS3 features for resizing background images. But that won't work on all browsers, and it can look funny if the browser isn't shaped like what you expect (tall and narrow, vs wide and short).

[christil]

It looks like classroomfreebies is using multiple images manipulated with JavaScript.

The simplest answer is to use the new CSS3 features for resizing background images. But that won't work on all browsers, and it can look funny if the browser isn't shaped like what you expect (tall and narrow, vs wide and short).

I tried using the CSS contain/cover/auto settings, but then I had two versions of the image. One was behind the header and didn't change. The second was behind the content and did change. Is there a way to use CSS for background and have the image take up the entier screen, not just a section? I'm guessing it's something to do with frames?

[Darin McGrew]

The CSS3 background-size property is the simple way to do it. If you're having difficulty getting it to work, then you may be doing something wrong, or you may be running into browser issues. Or both. It's hard for anyone to say without the URL (address) of a document that demonstrates the problem with your best effort.

[christil]

Thanks so much for the help. After you said the other site looked like they used javascript, I was able to fix mine with Java script too. I also adjusted my initial background design to push elements closer to the middle.