Develop Reference

How can I stretch background on the whole window?

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.

2 part CSS "wallpaper" that resizes to browser

My designer believes this cannot be done, however it seems possible to me. (Although I have limited CSS experience). However, he also said the background couldn't be fixed, and stackoverflow has proved his wrong in the past; so I question his knowledge.
JQuery can be used if this cannot be done in pure CSS.
The top half will be a gradient that has full flexible to skew left, right, up, down without much distortion. The bottom half is an image that is ideally made for the 1280 x 1024 resolution (as this is the most popular browser display resolution). Then depending on the requirements needed it will sketch and skew to whatever size it needs. Still allowing all of the image to be seen.
The ration between the top half and bottom half is always 50% 50% independent of browser resolution.
I would also like if both the top and bottom parts are fixed.
In a perfect world (one without IE), id like to do this with css3 gradients and multiple backgrounds in 1 DIV. However, because IE9 isnt out yet, I think the best way to approach it would be 2 divs in a DIV container and using a PNG repeating background for the top div.
It should be noted I am going to use css3pie.com to allow some CSS3 for IE6-8 (but I dont want to rely on it, unless 100% proven)
Is this possible with just CSS? How would you do it?
If not possible with just CSS, is there a way I can get JavaScript/JQuery to aid?
I am thinking a base of 1280 x 1024 isn't the best idea because it seems to have an odd radio.
Edit 1
Oh yeah, I have a WIP too:
http://meyers.ipalaces.org/extra/
It looks good in 1280 x 1024...now its just getting the whole resizing of the top DIV to be 50% so the image is 50%.
I'd still like ALL of the water to be seen, because I like the look of the rocks at the bottom. However, I am open to alternative ideas that don't accomplish what I want 100%, but come close.
Edit 2
How about using the top gradient as the true CSS2 background and then just putting a <img> at the bottom of it to resize? Perhaps that will allow for CSS2 ability. I am reference some work-around techniques here: A list apart
Edit 3
I am still looking for results that work on IE6 and also don't cause Internet explorer to lag. I am setting a bounty of 50 to help attract more attention.

I have successfully came up with 2 ways to do this:
Method 1
Click here to view demo
Using CSS3 background-size I was able to set 2 div elements to on top of each other with min-height: 50% and then using background-size: 100% 50% they successfully accomplish what I am looking for.
This method was just a proof of concept, as IE6-8 does not support background-size, I didn't pursue tweaking this method perfectly. As it stands, it currently messes up when you scroll despite have background-attachment: fixed;. I ditched this CSS3 method in order to look for better methods using CSS tricks...
Method 2
Click here to view demo
Following the examples I found from A List Apart (Article | Example1 | Example2). I used Technique #2 from Example 1, and I was able to emulate what I wanted to do using just CSS2. (I am not 100% sure how or why this works, but it does)
Because I am also going to use CSS3PIE to give IE6-8 CSS3 the ability to do linear gradients, border-radius, and box-shadow; I opted to use a linear gradient instead of an image for the top background.
Problems
CSS2 Method from Technique #2, Example 1 does not work with IE6 Correctly
Creates excessive lag in all current Internet Explorers

It can be done with CSS only. No PIEs necessary. Just an IE6 bug and some filter magic.
Demo:
http://www.bundyo.org/test/FPB.html

Do this using raphaeljs. Create a background DIV that becomes a canvas, draw a rect to 50% of the page height (if using jquery then use $(window).resize() to monitor for a window resize and $(window).height() to get the 50% into pixels).
You can fill in the raphealjs rect with specifing it's fill value to something like fill: "90-#000000-#ffffff"
As for the image:
Place the image using raphealjs' image OR just embed it using HTML and update it's height-scale using jquery as mentioned above.
I've done something like this just recently using about 10 lines of code.
Also: Change your water.png, it's about 275kb, where as the next largest file on your page (the css) is like 1.5kb.

