i am trying to copy the looks of this site:
http://www.vindrejse.net/
If you try to re-size the window downwards, you can see that the image size re-sizes aswell, what exactly is done to achive this?
I've written a jQuery plugin for exact this problem: https://github.com/yckart/jquery.fitpic.js
Here's an example for you: http://yckart.github.com/jquery.fitpic.js
If you just worry about modern browsers, you can do that with CSS3's
background-size: cover;
declaration.
The closest thing to an industry standard for this is the BackStretch plugin:
http://srobbin.com/jquery-plugins/backstretch/
It works on both full page backgrounds and DIV elements. Very simple configuration. Supports transitions.
Related
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 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
I'm trying to stretch the background to fill the whole window with HTML/CSS.
I've seen a few solutions for this but they don't work.
Every solution i encounter won't work on all the browsers, either Chrome won't stretch it, or IE won't stretch it, and if they both do, firefox will be the problematic one.
Does anyone have a working solution, that will work on all browsers ? (don't mind some javascript)
I believe there is no way to do this without creating an img element, and setting its z-order to the bottom and then customizing the width of that. This page has details.
Edit: In the link it says to use position: fixed;. This will in only work in older versions of IE if you specify a doctype. Using absolute is a simple workaround as long as the element is a direct child of the body.
I had this problem a little while ago and I found that this website http://webdesign.about.com/od/css3/f/blfaqbgsize.htm had a very nicely written tutorial which explains it well, plus it worked for what I was looking for.
http://reisio.com/temp/stretch/
write a css for that in which the background image will be in body.like
body {
background-image: url("/images/bg.jpg");
background-repeat: no-repeat;
background-position:center top ;
}
This will keep the total image in the body.Try this hope it will work.
Is it possible to replace standard scrollbar (only appearance) with some custom one (the one from http://scripterlative.com/files/autodivscroll.htm to look like the top-left example from http://www.dyn-web.com/code/scroll/demos.php?demo=vert) so the script will still work and scrollbar behave like it wasn't modified?
Thanks!
Webkit supports it so it is possible in Safari and in Chrome. I tried it once, it works well.
My only problem: Doesn't support showing the scrollbar at the left or the top of the container.
An alternative solution would be to use CSS3 to adapt a custom scrollbar design, to achieve a standard, but different looking scrollbar.
See here CSS3 CUSTOM SCROLLBARS
Hope this helps!