How to stretch a background-image with css

Question

I tried everything, I used background-position: 100%; etc.

        a.textlink:link { color: #8E7086; font: bold 11pt Arial, Verdana, Helvetica, sans-serif; text-decoration: none; padding-right: 10px; }
        a.textlink:visited { color: #8E7086; font: bold 11pt Arial, Verdana, Helvetica, sans-serif; text-decoration: none; }
        a.textlink:hover { color: #756C63; font: bold 11pt Arial, Verdana, Helvetica, sans-serif; text-decoration: none; }
        a.textlink:active { color: #8E7086; font: bold 11pt Arial, Verdana, Helvetica, sans-serif; text-decoration: none; }
        body { 
            font-family: Verdana,Arial,Helvetica,sans-serif; 
            background-color: #FFF;
            text-align: center;
                            background-image: url(images/Template/radeberger_wrapper.jpg);
                            background-repeat: no-repeat;
                            background-position: 100%;

here's a good resource: http://css-tricks.com/perfect-full-page-background-image/ — MackieeE, Oct 02 '13 at 11:49

score 2 · Accepted Answer · answered Oct 02 '13 at 11:44

2

Use:

background-size: cover;

or

background-size: 100% auto;

The first one will allways cover the whole element, but is css3 (modern browsers only). The second one will always have the full width, keeping aspect ratio.

answered Oct 02 '13 at 11:44

SKeurentjes

1,848
12
18

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

You should look this Question, It has lot's of discussions on same issue.

    background-size: 100% auto;

Read here CSS 3

edited May 23 '17 at 10:25

Community

1
1

answered Oct 02 '13 at 11:52

Sunil Kumar

1,389
2
15
32

How to stretch a background-image with css

2 Answers2