Menu
I've made a script that re-sizes my website with some ratio: 'rat'. I do a scale but that scale creates white margins so I transform the entire html page and I sent it to origin in the coordinates 0 , 0.
document.documentElement.style.transform = "scale(" + rat + ")";
document.documentElement.style.width = 100 / rat + "%";
document.documentElement.style.transformOrigin = '0 0';
The problem I have is that some background images with the following property do not transform:
background-attachment: fixed;
Everytime I transform my html page the background images with background-attachment: fixed; don't transform.
You can check what I'm talking about in my portfolio here:
http://testedesignfranjas.tumblr.com/
Open the site in chrome and in FIREFOX and see the differences. The issue is in Firefox.
*sorry for my bad english
582
The background image can be set using the background-image property that is used to set one or more background images for an element.
The CSS background property is a shorthand for specifying the background of an element. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin and background-attachment together comprise the CSS background properties.
background-image The functional notation used to designate URIs in property values is "url()": background-image: url(images/image. png); Note: You should also specify a background color that will be used when the image is unavailable.
I have a partial answer. Firefox doesn't always treat nested, fixed elements correctly when using a transform. Instead of using background-attachment, make the div with the image position:fixed. The second div is relative or static, so it will overlay the first div.
<body onload="scaleAll(0.8)">
<div id="img1">I have a background image, am scaled and am fixed.</div>
<div id="outer">
I have content and am scaled.
</div>
</body>
I have moved the image outside the div and set img1 to position:fixed. Do the scaling individually, once for img1 and once for the outer div that has the content.
<script>
function scale(rat, container) {
var element = document.getElementById(container);
element.style.transform = 'scale(' + rat + ')';
element.style.transformOrigin = '0 0';
}
function scaleAll(rat) {
scale(rat, "outer");
scale(rat, "img1");
}
</script>
The style uses position:fixed for the img1 and relative for the outer.
<style>
div#outer {
position: relative;
height: 900px;
width: 900px;
}
#img1 {
position: fixed;
background: url("image.png") no-repeat;
width: 796px;
height: 397px;
}
</style>
JSFiddle Example
104
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
