How to resize and float right a background image using css?

Question

I am working on this site: http://www.problemio.com and I have a requirement to add the background image to the top banner which I did.

What I can't figure out how to do is how to shift it all the way to the right and make it smaller in length so that it only takes up half of the screen width.

Any idea how to do that? So far I have this css for the overall banner div:

.banner 
{
    width:60em;
    margin: 0 auto;
    position: relative;
    padding: 0.3em 0;
    z-index: 1;
    background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
    background-repeat: no-repeat;
    background-image: right-align
}

but I don't know how to make the background image align right and rescale to be 50% of the entire width of the div. Any ideas?

Thanks!

Answer 1

You can use left, right, bottom, top and center for aligning backgrounds. Also percentages.

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;

However, you cannot resize the images using CSS2 but in CSS3.

background-size: <width> <height>;

More usage:

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;

To align bottom and centered:

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;

Answer 2

Use background-position: right; and background-size: [width] [height] (replace values where needed).