I'm trying to get a background image to behave like GE's background on their website:
http://www.ge.com/stories/powering-gas-engines.html
I was wondering what CSS or javascript techniques they were using to get that kind of effect.
There is a jQuery plugin that can help you accomplish this, and he's laid out the code in his description to give a good idea of how it all works. What I like about this one is it also maintains aspect ratio.
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
it is an image, rather than a background image, and they use a javascript function called from the onresize event to set the width and/or height of it to the full width of its containing div.
It is possible to create a similar effect by using the css3 background-size property, but this is only supported in the css3 compliant browsers.
css width: 100% for both container and background image and use media queries to control minimum windows size to use elastic width or fix width
Related
hey guys i was building on of the web app and Image in my webpage looks blurry even if it is high resolution. can you guys help me to fix it?
as you can see here, it looks blurrry.
Here is my code:
#album-cover img{
position: absolute;
top: 15px;
}
<img src = {name.imageURL} width = "150" height = "150"/>
how can i fix this? thank you
What site are you working on? i meant what platform? If you have a high res-image and then resize it using CSS, chances are that it will turn blurry, whereas if you crop it or resize it manually to 150px x 150px and upload it, it will retain its sharpness even if you omit the width and height in css like this:
The problem may come from your styling. You are setting the size of the image 150x150, which may be different from the original ratio. Since the image must be resize to that ratio it could lead to this behavior.
You may either try to use only width or height and let the other property auto calculated, or you can try using max-height or max-width instead. Another solution is that you can resize the image using some library before display it.
Insert this line in your styling for the image. When images are being downscaled (or upscaled), an image rendering algorithm has to be used. The line below specifies this rendering algorithm to one that looks clear.
image-rendering: pixelated;
Check this link out: https://www.w3schools.com/cssref/css3_pr_image-rendering.asp
Just wondering if theirs a more efficient means of doing this?
$(window).resize(function()
{
$('.title').css('font-size',Math.floor($(window).width()*0.2)+'px');
$('.title').css('background-size',Math.floor($(window).width()*0.5)+'px');
$('.title').css('padding',($(window).width()*0.1)+'px 0px '+($(window).width()*0.1)+'px');
}); `
I'm doing this to get my web applicatiion (cordova/phonegap) to resize properly for all devices. I've tried using viewport and had mixed results especially when it came to getting text to scale relative to dpi and screen dimensions.
There are a few ways of doing this.
There are some pre-made libraries such as BootStrap for mobile view.
You can use percentage instead modifying the css through jquery.
For some help a nice tutorial site for css is w3Schools css tutorial page.
Each result has different results.
Now on your example code you are using window.width* 0.5 or window.width / 2 which is half. If you are in the root element with no width settings you could use 50% instead of pixels to easily achieve the effect you are looking for.
However it is most likely not like that. You may have to specify widths of parent elements to achieve this.
have you considered using css #media .
it is more neat , and doesnt require javascript event to be triggered.
more info can be found here
http://www.w3schools.com/css/css_mediatypes.asp
You can use #media queries to serve the purpose.
How does this website http://www.rallypoint.com scale their background pictures?
As I change the size of my browser I can see the height css attribute on the div element changing so I'm assuming it's some kind of javascript working in the background.
The javascript function I see in the body is new Slider however I can't find any reference anywhere on the web about this except JQuery UI Slider which does not seem relevant, is that a custom function they wrote?
They use the 'background-size' CSS3 attribute:
background-size: cover !important;
Read more about it: http://www.css3.info/preview/background-size/
Well, there is certainly more than one way to get the result you want.
I found this the most helpful ...
Perfect Full Page Background Image
That is called FLUID layout.... and it is dependent on CSS and not javascript
read a little about boots strap and other CSS properties
By the way here you can see the background-position as 50% in CSS(learn to use chrome development tool)...so that is the HINT
I'm working on my first responsive website and I want to know how to make all of the images resize dynamically. I've worked around it for now, but I'd really like to rethink how I did this. Is there a jquery plugin for this that is easy to implement (I don't know alot of js)? Is there a better way?
My site
You actually don't need any js for this - this could be achieved with CSS alone. As you figured out from looking at the source in the link in your comments, all that's needed for dynamically resizing an image is the max-width property set to 100%. However, if you want the image to increase in size dynamically as well then you'll have to use width:100%.
See the example in this jsFiddle. You'll notice max-width does not go past the image's resolution - on the otherhand width ensures the image fills the container (which some see as a disadvantage because they lose the resolution when the width exceeds it's original).
There is a catch though, max-width property is not supported in IE6 or below - it was only introduced in IE7. This article here provides a workaround for that though.
But resizing an image through css doesn't make an image responsive.
A 200 kb image will be 200 kb when it is 1000 px wide but also when it is resized by css to 50 px wide.
I would like to see you guys' faces when waiting untill that large images is loaded on your smartphone
Can you resize images to be fullscreen with javascript in the same way you can with flash?
Ive found this link but its for an entire plugin with slideshow, etc not just the feature I need for a more custom design:
http://buildinternet.com/project/supersized/
And this plugin seems to only with with background images:
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
Ideally id like to do this with jQuery.
Thanks
Here's an example of a basic implementation. It accounts for resizing of the window, but doesn't account for any focus point of the image and so the focus point could fall out of view for oddly-sized windows.
http://jsbin.com/okizi5
Edit: I forgot to point that that the width/height attributes on the image are necessary in this version for all browsers (notably Safari) to calculate the aspect ratio of the image. If your image is to be dynamic and the dimensions are not available then these could be calculated within the 'load' function bound to the window.
Yes. I don't see why you can't, really. You can use JavaScript, and its DOM interface, to modify the style properties of an image to resize an image. You don't even need a heavy library like jQuery; it's all native.
How about this:
$(window).resize(function() {
$('#myImgId').width($(window).width());
$('#myImgId').height($(window).height());
});
It will not maintain the aspect ratio...