Jump to content


Photo
- - - - -

2 background images in Pagelines?

background images

Best Answer dsh2000 , 23 January 2013 - 12:38 AM

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://romancehoneym.../01/body_bg.png") repeat-x scroll center top #FFFFFF;
}

.page-canvas {
    background: url("http://romancehoneym.../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

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 dsh2000

dsh2000

    Advanced Member

  • Members
  • 44 posts

Posted 23 January 2013 - 12:12 AM

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:

Please Login or Register to see this Hidden Content

 

 

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

 

#page .page-canvas{
    background-image: url('

Please Login or Register to see this Hidden Content

'), url('

Please Login or Register to see this Hidden Content

') !important;
    background-position: left top, right top !important;
    background-repeat: repeat-x, no-repeat
}

 

Here is my url:

Please Login or Register to see this Hidden Content

 

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



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 January 2013 - 12:23 AM

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!



#3 dsh2000

dsh2000

    Advanced Member

  • Members
  • 44 posts

Posted 23 January 2013 - 12:38 AM   Best Answer

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("

Please Login or Register to see this Hidden Content

") repeat-x scroll center top #FFFFFF;
}

.page-canvas {
    background: url("

Please Login or Register to see this Hidden Content

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



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 January 2013 - 03:52 AM

Simply wonderful Daniel. Glad that resolved!



#5 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 23 January 2013 - 02:03 PM

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("

Please Login or Register to see this Hidden Content

") repeat-x scroll center top #FFFFFF;
}

.page-canvas {
    background: url("

Please Login or Register to see this Hidden Content

") 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!







Also tagged with one or more of these keywords: background images