It appears you have JavaScript switched off - you can find quick and easy instructions on how to turn on JavaScript here:
Gleam background slider Jobs:
We need backgrounds removed on about 20 - 25 photos.
We are looking for someone who is highly skilled in Photoshop for a long term partnership.
We know that one of the hardest parts to remove in a photo background is where the hair is, and this is what most of this project will be, removing a person from the background.
Please let us know if you have any questions.
If we like the work yo...
Nov 14, 2017
Today6d 18h
I use flatsome template and i have a problem with lightbox and revolution slider. I need to fix this problem urgently.
Nov 14, 2017
Today6d 16h
Quick task to Display image like background instead normal image, to feet better image and prevent the image from being stretched or distorted: budget = $10
Nov 14, 2017
Today6d 11h
we're looking for someone to work with us long time best offer will accepted please send me a offer only sri lankan freelancers
Nov 14, 2017
Today6d 8h
I need someone to edit the background for some of my photos. I have a white background, it need to be extended all the way to fill the frame of the picture. See attached photo for example.
Nov 13, 2017
Nov 13, 20175d 21h
Hi, we have a website that is this one:
[url removed, login to view]
Please see the following pages, the gallery doesnt fit well on the cell phone,
[url removed, login to view]
and Im thinking we may need to shorten the dark grey area behind the gallery, or at least on the cell phone part.
On desktop it looks good but either way the gallery must appear centered on the page without touchi...
Nov 13, 2017
Nov 13, 20175d 15h
I would like to edit my website header to play video background on IOS and Android devices.
Nov 13, 2017
Nov 13, 20175d 11h
Simply remove background of a product photo, (see attached)
Nov 13, 2017
Nov 13, 20175d 6h
I need Proofreader with Mathematics background, contact me for more details. Thanks
Nov 12, 2017
Nov 12, 20174d 10h
Need 200 product images background cleaned, png in a specific size.
Example of the images, attached
Nov 12, 2017
Nov 12, 20174d 7h
Need someone to edit about 40 Images, Making them look beautiful and have a pure white background.
Image attached is example of what i need
Nov 12, 2017
Nov 12, 20174d 4h
I'm going make a presentation about management and I'd like to share a story introduced in Peter Drucker's book.
I'd like you to draw a picture of the story to show to audience while I tell the story and explain the key points.
Project should be completed in a few days.
Here is the story:
An old story tells of three stonecutters who were asked what they were doin...
Nov 12, 2017
Nov 12, 20174d 3h
Need help with the overall structure of the book and a little w/ the concepts.
It's a self help book to help people become more mindful, self-aware, joyful etc.
Probably not to exceed 60 pages.
Structure:
probably 3 main parts.
part one: relates to mindfulness and mindfulness meditation.
***would be really helpful to have someone with background in this.***
part two: relate...
Nov 11, 2017
Nov 11, 20173d 19h
My Avada Theme Fusion Slider doesnt load. But if I use a proxy, it works after a while. I need to fix this.
Nov 11, 2017
Nov 11, 20173d 17h
Need a graphics background in reference to beverages such as sodas, juices, and sports drinks. Design will be used as a drinking station banner. Must be Jpeg or other commonly used format for printing.
Has to be editable by me for resizing larger or smaller.
Will supply specific dimension once job is accepted.
Nov 11, 2017
Nov 11, 20173d 11h
I need some graphic design. Need an html email design for a melting campaign and a design for cost slider for a website designed
Nov 11, 2017
Nov 11, 20173d 9h
I have lloaded a default avada theme but sliders dosnt work. Need to active them.
Nov 10, 2017
Nov 10, 20172d 15h
Add REV slider to my wordpress site. CE IRRIGATION
Nov 10, 2017
Nov 10, 20172d 15h
I need someone to crop a range of 50 images.
Can you please provide a cost?
This is a re-occurring task and we need to know how much it would cost.
Sample images attached.
Best Regards,
Nov 10, 2017
Nov 10, 20172d 3h
THE CHICAGO MAWLID COMMITTEE PRESENTS:
The Grand Mawlid
FEATURING:
SHAYKH Umar F. Abd-Allah
Ibrahim al-Nass, Mouaz al-Nass, Ibrahim Al-Dardasawi
The Mecca Center
16W560 91st St.
Willowbrook, IL 60527
SATURDAY, DECEMBER 16, 2017
Between Maghreb and Isha (4:25 PM-8:00 PM )
Maghreb and Isha will be prayed in congregation in the mosque
RSVP REQUIRED @ [url removed, login to view]...
Nov 9, 2017
Nov 9, 20171d 11h
Hire the Top Gleam background slider Freelancers:
I am a new user
I am a returning userNovember 20, 2010
This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods.
The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it:
Fills entire page with image, no white space
Scales image as needed
Retains image proportions (aspect ratio)
Image is centered on page
Does not cause scrollbars
As cross-browser compatible as possible
Isn't some fancy shenanigans like Flash
Image above credited to .
Awesome, Easy, Progressive CSS3 Way
We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.
background: url(images/bg.jpg) no-repeat
-webkit-background-size:
-moz-background-size:
-o-background-size:
background-size:
Chrome Whatever+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
Update: Thanks to Goltzman in the comments for pointing out an
which features some code to make IE do cover backgrounds as well:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead.
Update: Matt Litherland writes in to say that anyone trying to use the above IE filters and having problems with scrollbars or dead links or whatever else (like Pierre above) should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height.
CSS-Only Technique #1
Big thanks, as usual, to
for this alternate version. Here we use an inline &img& element, which will be able to resize in any browser. We set a min-height which keeps it filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the image never gets smaller than it actually is.
The especially clever bit is using a media query to check if the browser window is smaller than the image, and using a combo percentage-left and negative left margin to keep it centered regardless.
Here is the CSS:
/* Set rules to fill background */
min-height: 100%;
min-width: 1024
/* Set up proportionate scaling */
width: 100%;
/* Set up positioning */
@media screen and (max-width: 1024px) { /* Specific to this particular image */
left: 50%;
margin-left: -512
Any version of good browsers: Safari / Chrome / Opera / Firefox
IE 6: Borked - but probably fixable if you use some kind of fixed positioning shim
IE 7/8: Mostly works, doesn't center at small sizes but fills screen fine
IE 9: Works
CSS-Only Technique #2
One rather simple way to handle this is to put an inline image on the page, fixed position it to the upper left, and give it a min-width and min-height of 100%, preserving it's aspect ratio.
&img src="images/bg.jpg" id="bg" alt=""&
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
However, this doesn't center the image and that's a pretty common desire here... So, we can fix that by wrapping the image in a div. That div we'll make twice as big as the browser window. Then the image will be placed, still preserving it's aspect ratio and covering the visible browser window, and the dead center of that.
&div id="bg"&
&img src="images/bg.jpg" alt=""&
top: -50%;
left: -50%;
width: 200%;
height: 200%;
bottom: 0;
min-width: 50%;
min-height: 50%;
for the concept on this one.
Safari / Chrome / Firefox (didn't test very far back, but recent versions are fine)
Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)
Peter VanWylen wrote in to say that if you add the image via JavaScript, the img needs to have width: and height: to work in IE 8, 9, or 10.
jQuery Method
This whole idea becomes a lot easier (from a CSS perspective) if we know if the aspect ratio of the image (inline &img& we intend to use as a background) is larger or smaller than the current aspect ratio of the browser window. If it is lower, than we can set only the width to 100% on the image and know it will fill both height and width. If it is higher, we can set only the height to 100% and know that it will fill both the height and width.
We have access to this information through JavaScript. As usual around here, I like to lean on jQuery.
&img src="images/bg.jpg" id="bg" alt=""&
#bg { position: top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(window).load(function() {
var theWindow
= $(window),
= $("#bg"),
aspectRatio
= $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) & aspectRatio ) {
.removeClass()
.addClass('bgheight');
.removeClass()
.addClass('bgwidth');
theWindow.resize(resizeBg).trigger("resize");
This doesn't account for centering, but you could definitely alter this to do that. Credits to
for the concept behind this idea.
IE7+ (could probably get in IE6 with a fixed position shim)
Most any other desktop browser
Update (June 2012): Reader Craig Manley writes in with a technique to load an appropriately sized background image according to screen. As in, don't load some huge 1900px wide background image for an iPhone.
First, you'd make images like 1024.jpg, 1280.jpg, 1366.jpg, etc. Then instead of loading an img, you'd load a shim.
&img id="bg" src="data:image/base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: left: 0; top: 0" /&
If you don't like the gif shim (personally I think it's OK because it's not "content" it's a background) you could load up one of the real images instead. This code will account for that.
Then you test the screen width and set the src of the image based on it. The code below does it on resize, which you may or may not want. You could just run the code once if you wanted.
(function() {
var win = $(window);
win.resize(function() {
var win_w = win.width(),
win_h = win.height(),
= $("#bg");
// Load narrowest background image based on
// viewport width, but never load anything narrower
// that what's already loaded if anything.
var available = [
var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 :
if (!current || ((current & win_w) && (current & available[available.length - 1]))) {
var chosen = available[available.length - 1];
for (var i=0; i&available. i++) {
if (available[i] &= win_w) {
chosen = available[i];
// Set the new image
$bg.attr('src', '/img/bg/' + chosen + '.jpg');
// for testing...
// console.log('Chosen background: ' + chosen);
// Determine whether width or height should be 100%
if ((win_w / win_h) & ($bg.width() / $bg.height())) {
$bg.css({height: '100%', width: 'auto'});
$bg.css({width: '100%', height: 'auto'});
}).resize();
})(jQuery);
Note that screen width isn't the only possible good information to have when choosing an image size. .
If you use this, please feel free to leave what technique you used and if you altered it in any way in the comments below. Always cool to see techniques "in the wild."
Just for posterity's sake, there is another example in here called table.php which uses an old technique that used to be a part of this article. It had some cleverness, but wasn't quite as good as either CSS technique now presented above.
Other Resources
jQuery plugin: , by Jay Salvat
Share this:
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-star