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

Problem :

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!

Solution :

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;

CSS Howto..

How to create a box with line and add icon on side [closed]

Here's a responsive CSS solution using flex function addButtonClickHandler() { alert('Add button clicked!'); } function deviceClickHandler() { alert('Device clicked!'); } var addButtons = document.querySelectorAll('.add'); var devices = document.querySelectorAll('.device'); addButtons.forEach(function(addButton) {...

How can I fix this jumbotron/carousel to be the size of the image?

This may be what you are looking: Bootsnipp Responsive Carousel In case the link dies: http://bootsnipp.com/snippets/featured/responsive-bs-carousel-with-hero-headers it can be found searching www.bootsnipp.com for "Carousel". The important aspects are located in...

You need to use JavaScript: var d = document.getElementById("button"); d.addEventListener('click',function(){ d.className = d.className + " move"; }); Demo: http://jsfiddle.net/LJHQW/3/ Or, if you're already using jQuery: $('.button').click(function(){ $(this).addClass('move'); }); Demo: http://jsfiddle.net/LJHQW/1/...

Try: HTML: <div class="container"> <div class="table"> <div class="visible"> <p>image</p> </div> <div class="collapse"> <p>Text</p> </div> </div> </div> CSS: .table { display:table; width:80%; margin:0 auto; } .visible, .collapse { display:table-cell; }...