Grow your CSS skills. Land your dream job.

how can i set a background at footer to expand according to screen size ..?

  • # January 12, 2012 at 11:04 am

    hi ..
    i have a problem with my footer.. i want to make bar that expand according to screen .
    i make one for header by using background in body div , but i didn’t know how can i put another background at bottom page .

    this is my header :my header
    this is my footer :ny footer

    how can i do that …?

    # January 12, 2012 at 12:33 pm

    Pretty straight forward, the CSS would look like this:


    .inside
    {
    width:960px;
    margin:0 auto;
    }

    .header
    {
    background:url(path/to/bar/image.jpg) repeat-x;
    width:100%; /* probably not necessary unless you have reset anything*/
    }

    and the HTML




    Content of your header goes here


    So the header now stretches the whole screen, yet the text within it stays centered to a fixed width. Cheers! Dave

    # January 12, 2012 at 3:30 pm

    that is for header , i am already did that , but my problem is on footer ,it is limited .


















    because footer is limited by 960px , so everything inside it is limited among this range ,,

    i think i should put the div=footerbar outside the div=footer , then style it ..

    anyone have another idea …??

    # January 13, 2012 at 3:17 am

    you should wrap the footer div like u mentioned.

    http://jsfiddle.net/BLwgJ/200/

    # January 13, 2012 at 4:58 am

    thank u very much TIMMEY ..

    this my first time with < jsfiddle.net > ,, but it is more simple and usefull ..

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".