Jump to content

Archived

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

triggerfish

A different Background on each page

Recommended Posts

triggerfish

Hi, I need a different Background on each page.

In my css file I have  tried ..  (but nothing is working)

.page-id-7 #maincontent .texture  { 
  background: url('http://alignyourspace.com/build/wp-content/uploads/2015/06/AYS-home-image1.jpg') no-repeat center center fixed!important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

and also..
.page-id-7 #page-canvas {
    background: url('http://alignyourspace.com/build/wp-content/uploads/2015/06/AYS-home-image1.jpg');
    background-repeat:repeat-x;
    }

.page-id-7 {
    background: url('http://alignyourspace.com/build/wp-content/uploads/2015/06/AYS-home-image1.jpg');
    background-repeat:repeat-x;
    }

 

website here...http://alignyourspace.com/build

Share this post


Link to post
Share on other sites
Aires

Hi, 

Give this a try

body.page-id-# .site-wrap {
background-image: url()!important;
background-attachment:fixed;
 }

Aires


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
triggerfish

Thanks Aires,

I can see the background now.

I am now working on the responsiveness of it and location.

Share this post


Link to post
Share on other sites
triggerfish

Any ideas how I can just hide the background image on the other pages,

the COLOR & BG settings for the background gives the best responsiveness to the image, but it appears on every

page. It maybe I n the java because I cannot seem to find it in the css.

Share this post


Link to post
Share on other sites
Aires

If you used the page-id it shouldnt be on every page.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
triggerfish

Hi, yes..

but I am not using the page id/css because the image on the HOME page works much better with the build in DMS background.

I just need to shut the bloody thing off on the rest of the pages.

Thx for your help so far.

Share this post


Link to post
Share on other sites
Aires

That seems abit tricky but the only thing that comes to mind is to change the BG color of every other page to white. 

Some thing like this

body.page-id-# .site-wrap,
body.page-id-# .site-wrap,
body.page-id-# .site-wrap {
background-color:white;
}

But this could prove to be a headache if you have alot of pages maybe someone else may have a better suggestion.

Aires


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
triggerfish

Thx Aires that seems to have worked,

I am hoping the image is not also loaded  (for speed concerns).

 

Thx for your help.

PS Ya think DMS would just have an option for this, why would you want the same background on everypage?

Share this post


Link to post
Share on other sites
Aires

NP


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites

  • Similar Content

    • triggerfish
      By triggerfish+
      Hi, I need a different Background on each page.
      In my css file I have  tried ..  (but nothing is working)
      .page-id-7 #maincontent .texture  { 
        background: url('http://alignyourspace.com/build/wp-content/uploads/2015/06/AYS-home-image1.jpg') no-repeat center center fixed!important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }
      and also..
      .page-id-7 #page-canvas {
          background: url('http://alignyourspace.com/build/wp-content/uploads/2015/06/AYS-home-image1.jpg');
          background-repeat:repeat-x;
          }
      .page-id-7 {
          background: url('http://alignyourspace.com/build/wp-content/uploads/2015/06/AYS-home-image1.jpg');
          background-repeat:repeat-x;
          }
       
      website here...http://alignyourspace.com/build
    • 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
    • crunchnet
      By crunchnet
      HI there,   First play with DMS 2 and I wanted to upgrade our sister company, flamingpaper.co.uk. Most things went well and after some tweeking the website is back online. If you visit the website you will see the section at the top (where the main video is) is a parallax background. Scrolling down you'll see the top of the image get repeated as you scroll past it. I know this used to be a problem with DMS as well but I was using the following CSS to fix it:   /* correct-paralax */ .correct-background-parallax .pl-area-wrap { background-attachment: fixed; } After the upgrade, however, that no longer seems to work.
       
      Can anyone suggest to me how I could go about solving this problem. The main issue is when it happens further on down the page so I have had to set these as static backgrounds for the time being. 
        All the best,   Steve
    • SaleekR
      By SaleekR
      Ok here here are the 4 things i want to do, that I am slightly confused about:
      Put a background on the content area of the entire site (every page), while in full width more Have a background color (not image) for the site itself that is different from the content area Have the content area background also apply to the footer and look seamless have a separate backgrounf for the header that IS full width. I've been trying and just not getting it to work. Any suggestions?
       
    • jeomiland
      By jeomiland+
      I require a box that has a specified background color floating over the main page background image. The box needs to have NO PADDING around the image, but below the image, background color that will allow the text to be seen.
       
      Have created 2 columns and placed a MediaBox in the left column and will place main content text in the second. I will need a padding in the second box so text doesn't run into the edges of the background, but no padding under the 1st.
       
      Actually, what I really need is a section into which I place 2 columns as above, Then the container section can have the background color which will encompass both colums.
       
      Reference:
      http://westcoastfacemasks.com/BLOG/facemask-reconditioning-process-faqs/
      trying to mimic this static HTML layout:
       
      If I have to do this in CSS, what's the best way to establish the area to which to apply the style??? In Firefox, I have familiarity with the inspector there, but things are so nested, not sure where to start the CSS definition? Advise?
       
      Thanks for your ideas...
×