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.
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've searching for a while, but didn't find a solution.
The problem is that I need css triangle with fixed height (50px) to be stretched on 100% width of the div.
Surely, it can be done via js or jquery, or by replacing with svg, but is there any pure css solution for this?
Pure CSS triangle is manageable via borders, and borders doesn't support thickness in percents. So I guess it's impossible.
We've coded a site, everything works great until you start using the zoom function of Safari/Chrome.
It seems some elements zoom correctly (see the search in attached screenshot) making a horizontal scrollbar, but html and head don't scale more than 100% of the viewport so when you scroll right making it look pretty bad…
I've tried width: 100% !important and many other things but nothing seems to affect it, any ideas would be most appreciated!
Fix seems to be putting a min-width on the body that's the same as the containers width, not ideal but seems to do the trick…!
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.
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