If you want to keep the horizon of the water at 50% on your screen, I would suggest a simpler method;
Create an image (probably about 1280 wide) in Photoshop of water on bottom and gradient on top. Fade the top gradient into a solid light blue(#68b for example). Fade the left, right and bottom of the image into the same solid color(#68b).
Set the background of your page as follows;
html {
background: #68b url(waterimage.png) center center no-repeat;
}
In your case, you'll probably want to apply the background to #wdth-100 instead of html, but it all depends on which element you want to put your background on.
All done. Let me know if that works for you.

I don't have a link to your top image, so i used the same image for top and bottom.
You should probably use a CSS solution for normal browsers and the JS for IE.
<script type='text/javascript'>
$(document).ready(function() {
wh=$(window).height();
ww=$(window).width();
if(wh%2) {
h1=Math.round(wh/2);
h2=Math.round(wh/2)-1;
} else {
h1=h2=wh/2;
}
img1=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img1'} )
.css({'width':ww,'height':h1,'top':'0','left':'0','position':'absolute','z-index':'-100'});
img2=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img2'} )
.css({'width':ww,'height':h2,'top':h1,'left':'0','position':'absolute','z-index':'-100'});
$(document.body).append(img1);
$(document.body).append(img2);
});
$(window).resize(function() {
wh=$(window).height();
ww=$(window).width();
if(wh%2) {
h1=Math.round(wh/2);
h2=Math.round(wh/2)-1;
} else {
h1=h2=wh/2;
}
$('#img1').css({'width':ww,'height':h1,'top':'0','left':'0'});
$('#img2').css({'width':ww,'height':h2,'top':h1,'left':'0'});
});
</script>

The pragmatic answer would seem to be to do it using multiple divs with their own background, all of which would be positioned absolutely and behind everything else using z-index.
I know that's not the clean markup solution with a single div with some magic CSS, but this is a tricky problem in pure CSS in any browser, and almost certainly impossible if you need to support IE6.
An even more pragmatic answer would be to say "I'll support IE6 as far as I can, but if it can't support my lovely background effect then that's just tough luck for anyone still using it".

Add rounded corners to a rectangle raster image

What is the best way to make something like a mask with rounded corners for an image using CSS/JS/HTML? So, I need to add rounded corners to a rectangle image. I thought about adding 4 graphic elements like this one above the image at its corners to hide some little parts of the image. Here red color is, for example, for using on the red background page, and the element is for right top corner. The problem with this solution is that I can't use it on complex backgrounds, like gradients or other non-flat fill background.
I know there is a masking feature that can be used in FireFox but I need some more generic solution that will work in other browsers well too. Thanks.

You should be using CSS border-radius for this (as described in another answer). It does work for images.
What the previous answer missed is that you can support it in CSS in all browsers, including IE6/7/8 using a wonderful little hack called CSS3Pie.

The best and simplest way is to use the CSS3 border-radius property:
.box {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
It works in all modern browsers apart from IE8 (works in the new IE9 though).

This is something that's difficult to get right in one browser, let alone all the common ones. I suggest you do your processing on the server side. If you're working with PHP, I know it has a built in image library that can work with semi-transparent png's. That's your best bet. Simply "crop" it once and save it on the server's file system. Look for an equivalent library if you're not using PHP.
(By "crop" I mean add the rounded corners with a nice alpha blending effect fading to a transparent background).

You can always look at using the nifty corners if you need it to work in older browsers also.
Or you can use the css border-radius as mentioned above, and just accept that in IE6/7/8 it will be square.

the jQuery plugin lc_roundz should do the job dynamically - even if you want the corners to be transparent (e.g. for use on complex backgrounds, ...).
$("image").lc_roundz({
radius: 20, // corner-radius
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original
newid: "%oid_after_lc_roundz", // the new ID for the canvas object. %oid will be replaced with the id of the original object
width: -1, // -1 uses the original image's width
height: -1, // -1 uses the original image's width
replace: false, // boolean to decide whether the original should be removed from the DOM
corner_color: [0,0,0,0] // this means TRANSPARENT ... R,G,B,alpha [0-255] each
});

Paint all pixels (excluding transparant) in PNG with Javascript/CSS?

I need to create a silhouette of a PNG with Javascript/CSS. Is this possible?
I tried the following:
Stack the PNG with lowered opacity multiple times with absolute positioning and z-index.
This does not work.
Unfortunately I can't use PHP or something else then Javascript and CSS.
I got some ideas with overlays and such but I can't figure out how to do it. Any tips?
update: This only needs to work in webkit browsers, so you can bring your webkit trickbox! :)

It's not possible in plain HTML/CSS.
It would be possible in embedded SVG using a filter such as feColorMatrix to set all channels to one colour except the opacity.
It would be possible in a <canvas> using a composite operation, such as first drawing the image, then drawing a single colour over the top with source-out mode.
It might be possible in IE using a MaskFilter, using the MaskFilter to generate a masking colour (eg. white) laid over a fixed colour (eg. black). However I think you'll lose any variable-opacity smooth edges.
It's going to be a lot of browser-sniffing and annoyance. I'd try to avoid it.

Considering you've tagged this with webkit, you should have a look at the Surfin' Safari blog post about CSS masks.
E.g. Is this what you want?
<!doctype html>
<style>
div {
width: 215px;
height: 174px;
background: black;
-webkit-mask-image: url("http://webkit.org/images/icon-gold.png");
}
</style>
<div></div>

JavaScript rounded corners with transparent background

I'm looking for a JavaScript library that can create round corners on div tags with a transparent background, such that the background colour/image of the parent element is visible at the rounded corners. For an example of rounded corners without a transparent background, have a look at the left menu on this page. Notice that the background of the parent element is not shown at the corners of the menu items.
I need this to work in IE7+ and FF3+ (ideally the other browsers too), and I'd prefer a JQuery plugin.
Does anyone have any good resources or plugins that would help?

JQuery Corner?

I tried 2 different JQuery corner-rounding plugins. This one didn't work in either FF or IE and this one only worked in FF.
However, I found a non-JQuery library that worked perfectly in both, DD_roundies.

It's got a lot of limitations... but the Transparent Background Corners plugin might work in your scenario.
If you can, however, I'd suggest actually doing all the rounding server-side with CSS. It's all just divs within divs, with different padding for the corner divs. It gets rid of the huge performance hit that Safari and IE will take if you have lots of rounding to do, and allows you to have the page still look stylish for your users who don't/can't enable javascript.