I'm trying to make the background image as professional as possible so I'm thinking it's best to resize it based on the size of the browser or the resolution (not sure what's usually used, but I think browser size makes sense here). The idea is if the viewer screen is small, the background image gets smaller, and as the screen gets bigger, the image expands to fit its maximum size.
I will try a CSS or even Javascript (JQuery) solution as needed.
I guess you're looking for something like that:
http://css-tricks.com/how-to-resizeable-background-image/
You will need to stick to CSS 3 background-size property to achieve this: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Without using CSS 3 you cannot resize the background image in any way on the client.
Related
The background customer gave us has 4:3 aspect ratio and looks horrible when repeated on modern screen. I thought if I can mirror each repeat horizontally it would look nicer. Is this possible with plain CSS?
Not with background images. You can mirror single elements, but not a part of a single element (as a background image is).
I guess the best option would be to save the image including its mirrored version into one graphic file and repeat this one.
So I am pretty new to this but I am wondering for a web page that has a big image in the middle like github:windows page, how would do you work with the image inside that div/area depending on the screen size? is there a way to get images to resize or be cut off depending on either window size or screen size? is it typical practice to use media queries to change the picture based on the device? How is this done in css (can I reselect src in css for the img tag)? do you have to use a window resize js event to continually re-check like masonry?
I know these are quite a few questions (sorry) but I am really just looking for advice on best practice approach as again I am new to this....
always appreciated!
Adaptive Images may be what you are looking for. It offers dynamic resizing and caching of images based on screen size. It's very easy to implement and has very few dependencies.
I need my site to be able to resize and crop an image based on the viewport on a browser. I've so far managed to dynamically resize it with an imagemap, but can't seem to crop it dynamically. I'd like it to crop and scale simultaneously without distorting an image. The image I'm using is 1920x1080 which is far bigger than most browsers so cropping the edges while scaling would make it appear similar on different browsers.
I use this jQuery plugin quite often. :)
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It sounds like you can already detect the viewport size somehow. You just need the CSS or javascript to crop an image. In that case, I'd recommend this article:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
You could
1) Use negative margins.
2) Absolute position the image in a smart way.
3) Use the CSS clip property.
I'd like to center an image in the browser window and apply a 3D transformation to it. This all works fine until the image is larger than the browser window, in which case I lose the parts of the image that would be off the screen, even though after the transformation, the entire image would fit in the browser window. I don't want to show scrollbars. If I make it a background image, I can transform the div, but I lose the parts of the image that would be off the screen if it was not transformed.
Is it possible to show an image larger than the browser window without getting scrollbars?
Have you tried using the CSS3 Background Size property?
You can read about it here. I believe that if you use the property
background-size:cover;
Along with it's webkit and moz-webkit, you should get the result you're looking for. Try it and let me know, and if not that link there should be useful.
Hope it helps! :D
I started from scratch with a small example and managed to get it working by using overflow: hidden; on a div that contained a div that contained the image.
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.