Jump to content
Sign in to follow this  
dsh2000

2 background images in Pagelines?

Recommended Posts

dsh2000    2
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:

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
Rob    547
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!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
dsh2000    2
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("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
Rob    547
Rob

Simply wonderful Daniel. Glad that resolved!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
WebWerx    0
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("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

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  

  • Similar Content

    • davemoppert
      By davemoppert
      Welp - I have been trying for the last 3 or so hours to get the background images to parallax. It seems like it will work if the canvas areas I am trying to set the Parallaxing background to are in the footer area - but not in the page template's content area for some reason. Any idea how to get parallaxing backgrounds to work in the content area of the page template? - I don't want these sections on every page globally.
       
      Thanks,
       
      - Dave
    • rich_162534
      By rich_162534+
      My site has a background image that I want to appear on MOST pages. However, I need to display a different background image on a few pages. I am attempting to use the individual page classes to target those pages, but nothing I do will change the background image on the body tag. The following is the code I'm using:
       
      body {background-image: url ('http://www.tfp.box9design.org/images/bg-body02.jpg')!important;background-repeat: repeat;}
       
      In order to target a specific page with a different background image I am using the code:
       
      body .page-id-137 {background-image:url("http://www.b9d.box9design.org/wp-content/images/bg-wood-fence-02.jpg");}
       
      I am able to use the above code to get the background image on the .pl-area-wrap tag, so why not on the body, html or .page tag?
       
      For the time being, I have removed the site-wide background image in Global Options.
       
      the test site is at http://tfp.box9design.org
       
      Any advice/guidance I can get from the forum would be much appreciated.
×