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
Danny

You will need to remove the background image which you have added and then use CSS like this:

body.page-id-54 {
  background-image: url(http://alignyourspace.com/build/wp-content/uploads/2015/06/AYS-home-image1.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}

Please be aware that this is basic custom CSS, you may need to add additional code or change the code slightly. You will also need to change the ID for each of your pages.


Please search our forums, before posting!

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...
×