Background image being truncated.

[orangeworx]

Hello all, I’m new to post here but I’m a regular reader of this site’s articles, there are always new things to learn and experiment with.
And well, all this experimenting lead me to this pickle! I’ve been experimenting with WP theme creationg and I decided to have a 1600×1200 background image behind predefined width content.
Everything is as it should be, positioning, no stretch… etc. But the issue is a little more puzzling for my not-so-advanced CSS knowledge. I noticed something happening on different monitor resolutions purely coincidentally. I work on a dual monitor setup, a 1366×768 laptop screen and a 1920×1080 external display. It so happened that I was loading the page on Chrome on one screen and another on FF. On the big screen, the bg displays normally, full size – height and width. On the laptop screen, the image is cut at the sides (which is acceptable) and also at the bottom, right where the browser window cuts off (happens to all browsers I tested, IE,FF and Chrome. And that’s a big PIA because it breaks the effect on the bg image and rest of the scrollable content (height-wise).

Any insight on why that might be happening?
Thanks for reading!
FF

[Paulie_D]

Without a link or seeing your CSS…it’s going to be tough to help you.

I do have one question though.

You say that at 1920wx1080h it’s displaying proper ‘full’ width (1600w) without stretching…how does that happen?

Equally, at 1366w…how can it be cut at the sides when it’s 1600 wide?

This might give you some insight: http://www.w3schools.com/cssref/css3_pr_background-size.asp

[orangeworx]

hey there Paulie, thanks for the reply. I apologize for the total noobish post, I wasn’t sure what info to post so I thought I’d get asked for it.
To answer your question,
– my 1600×1200 doesn’t stretch because it’s being used as the body bg and for the html bg I’m using a bg slice to fill the rest.
– on the 1366 screen, the image goes bleeds off the screen but it’s not visible, 117px on either side to be exact because the alignment remains.

What I have in CSS is:

html, body, #pg_wrap {height: 100%;}

body > #pg_wrap {min-height:100%;height:auto;}

html {background:#0b0705 url(images/body_bgd_slice.jpg) repeat-x top left}

body {background:url(images/body_bgd.jpg) no-repeat top center;

height:100%;

font-family:Arial, sans-serif;

color:#444;

}

thx again for the w3schools link, I had entirely forgotten about this great learning tool, I’ll catch up on some reading

Edit:
I did try fiddling with the background-size property which no apparent changes which leads me to think it’s something else entirely. Would firebug be able to reveal debugging information?

[Paulie_D]

Like I said, without a link it’s tough to comment.

You say the image is ‘cut off’ height-wise on a laptop…what does that mean.

Is it not cut off on the larger screen too as it’s 1200 tall on a 1080 screen?

Frankly, I have to think these images have HUGE file sizes (given the resolutions)…and that’s not usually a great idea.,,,but, if that’s what you want…

[orangeworx]

Hey Paulie, sorry I took time to respond… I figured out what the issue was and found a new best friend! firebug!! i was able to “turn-off” specific css styling and discovered where the issue was coming from. That first line of code with height at 100% is relative to screen size/browser window size so it was truncating the background image at the bottom of the window and not displaying the rest of, only displaying the background color set in the html css.
my background image size is ~200kb which is not so bad considering the rest of the site is basically all css styled and few icons here and there at a few kb each…
Anyhow, thanks for taking the time to respond.
Fredo

[Author]

Posts