I have tried to make gentle zooming backgrounds like on this site http://iworks.ozythemes.com but with css3. I have tried transforming with scale on the body but then everything scales, which I don't want.
Any clues?
How about the background-size CSS3 property?
You can change the value of it with javascript.
Unfortunately currently have no method to zooming a background image using css,maybe you can try background-size:cover; to fit the background image.
Related
I know there are alot of questions for the same topic but I have tried almost everything to get it work but did not succeed.
I am working on a WP theme and I have a header background image which does not scale properly when on mobile/smaller screens.
If anyone can help me scaling for that image.
Also, as this image will be a dynamic image, should I use an image tag or inline css background image?
For a reference, please have a look on the following link.
header background scaling
Have you tried "background-size" property of css?
If yes, how did you gave the values in it? in percentage or in hardcoded px because this solution works perfectly for background images. In your header's css or wherever you are having this image, do it like this, or you an specify your own percentage values according to your requirement:
background-size: 100% 100%;
If it doesn't work, let me know or if possible, please share the code so that I can guide you better. Hope this will help.
Cheers!!!
I have the following image:
http://i47.tinypic.com/219zkl.png
That needs to be the background for a .four-columns div in the Foundation framework. The div headline needs to be in the black ribbon, and the content in the box below.
The problem I'm having is getting the background to behave properly as the grid is resized in the browser. I don't want to write loads of media queries just for this background. I've tried using the background-size:cover property, but this leads to it looking horribly pixelated on the phone, and not covering the div correctly on tablet sizes. I've also tried absolute positioning, but that hasn't worked either.
Any help?
Thanks!
This background is too simple to use an image. Just go with pure CSS.
If you have trouble to produce angled borders, here is a simple tutorial>
http://www.howtocreate.co.uk/tutorials/css/slopes
I know it's possible to animate the transition between background-size when using pixel or percentage values using css3, but I can't get it working to animate between contain and cover. (I'm using webkit - chrome and safari)
I have made a fiddle here: http://jsfiddle.net/59Bhb/3/ that shows it working for percentage values, but not contain/cover.
Is it just not supported?
It's just not supported - list of properties you can animate
You can animate it like such in jQuery
$('myElement').animate({'background-size':'whatever size'}, 1000);
but it's difficult to get the desired result as to it resizes linear left-top to down-right regardless of positioning. I've tried putting this in a cms template but it didn't give me the effect I was looking for. Hope I helped
I used CSS gradient on one of my designs and it works pretty well. But there's a tiny problem - it looks messed up when the content in the page is less that the screen height. Can I define its height to be 100%?
I created that gradient on colorzilla and it seems pretty cross-broswer.
I needed to use background-attachment:fixed; and boom - the background will stretch instead of tile.
I am using CSS3 PIE for adding CSS3 Rules to IE.
http://css3pie.com/
It's great but I have a little problem now m using a semi transparent image for the background and PIE.htc automatically adds a gray background.
"background-color:Transparent;" is not working for me.
My question is this: how can I use CSS3 PIE with transparent background?
Okay, well the problem is that you are probably setting just the background property but not the generated -pie-background property. So, try this -pie-background: transparent;. Sorry, I may not be of much help because I am not familiar to CSS3 PIE.
My guess is that you're running into this issue: https://github.com/lojjic/PIE/issues/12
If you have a box-shadow applied, PIE draws that shadow all the way behind the background area of the element rather than making it transparent like other browsers. So if your element's background is transparent then you will see through to the opaque shadow shape behind it. Unfortunately there is no workaround other than removing the box-shadow.