4 replies to this topic

[dsh2000]

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

[Rob]

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!

[dsh2000]

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

[Rob]

Simply wonderful Daniel. Glad that resolved!

[WebWerx]

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!