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

    Hi!

    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 :)

    http://imageshack.us/photo/my-images/571/backgroundimages.jpg/

    #51212

    Hey,

    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.

    #51213

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

    #51214

    Hi!

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

    html, body {

    background:

    url(http://www.chricchio.com/wp-content/uploads/2011/08/background_top.jpg) top center no-repeat,

    url(http://www.chricchio.com/wp-content/uploads/2011/08/background_down.jpg) bottom center no-repeat,

    url(http://www.chricchio.com/wp-content/uploads/2011/08/background_tile.jpg) 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).

    #51215

    Glad you got it to work.

    For the bottom of the page issue have you tried adding

    padding:0;margin:0;

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

    #51216

    i think doesn’t work…

    here you can check the page:

    http://www.chricchio.com/

    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!

    :)

    Chris.

    #51217

    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.

    #51218

    Hi!

    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:

    http://www.chricchio.com/ToDelete/Tiling.jpg

    Thanks again!

    #51219

    Solved with this code:

    html, body {

    background:

    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.

    #51220

    Glad that you found a solution :)

    #51221

    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.