[Solved] Getting a background image to 'fit'

[Everton]

Hello

How would I get my background image to stretch as far as – but not over – the orange footer bar I have at the bottom of this page, please:

Image question

The site is ‘governed’ by my style-sheet, styles.css, which contains the reference to the image here:

body{
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 13px;
        background-color:#E4E4E4;
        background-image:url(../images/bg.png); 
        background-position:left top;
        background-repeat:repeat-x;
        color:#3F3E3C;
        margin:0 0 1px; height:100%; 
        line-height: 1.5;
    }

Thank you.

[shaneisme]

http://lmgtfy.com/?q=css+background+image+fit

(I jest, sorta… here)

[Everton]

Hello shaneisme

Thank you for your reply and the link to here:

https://css-tricks.com/perfect-full-page-background-image/

Don’t those examples show how to fill the screen completely? I would just want mine to go as far as the orange bar:

Image for CSS Tricks

[shaneisme]

It will fit whatever parent the background is set to.

[Everton]

I think I have got it now with this:

background-image:url(../images/bg.png);
                background-size: 80% 160%; 
        background-position:left top;
        background-repeat:repeat-x;

Many thanks!

[Author]

Posts