How can I load images to cover the whole background like some websites, using CSS. Not the usual background-image property but I want to load the images quickly.
Examples:
http://www.marinayachting.it/
http://alexandraowen.co.nz/
background-image is the only way to place images in CSS. If you want it to be vary large put it on the body element or a container div that fills the entire viewport.
body {
margin: 0;
padding: 0;
width: 100%;
background-image: url('my_big_image.jpg') norepeat;
}
If you use a container div you can set position:fixed; top:0; left:0 and the image will remain stationary when the page scrolls.
There's no magic to it. As far as getting it to load quickly I don't think there's much you can do if it doesn't repeat. If it does repeat then make sure your image is the size of one module. This can be as little as one pixel tall or wide depending on the content.
There is no magic to making a background image load quickly, you just:
Have a fast server.
Compress the image as much as possible.
Make your page HTML small so that the rest can start loading as soon as possible.
Don't have many other images that also has to load.
Don't have a lot of scripts and other external files that has to load.
I found this tutorial helpful. ->
http://css-tricks.com/perfect-full-page-background-image/
Bing is loading a normal background image with a fixed size. It´s not particularly fast (for me...), but perhaps it seems fast because the image is cached after the first time you load it.
You can set the style inline so that the image can start downloading without waiting for any css file to be ready.
If you set an image let's say a picture as a background you need to make it large enough to accommodate large screen sizes. You don't want the experience on your site to be, that your picture repeats multiple times on the screen. Probably at the least width should be 1260px. If background is just a simple gradient, you can cut a small part of it in photoshop and apply it on the body like this:
body {
margin:0;
padding:0;
background:#fff url(your/image/location.jpg) repeat-x scroll 0 0;
}
This method could be applied to divs too, Good luck.
In your second example site, alexandraowen.co.nz, if you took a second to look at the JS they use, you would have seen the following:
// backgrounds --------------------------------------------------------------//
var Backgrounds = {};
Backgrounds.init = function()
{
$('body').each
(
function()
{
var imgsrc = $(this).css('background-image');
if(imgsrc != 'none')
{
imgsrc = imgsrc.slice( imgsrc.indexOf('(') + 1 , -1);
$(this).css('background-image', 'none');
$(this).prepend('');
if($.browser.msie)
{
// ie 7 is the slow kid and we have to strip out quote marks ffs!
$(this).find('div.bg img').attr('src', imgsrc.split('"').join(''));
}
else
{
$(this).find('div.bg img').attr('src', imgsrc);
}
}
}
);
Backgrounds.resizeHandler();
$(window).resize(Backgrounds.resizeHandler);
$('div.bg img').load(Backgrounds.resizeHandler);
}
Backgrounds.resizeHandler = function()
{
var w = $(window).width();
var h = $(window).height();
$('div.bg img').each
(
function()
{
var wr = w / $(this).width();
var hr = h / $(this).height();
var r = Math.max(wr, hr);
var imgw = Math.round($(this).width() * r);
var imgh = Math.round($(this).height() * r);
$(this).width( imgw );
$(this).height( imgh );
var l = Math.round((w/2) - (imgw/2));
$(this).css('margin-left', l+'px');
}
);
}
As well as the HTML on the page:
<body style="background-image: none; ">
If you dig into their scripts a bit more, you can see what they did. But I guarantee you it's nothing faster than just setting the background-image property.
<img id="foo" src="bar" alt=""> with #foo { width: 100%; height: 100%; }(use position: absolute; / position: relative; & z-index for layering as desired)
Here's an old example.
Related
I'm trying to make a loading animation for a website : an image full of candles, each candle's appearing as the website loads. My mains objectives are :
Use minimal bandwidth
Maximize the picture quality
Create transition between each parts of the picture
So,
I tried to use the Photoshop legacy Export for Web features but the alpha layer (transparency) that I want to use in PNG is then tessellated, they are also subtle noise on some images.
I thought about using a video with embedded transitions but even a VP9 video is bigger than the PNG trick.
Using JPEG as well doesn't look great as I can't use transparency and the sum of all pictures are bigger than the PNG trick.
So that's why I wanted to know if someone had any idea how to do such thing ! I would be please to add more information about this if asked !
Edit
Here's the first picture of the sequence (without any edit to add transparency) :
And here's the last, there's 19 images total :
If you want to light each candle individually, I wouldn't know how to do that without using too many images, hence too much bandwidth. I can therefore not provide a solution that perfectly suits your requirements. I will, however, suggest an interim solution that might work until someone comes up with something better.
Idea:
Group the 30+ candles into three chunks, as they seem to be arranged in roughly three rows.
Although a bit tricky, the rock geometry does lend itself to be cut out accordingly as well.
Breakdown:
Create four pictures / layers:
All dark
One row lit
Two rows lit
All rows lit
Use JPG, as small as possible (maybe 1280px in width, ~70% quality)
Instead of using img, use one div with CSS background-image per layer
Place all layers on top of each other (layer 4 on top) with position: absolute
Use JavaScript to fade in another layer whenever a third of your page has loaded
The reason for using background-image is that you can easily use CSS to stretch the div containers to 100% width and height (assuming that the whole thing is supposed to be full screen) and make the images adapt to any resolution and aspect ratio easily. Upscaling a 1280px wide JPG to 1920px usually looks pretty okay, but you will have to play with image size and JPG quality to hit the sweet spot. With my suggested setup (see above), all four images should end up being about 400 to 500 KB combined.
Example:
Note that this is a rough mockup based on your first and last frame - you can surely do much better with the original material at hand.
var timer = new Array(3);
var fader = new Array(3);
var layer = new Array(3);
function fade() {
for (var i=0; i<3; ++i) {
layer[i] = document.getElementById("s" + (i+1));
layer[i].style.opacity = 0.0;
clearTimeout(timer[i]);
clearInterval(fader[i]);
start(i);
}
}
function start(i) {
timer[i] = setTimeout(function() {
fader[i] = setInterval(opacity, 20, i);
}, (2000*i));
}
function opacity(i) {
var style = window.getComputedStyle(layer[i], null);
var opacity = parseFloat(style.getPropertyValue("opacity"));
if (opacity >= 1) {
clearInterval(fader[i]);
} else {
layer[i].style.opacity = (opacity + 0.01);
}
}
.container {
position: relative;
width: 600px;
height: 417px;
}
.candles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.0;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
#s0 {
background-image: url(http://i.imgur.com/ZQqeebI.jpg);
opacity: 1.0;
}
#s1 {
background-image: url(http://i.imgur.com/ah7UP3x.jpg);
}
#s2 {
background-image: url(http://i.imgur.com/zLgBA5x.jpg);
}
#s3 {
background-image: url(http://i.imgur.com/ar4w18n.jpg);
}
button {
width: 600px;
padding: 0.4em;
}
<div class="container">
<div id="s0" class="candles"></div>
<div id="s1" class="candles"></div>
<div id="s2" class="candles"></div>
<div id="s3" class="candles"></div>
</div>
<button onclick="fade()">Fade</button>
Here is an external link to the fiddle.
How do i load the original image so that when the user brings the cursor onto top of the image, it should change automatically without showing white background then loading the original pic? Is there any code that loads the original image wheh my webpage loads? Please let me know. my code is :
#middlefoto{
background-image:url(../images/middleblack.jpg);
margin-left:1px;
height:158px;
width:333px;
}
#middlefoto:hover{
background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
}
Use sprites with positioning.
Find more information at W3 Schools
The reason you are seeing the blank background for an instant is because the hover image has not yet been loaded from the server. To avoid this, preload the images. There are several ways to do this but the concept is the same: force the browser to load the image before it is actually needed. Here's a simple way to do this using JavaScript:
function preloadImages(sources)
{
var img = new Image();
for (var i = 0; i < sources.length; i++) {
img.src = sources[i];
}
}
preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);
Include the image in an off-screen element (push it off screen with CSS). This will cause the browser to download the image so it should be ready for the rollover. You could clean up the offscreen images after page load.
<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />
(don't really use inline styles)
Then, if you're using jquery
$(document).ready(function(){ $('.preloader').remove(); });
to clean up.
How can I get a DIV to float with my page? Currently I have it setup like this: http://g2n.us/Dev/TheHabbos_6975/
I can do this by using the following CSS:
Code:
.stayStill {
position: fixed;
width: 300px;
}
But how can I get it so when the header scrolls away, the right DIV moves up and stays 10 pixels away from the top and scrolls with the page, unless the header is there?
You need JavaScript to do this.
Your site is already using it, so there should be no problem with using JavaScript to do this.
A couple of tutorials:
http://jqueryfordesigners.com/fixed-floating-elements/
http://css-tricks.com/scrollfollow-sidebar/
This answer uses jQuery
You can put this in your $.ready() function
var int_header_height = 10; //put pixel value height of header here
if ($(document).scrollTop() <= int_header_height) {
$('div.stayStill').css('position','absolute').css('top','0px');
} else {
$('div.stayStill').css('position','fixed').css('top','10px');
}
This also assumes that the div is in a position: relative element below the header. Otherwise you should change the .css('top','0px') to .css('top',int_header_height + 'px')
ok there are several similar questions but not quite anything that I want.
I have few ajax requests on page and I want to show the image in the center of the screen, and its all working OK.
Just to make it look more prominent, I wanted to place that image on a div with translucent background, so its more obvious for the end users. Now comes the tricky part.
I made the div with css like this:
.divLoadingBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%;
height: 100%;
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
}
This fills the page up alright, or, I should say, this fills the viewport. If I scroll the page down, the page is again normal. I want this div to span the ENTIRE LENGTH of the page, no matter how long the page is.
Here is an example mockup of the problem I made to quickly demonstrate:
As you can see, I took the example of SO for the mockup ;) image 1 shows that its okay when it appears. image 2 shows that it goes up with the page on scroll.
I'm a c# developer and css is as alien to me as ancient latin.
How to make this divLoadingBackground div to fill out the entire length of the page?
Many thanks for any help.
If you need any additional info, please comment!
One thing I dont see in your css is z-index. Fixed, although, fixes this problem, sometimes, based on how other divs are positioned, your divLoadingBackground div could end up in one of the divs.
try adding
z-index: 9999;
or something similar and see if it works.
Would have put this in a comment, but it seems I have too low rep to comment.
Where is the .divLoadingBackground div located in the DOM tree? Since it has fixed position, it shouldn't scroll with the page. This makes me belive that the element is too deeply nested. Try putting it right in the body level of the page and see if that helps.
Also, are you sure that some other css directive isn't changing the position attribute to absolute or something?
Also, make sure to use the right DOCTYPE. That has some impact on fixed position elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Oh, and ofcourse, fixed position isn't supported in IE6 and below.
I believe you will need JavaScript/jQuery to dynamically set the height of the div in question to the height of the page once rendered.
And if you're entering the world of web, it's time to learn that new language "CSS" as well as perpahs-not-quite-as-daunting JavaScript.
When I needed such a functionality some years ago, I examined how Google Calendar did it.
Basically, they use a timer-driven JavaScript file that checks for the height of the window and adjust the height of a contained DIV tag accordingly (or of an IFRAME tag, just any container tag that you like).
Here is a code snippet from a page I worked on:
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.height = "100%";
document.getElementsByTagName("html")[0].style.height = "100%";
document.getElementsByTagName("body")[0].style.minHeight = "100%";
document.getElementsByTagName("html")[0].style.minHeight = "100%";
function height()
{
try
{
height_iframe();
}
catch(err)
{
}
}
window.onload=height;
// --
var ie6WorkaroundIFrameResize = 1;
function height_iframe()
{
var any = false;
var offset = 300;
var c = document.getElementById("iframecontent");
if ( c!=null )
{
c.style.height = (GetClientHeight()-offset)+"px";
any = true;
var d = document.getElementById("iframeie6");
if ( d!=null )
{
d.style.height = (GetClientHeight()-(offset+ie6WorkaroundIFrameResize))+"px";
any = true;
ie6WorkaroundIFrameResize = 0;
}
}
if ( any )
{
setTimeout( 'height_iframe()', 300 );
}
}
function GetClientHeight()
{
return document.documentElement.clientHeight;
}
</script>
Basically, the script regularly checks for the height of the window via the GetClientHeight() function and adjusts the element in concern ("iframecontent") accordingly.
I subtract some offsets of fixed-height headers and footers.
AFAIK you would need to set the size of this divthrough javascript. I would recommend using jQuery, in this way :
//$(document).height() gives the size of the document
//(as opposed to $(window).height() that would give the size of the viewport
$("div#overlay").css('height',$(document).height());
Hi I have big background images 1200 by 1200, what i would like to do is expand the images when the user resizes the browser but constrain it so they never scale any smaller than the original size.
There all lots of scalable bg images out there but none I can find that do this, any help would be appreciated.
background-size: cover;
there you go
The following CSS + Javascript + JQuery combination has worked for me.
Thanks to ANeves for the above answer which was helpful.
CSS:
body
{
background: url(background.jpg) center center fixed;
background-size: 100% auto;
}
Javascript (JQuery):
jQuery (function ($)
{ // ready
$(window).resize (function (event)
{
var minwidth = 1200;
var minheight = 1024;
var bodye = $('body');
var bodywidth = bodye.width ();
if (bodywidth < minwidth)
{ // maintain minimum size
bodye
.css ('backgroundSize', minwidth + 'px' + ' ' + minheight + 'px')
;
}
else
{ // expand
bodye
.css ('backgroundSize', '100% auto')
;
}
});
});
another possibility would be to use media queries. set the image size to be say..1280x450 and then use a media query of background-size:100% auto; for all window sizes over 1280px wide.
there is some code which also handles image resizing with IE, however ive admittedly had limited success with it...
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale')" ;
if anybody has any add ons or fixes for the above then feel free to contribute.
hope this helps someone out there...
For background images, I usually set a minimum width for the html tag which would be the original width of the image or less, this stops the image from shrinking too far.
Put image in div and give size to it.
Apply following property to img tag
background-repeat: no-repeat;
background-size: 100% 100%;
You seem to be looking for CSS3's background-size property. You can constraint the minimum size to the container, if you know that the images are 1200x1200.
I don't believe it'll work on IE though, so it might not be an option for you.
In that case, I suggest you take a peek at http://www.markschenk.com/cssexp/background/scaledbgimage.html