Jump to content
Sign in to follow this  
mickradford

Multiple Background Images

Recommended Posts

mickradford

Good Evening Everyone, I was wondering if anyone had any experience with using multiple background images with Platform Pro. What I'm attempting to achieve would be one background image for the header area, one vertically repeating for the content and then finally a third image to display in the footer. I've seen this done on static sites through CSS (whether or not it's the best idea for browser compatibility I don't know) but it seems as though there might be a way to achieve this either through hooks or some custom CSS with a full-width layout. Here's an example I saw that illustrates what I'm talking about Peter Shallard(not on a Platform framework unfortunately.) Kind of an intrepid request but it never hurts to ask. Thank You!

Share this post


Link to post
Share on other sites
catrina

There are some people (using PlatformPro) who have done this using CSS. Take a look at this topic for example CSS: http://www.pagelines.com/forum/topic/10054 If it's done here, it could be done on your own site.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mickradford

Hey Catrina, Thanks for the tip. It was a little different than what I was shooting for but it got me thinking in the right direction. Here's what I ended up doing: two images - one to display in the top portion and one to repeat. I removed the background image in the Pagelines settings and used the following code in the Custom CSS:

#page{
	background-image: url(http://www.lauramichaelsmusic.com/images/site/background_main.jpg), url(http://www.lauramichaelsmusic.com/images/site/background_repeat.jpg);
	background-position: 50% 0%, 50%;
	background-repeat: no-repeat, repeat-y;
	}
Using this I'm sure I could use a footer image if the design requires by adding a third image and givig it the position of
50% 100%

(center, bottom) in the CSS. Thanks for help! -Mick

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×