Archived

This topic is now archived and is closed to further replies.

  • 0

2 background images in Pagelines?


Question

Posted · Report post

Dear Pagelines forum,

 

I am trying to use 2 different background images for my page.

 

I have found this topic already, tried to replicate, and have been unsuccessful so far:

http://www.pagelines.com/forum/topic/24033-adding-2-images-to-a-content-box/?hl=background+images#entry140567

 

 

Here is the CSS that I'm trying to use:

 

#page .page-canvas{
    background-image: url('http://romancehoneymoondestinations.com/wp-content/uploads/2013/01/body_bg.png'), url('http://romancehoneymoondestinations.com/wp-content/uploads/2013/01/body_bg.jpg') !important;
    background-position: left top, right top !important;
    background-repeat: repeat-x, no-repeat
}

 

Here is my url: http://romancehoneymoondestinations.com

 

Am I using the wrong selectors to make this happen?

 

Any help to point me in the right direction would be greatly appreciated.

 

Kind regards,

-Daniel

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

Good evening Rob,

 

Thank you for your promptness as always.

 

The awesome support is one of the reasons why I keep using the Pagelines framework for my projects.

 

I was able to accomplish what I wanted by breaking the backgrounds up using the following code:

 

#site {
    background: url("http://romancehoneymoondestinations.com/wp-content/uploads/2013/01/body_bg.png") repeat-x scroll center top #FFFFFF;
}

.page-canvas {
    background: url("http://romancehoneymoondestinations.com/wp-content/uploads/2013/01/body_bg.jpg") no-repeat scroll right top transparent;
}

 

I thought it could be done using that snippet from css3, but perhaps you are right and the area was just too broad and needed to be more well-defined.

 

Thank you again for your help!

-Daniel

Share this post


Link to post
Share on other sites

Posted · Report post

Daniel,

 

WebWerx, a very skilled developer, posted that code specifically for boxes on his homepage.

 

Your code is applying the backgrounds to a very broad and large area, site-wide. I don't know, nor do I believe, this will work.

 

Further, I do not believe one can separate the repeat instruction as you have.

 

You may wish to reach out to WebWerx via the forum's Messaging system and ask his opinion. He may shed some additional light. He's a very nice chap!

Share this post


Link to post
Share on other sites

Posted · Report post

Simply wonderful Daniel. Glad that resolved!

Share this post


Link to post
Share on other sites

Posted · Report post

Good evening Rob,

 

Thank you for your promptness as always.

 

The awesome support is one of the reasons why I keep using the Pagelines framework for my projects.

 

I was able to accomplish what I wanted by breaking the backgrounds up using the following code:

 

#site {

    background: url("http://romancehoneymoondestinations.com/wp-content/uploads/2013/01/body_bg.png") repeat-x scroll center top #FFFFFF;

}

.page-canvas {

    background: url("http://romancehoneymoondestinations.com/wp-content/uploads/2013/01/body_bg.jpg") no-repeat scroll right top transparent;

}

 

I thought it could be done using that snippet from css3, but perhaps you are right and the area was just too broad and needed to be more well-defined.

 

Thank you again for your help!

-Daniel

 

Happy you figured it out Daniel. I agree with Rob regarding the area being too large. But CSS Selectors are made for a reason!

Share this post


Link to post
Share on other sites