Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #5637


    it’s possible to have two backgound images with scroll, one linked to the top of the page and the another one linked to the bottom?

    I want have the header and the footer zone with a background, and the middle part or the pages without, to prevent problem when i have different page height.

    Here the example image, for sure better than my english :)



    it’s possible to do this. You could read this and use it on the body in your style.css. If this is hard for you I can provide you the code you need if you provide me with the background images you’d like to use.


    Thank you very much, i try with the help you provide me :)



    i solve the problem in this way, in custom.css i put that:

    html, body {


    url( top center no-repeat,

    url( bottom center no-repeat,

    url( center center repeat-y;


    The tiling image is the one with the lower z, with vertical repeating. the other two images are aligned on top and bottom of the pages.

    Your code privide a more “elegant” solution? :)

    i have a small problem on the bottom of the pages, with chrome. Sometimes i see a small row displaying the tiling texture (this because the down image are not perfectly on the bottom of the page).


    Glad you got it to work.

    For the bottom of the page issue have you tried adding


    to the code you made? I’m uncertain if it works, can you link me to your site if it doesn’t work?


    i think doesn’t work…

    here you can check the page:

    i use a monitor resolution of 1920×1200, and if you take a look at the bottom of the page, you see the problem. I think is a problem when the page height is less than the monitor vertical resolution…

    Thanks again for your support!




    If this really forms a problem for you, can you provide me with a screenshot? My monitor isn’t that big (I ordered one though ;p) and when I zoom out it doesn’t really form a problem.



    Well, is not a big problem, if it’s simple to solve ok, if not i don’t care :)

    here the link of the image:

    Thanks again!


    Solved with this code:

    html, body {


    url(../images/skin3/background_top.jpg) top center no-repeat,

    url(../images/skin3/background_down.jpg) bottom center no-repeat,

    url(../images/skin3/background_tile.jpg) 50% 50% no-repeat #e8e8e8;

    background-size: 1920px 530px, 1920px 530px, 1920px 80%;


    i set the lower tiling background streching it by 80% in vertical, instead of tiling for all the page height.


    Glad that you found a solution :)


    can something similar be done for the header of the CENTER block of the site? IE where your logo is.. without affecting the background image?

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

The topic ‘Two Background images linked to header and footer zone’ is closed to new replies.