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


Tags: html,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]

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

    How can I make LIs push their siblings to the same height?

    Chrome (webkit?) not displaying images correctly in a slideshow

    How to insert a line break before an element using CSS

    How to create 'greater than' arrow using CSS only?

    how to load all css and js at a time in Cakephp

    How to use absolute positioning without overlap effect

    How to control the speed of a SVG line animation with CSS

    how to use CSS opacity to let background bleed through in IE8?

    How do I correct this CSS fluid layout glitch?

    How to display thumbnail in dropdown CSS list along with other styling of text

    How to include by default icon inside a textarea

    How to add dynamic CSS source urls in Squishit?

    HTML: How to style each table cell in a column via CSS?

    How to edit the CSS of a td element through the hierarchy?

    How to add a 3rd level to my CSS drop down menu?

    How to make form line up?

    How to visually indicate current page in ASP.NET MVC?

    divs hide and show

    How can I make a button change its position after being clicked?

    CSS: How to omit the spacing between an h3 and a p element?

    div under div - dont know how to do this

    ASP.NET Gridview - How do I change the color properties vertically?

    How to use an existing source map to compile scss to css?

    How to make the divs fill the remaining space without using float?

    how to set css and html in textarea [closed]

    How to do a full bleed background image that scales with resolution in css/javascript? [duplicate]

    How can I make it so that CSS uses a class only if another is not present on an element?

    How to draw two non-concentric circles in CSS with numbers inside it?