Does anyone know if using a CSS sprite for the background image of a draggable element has and adverse effect on performance - especially on touch enabled devices such as tablets or mobile devices?
Each item is around 50px x 50px and the sprite is 800px x 1400px (20kb)
I just wonder if the browser is working hard to re-position the background image when it's being dragged and re-positioned?
When you drag an element that has a background position set, the background position is not adjusted, just the element's left and top values. 800 x 1400 is fairly large for a sprite and even at 20kb, that would be you're only performance issue. Especially on mobile devices.
Related
I'm working with images that have been aligned with rule-of-thirds on the focus of the image, and background-image to put the image in the page.
When a user is on a tablet (or bigger) device, I'm using background-position:50%; which is fine; I don't mind that the picture is aligned off to the side.
However, on mobile devices, I would like the subject (which is on the right rule-of-third line -- see my JSBin for an example) to be horizontally centered on the screen. I know that I can use different percentages, such as background-position:75% 50% to get it close, but as the width of the device changes the 75% is no longer "center".
Is there a way, without writing a hundred different media queries so that it's always centered, to have background-position be dynamic enough to always center an image on mobile?
Here's a JSBin of what I'm looking at.
Some assumptions:
Pictures will always be aligned on rule-of-thirds
Pictures will always have the same physical dimension
Work in IE9+
Not worried about vertical alignment
For smaller than 768px try:
background-position: -50vw;
And you may have to set the background size to 150% instead of cover for this case.
So I've spotted a few sites lately where the background above the fold always perfectly crops to the viewport. For example - if you look at http://startbootstrap.com/templates/grayscale/ or http://simplesimple.co/currency/ on a mobile, tablet or desktop device the background image always fills the viewport even at different orientations.
It's not as simple as adding a max-width: 100% to the image as this would only fill horizontally. My first thoughts are that it is the art-direction use case, where breakpoints target different crops of the image. It seems like a lot of work to achieve this effect though so I wonder if I'm missing something.
With reference to http://startbootstrap.com/templates/grayscale/, the main banner image has been added as a background image and its background-size property has a value of cover which will stretch the image to fit the screen at any size.
Then there's tricks like setting the main section tag to have a display property set to table which allows its child div (containing title and sub title) to be vertically centered with display: table-cell and vertical-align: middle
Its built on twitter bootstraps framework which has grids and media queries built right in allowing for different images to be added via the background-image property for each screen size
I want to draw a complex chart on a canvas element.
The canvas has width and height 100%. The div container of the canvas has a width of 100% and height 640 pixel for mobice device 1. (see below)
Lets assume I draw a rectangle:
void rect(x, y, width, height)
context.rect(0,0,100,640);
For mobile device 1 I have this context:
width: 480px,
height: 640px
For mobile device 2 I have this context:
width: 1024px,
height: 768px
When I switch now to mobile device 2 my context.height changes from 640px to 768px. The result is that the rectangle with a height of 640px leaves now a gap between it and the top margin of the gap: 768px - 640px = 128px gap.
Question 1)
So the canvas from itself is not able to stretch its content? I do not ask for stretching the canvas itself, thats easy, I just want to stretch the content inside the canvas.
Question 2)
When Question1 answers is "No it can not stretch its content!" then How do I correctly resize its content? Is there a redraw event where I can hook into when the mobile device changes from portrait to landscape view? Or is it up to me to take the height of 640px as 100% and divide the content areas in my canvas into x-% areas and compute for example what is 40% width in pixel related to the 100% (640px) ? This way the content would scale up/down when the height of the mobile device changes.
Q1: You can "stretch" (==scale) the canvas content using canvas context.scale(scaleX,scaleY).
Note: The content will distort if scaleX is not equal to scaleY.
It works like this:
context.clearRect(0,0,canvas.width,canvas.height);
context.scale(768/640, 768/640);
// redraw all your content which will now be 768/640 larger
// and, of course, do this in reverse if the device is reoriented the other way.
One problem with mobile reorienting (portrait/landscape) is that multiple resize events will be called as the device reorients.
To prevent this, you might look at jquery mobile's throttledresize event which executes just once for each reorientation. jQuery has the added benefit of simplifying cross-browser issues which do arise when reorienting and resizing.
If you don't want to add a full library to your project, throttledresize works by starting a timer when it notices resizing and executes a callback function when the timer expires. That way you avoid the multiple resize events that occur with mobile.
You can maybe try to transform the canvas element using CSS "transform"
#canvas {
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_scale
I have a single gif image (1px X 1px) which is used as a border for 960 grid framework of my website.
All the layout fits in the correct place in normal state even on increasing the zoom percentage also.
PROBLEM: In case of decreasing the zooming level, border is invisible for certain zoom levels.
e.g. it is visible in 80% but not for 90%.
Is there any cross-browser CSS code OR any other fixes for this issue?
Can we use any specific CSS property to restrict re-sizing background image for browser zoom?
Thanks
I'm working on a project for an Artist, the project has been passed to me as the design has been completed. I have receieved the design in a .psd file and the size is huuuuuuuge 2504px x 1781px to be exact!
As there are lots of patterns and gradients on it, I'm a little unsure as to how to set the image up. I have put the image up online, I think the first pressing thing is to resize it to suit more modern screen sizes.
The image is attached, Any help or suggestions on how to manage the image are much appreciated.
Cheers
That´s not a very flexible design for different aspect ratios, stretching it on a wide-screen monitor will not look pretty.
I would probably make multiple versions of the image (different sizes) and use html5 and / or javascript techniques to serve the right image to the visitor.
I would not use it as a background image but put it in a div behind the rest of the content so that I can scale that div and the image to be 100% wide. Positioning it in the bottom-left corner should make the most important part (the frame) always well visible.
I hope for you that mobile browsers in a vertical position are not a requirement...
you can split ('old style' way) the image in parts (in a glace, a header, a right column, a footer) and use'em as background images for divs. I suggest using photoshop built-in funcions "save for websites" to optimize the image (as Jpeg) to get the best ratio 'small file - best appearance' (something like medium (50 or 60) quality, multiple passage otpimization and a 1000 px width).
This if you want to keep the fixed layout..
What resolution is the website designed for?
I found that resizing the image to 1280px width (911px height) works nicely for a browser window size of 1024x768, which is pretty much the minimum that anybody's going to be using these days.
With this CSS:
body {
background-image: url('/path/to/your/background.png');
background-position: left bottom;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #000000;
}
.. the main part of the picture (people holding the frame) will always be in view, and larger browser viewports will get more of the top and right portions of the picture.
However: Anybody with a browser with above 1280px will see the plain black background color.
Edit: There's also the CSS3 property background-size: 100%;, which will automatically shrink/stretch the image to fit the browser viewport.
Update: I found that PNG-8 gave me the best quality-vs-filesize for the resolution I mentioned above. It came in at 280KB, whereas a comparable quality JPG was in the 330KB range.
Consider using a fixed size layout with the same aspect ratio as the image and resize the image to the same dimensions as the layout. You can then either set the background colour to the same black as the image or a complementary colour.
A layout of around 1000px * 700px works well on most computer displays.
If you must have a flexible layout then it would be really nice if you could separate the components of the image (do you have all the layers?). ie the frame/people, the red floral designs of the corners, and the background with crossed bands.
Then use several divs and some javascript so that the frame and hands stays locked in position relative to the bottom left corner, the floral designs always gravitate towards the four corners and the background moves so as to keep the frame in the dark diagonal area; kind of sliding up and to the right along the red band. (I can see it in my minds eye bt it's hard to describe.)