I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.
In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.
Does anyone have any idea how I could do this in CSS?
You might be able to achieve this effect using the CSS3 border-image property.
Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.
Steve
Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.
(source: sampsonresume.com)
This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.
If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.
The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.
CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.
Related
What I want to do is to make an image grow when I hover over it. That's simple enough with :hover in CSS, but I also want the surrounding content not to be pushed around. I'd also prefer that the image grow from the center rather than the top-left corner. I could presumably spend hours fiddling with CSS and a lot of media queries (positioning of the surrounding elements varies with the window width), resulting in very messy but functional code. However, it would be much better if there were a simple way to do this in Javascript or Jquery. Does anyone know a good way to do this?
Just use transform:scale() on :hover of element.
It will not push surrounding content and it should scale from center (depending on positioning of given element).
I'm building a parallax scrolling website (aren't we all) that amongst other things, reveals an image as the user scrolls.
I've done the 'reveal' by putting the image in the background, and placing a solid filled div on top. I then animate this div from 100% height to 0% height based on the scroll position, thus revealing the background image.
I'm doing this kind of thing multiple times and unfortunately I'm getting slow down.
Using Chrome's built in Timeline feature, I can see that most of this slow down is from Image Decodes. For the above reveal, it's re-Decoding the image every frame, which takes 22ms per image per frame.
Does anyone know when the browser needs to do Image Decode and when it doesn't? It seems obviously to me that it would need to if I resized the image, but not that it would need to when I just half cover the image?
Thanks for your help.
I've battled with this problem a lot also. As yet I have not found anything concrete and my proposed solution does not seem to work in ALL cases and I have not been able to ascertain why.
Anyway...
It appears that when you animate a solid element over the top of an image, chrome forces a recode of the image.
There are two things I have tried and for the most part they have been successful.
If you add -webkit-transform : translate3d(0,0,0) to the covering element, you should find most, if not all of the image decodes disappear.
If adding the above CSS to the covering element itself does not help, try adding it to the image instead, or indeed try adding it to both elements.
My understanding is that using the 3d css property pushing the image into its own composite layer which is cached and handled by the GPU rather than the browsers software renderer.
90% of the time I have found one of the above combinations successful. I hope it helps.
How do you animate the property? I think you may have plenty of alternatives to just animating the height (which is some sort of resize of the container).
Maybe it's less intensive to just 'clip' the background image with another element. I found a thread about it on StackOverflow with some suggestions. If you animate with javascript, unfortunately pseudo elements are no option...
Clip/Crop background-image with CSS
There are many of us looking for a Javascript/CSS3 solution that can provide a windows7-like UI within a webpage, without using flash.
We need an Opacity mask, rounded borders, and a Blur...
We've got the Opacity and the rounded borders, now we need to be able to apply some Blur effects to a semi-transparent Div.
I tried the BlurFast effect from the Pixastic Library, but it only blurs the actual image, not the background we are seeing trough the image...
Basically, we want a Div to act as a Blur Mask over other contents...
If someone actually succeeded with this, i'll be glad to know its possible :) Thank you
http://t.co/fFLPKnzC
very good article on blur showing the state of the art
sadly "masking" parts of your page, that blur everything behind, is not that easy.
maybe the suggestions in ths blog help you out, as they are very straight forward and from a totally different direction..
therefor to embedd html within svg and use svg-filters on html elements later on
Thought this could be relevant: Aero
Personally, I think the fact that the author states this to be "In other words, one of the most messy and most ineffecient implementations ever"... AND that he can onlt get the effect to work in a single browser... to be extremely telling.
There is no way to do this efficiently or cross-browser at the moment.
The only way you might be able to do it is by using Pixastic to create the blurred image within Canvas, export as dataURI, then use that image as the background for your div. If the div moves, then the positioning of the background-image should move accordingly.
Simple question, really. I just don't have the knowledge to do this with JavaScript, and to also make sure it works with (almost) all browsers...
I am going to design a set of images of a person pointing with one hand in several directions. (Up, down, left, right, diagonal, etc.) Basically, this puppet will be pointing at the location of the mouse. To do so, I want to use an animated GIF file to contain all the images and then use JavaScript to bring the right image to the front, based on the position of the mouse in relation with the image.
My knowlegde of Javascript is very limited, though. Before I even start creating the GIF images, I want to know if it's possible and if there's a solution that would work on any web browser. (Unless it doesn't support JavaScript, of course.)I know it's possible to delay an animated GIF from JavaScript but is it also possible to modify the exact image that needs to be displayed?
As far as I know, this is not possible.
Stuff like this is usually done using the "CSS sprites" technique, where the various stages are glued next to each other into one giant image. That image will then be used as background-image in a smaller element. background-position will determine which image is shown.
Whether this works for you will depend on whether your images are all the same size or not. It has the advantage of working reliably in all browsers, even IE6.
Flip is a great JQuery plugin for flipping blocks, but it doesn't preserve the background while it animates the flip.
For example, I have this pretty background here, before I flip. While flipping, it gets ugly.
Is there a way I can flip this div nicely, keeping the pretty background I have, and maybe even achieve a smoother animation than I can get with Flip?
If I need to dive into this headfirst and code my own function for flipping a div, that's also doable, and I'd really appreciate some pointer there, if that's what I must do.
Thanks so much!
Try the jQuery QuickFlip pulgin, this one seems pretty neat with handling the background.
Try looking into momoflow, its a coverflow type of application that animates the background to different angles.
It's using the canvas tag however, which could be an issue for you if you want IE compatibility. However the technique the dev is using is to chop the the image into several vertical slices and animate their position. You could extend this functionality to introduce a full flip!
A really cool way to do this is use CSS 3 transformations. It's much better than using a script; you should always avoid using scripts where simpler methods can be employed.