Menu
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
- image is only as wide as view-port
zoom way out - problem doesn't occur
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
278
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
Fill the Entire Viewport with the background-size Property It is possible to set the CSS background-size property to cover. Using this value, the browser will automatically and proportionally scale the background image's width and height so that they are either equal to or greater than the view port's width and height.
background-size:100%; = background-size:100% auto; = the width is set to be 100% large and the height of the background image follows respecting the image aspect ratio.
In an SVG document, the viewport is the visible area of the SVG image. You can set any height and width on an SVG, but the whole image might not be visible. The area that is visible is called the viewport. The size of the viewport can be defined using the width and height attributes of the <svg> element.
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
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With