CODEWITHSUNDEEP
htmlcsswidth
stephenmurdoch
stephenmurdoch

Reputation: 34613

Background is only as wide as view-port

Annoying problem!

When I zoom-in on my view-port window (happens in Firefox, chrome) and then scroll horizontally to the right, my background images are clipped

the images best depicts what's happening:

zoom in

zoom in - image is only as wide as view-port

zoom way out - problem doesn't occur

zoom out - problem gone

Here are some sections from my css which might be relevant:

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body{ width: 100%; }
header#header { width: 100%; }
header#header #background-image {
  height: 150px;
  background: url(/images/header/silhouette.png) repeat-x;
}

This happens with and without cssgradients applied too - really stumped here

Upvotes: 8

Views: 3155

Answers (1)

stephenmurdoch
stephenmurdoch

Reputation: 34613

The fix for this is to set min-width on the body:

body{ width:100%;min-width: 1002px; }

This fixes problem on all browsers that I have as well as iphone (according to iphonetester although I realise it's probably best to add some media queries now to really give the best solution to handheld users

Upvotes: 7

Related Questions