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/
Two Background images linked to header and footer zone
11 posts from 4 voices- Started 1 year ago by Christian Ronchi
- Latest reply from jessipoo
- This topic is not a support question
-
Posted 1 year ago #
-
Thank you very much, i try with the help you provide me :)
Posted 1 year ago # -
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).Posted 1 year ago # -
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?Posted 1 year ago # -
i think doesn't work...
here you can check the page:
http://www.chricchio.com/
i use a monitor resolution of 1920x1200, 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.Posted 1 year ago # -
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.
Posted 1 year ago # -
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!Posted 1 year ago # -
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.
Posted 1 year ago #
Reply
You must log in to post.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
