Different Background image for different pages?

[motionltd 12]

Guys

 

With Framework you could could easily specify a different background image for different pages. Very useful. Looks like you can't do it with DMS right? Are there plans to add this feature? Or is there an add-on for it?

[James B 436]

Hi there, yes unfortunately this option isn't included in DMS on a per page basis.

 

There currently isn't an add on for this available. You can suggest it as a feature enhancement at https://github.com/pagelines/DMS/issues?state=open

 

In the meantime you can use css to change the background, something like the below. The css will change depending on the layout mode used in the design but you can use the class for the category, or the #page id to specify the page you want to target to make the changes.

.category-test .site-wrap {
  background: #ffffff;}

[motionltd 12]

Thanks James, thats very helpful. Will it automatically make is enlarge to screen and fix it? 

[Danny+ 1,327]

Hi Ben,

 

Not sure what you mean by this "Will it automatically make is enlarge to screen and fix it?" Can you explain please.

[motionltd 12]

You know how you can set the image settings for the whole site. Will these settings be applied to the CSS installed images on all the other pages?

 

Background Image Settings

Fit image to page? 

If you use this option the image will be fit "responsively" to the background of your page. This means the settings below will have no effect.

Background Repeat — SELECT —No RepeatRepeatRepeat HorizontallyRepeat Vertically

Vertical Background Position in Percent — SELECT —0%1%2%3%4%5%6%7%8%9%10%11%12%13%14%15%16%17%18%19%20%21%22%23%24%25%26%27%28%29%30%31%32%33%34%35%36%37%38%39%40%41%42%43%44%45%46%47%48%49%50%51%52%53%54%55%56%57%58%59%60%61%62%63%64%65%66%67%68%69%70%71%72%73%74%75%76%77%78%79%80%81%82%83%84%85%86%87%88%89%90%91%92%93%94%95%96%97%98%99%100%

Horizontal Background Position in Percent — SELECT —0%1%2%3%4%5%6%7%8%9%10%11%12%13%14%15%16%17%18%19%20%21%22%23%24%25%26%27%28%29%30%31%32%33%34%35%36%37%38%39%40%41%42%43%44%45%46%47%48%49%50%51%52%53%54%55%56%57%58%59%60%61%62%63%64%65%66%67%68%69%70%71%72%73%74%75%76%77%78%79%80%81%82%83%84%85%86%87%88%89%90%91%92%93%94%95%96%97%98%99%100%

Set Background Attachment — SELECT —ScrollFixed

[Danny+ 1,327]

If you want to add a background image to a specific page and want it to fill the page(s) completely, you will want to use custom CSS, prefix your code with the page-id-class like James as done above with the category-id class and you will want to use the following property:

 

background-size: cover;

 

You can see here for more details - http://www.w3schools.com/cssref/css3_pr_background-size.asp

[motionltd 12]

Guys, I just tried this and I'm still struggling a bit. Could you show me the exact code I need? Something is obviously missing. 

 

My page id is: 146

The image is here: http://10-10ths.co.uk/wp-content/uploads/2013/10/P039_35A2.jpg

 

I tried: 

 

#146

.site-wrap {

  background-image: http://10-10ths.co.uk/wp-content/uploads/2013/10/P039_35A2.jpg;}

 

But it didn't work.

 

Cheers

 

Ben

[Danny+ 1,327]

Your code isn't correct.

 

Here is an example:

.page-id-146 .site-wrap {
background-image: url(http://10-10ths.co.uk/wp-content/uploads/2013/10/P039_35A2.jpg);
background-size: cover;
}

Basically, the issue you have is that you have only added the id of the page, thats not how it works. You will want to view your page using Chromes web dev tools and inspect the body tag, in there you will find multiple classes, which can be used to add individual or unique styling to posts, pages etc..

 

http://d.pr/i/pf1Y

[kzwoelf 1]

I use a fairly cool plugin "Background Per Page". You should check it out.

[Danny+ 1,327]

kzwoelf - Thanks for sharing.

[motionltd 12]

I just tried that plugin and its not working, when I hit update it clears all my selections. I guess theres a conflict somewhere!

[MrFent+ 28]

Danny I tried the code you suggested, inclucing background-size: cover; this only works if there is enough content on the page to show the entire background image. Otherwise the bottom of the image gets cut off. Is there a code we can put into functions.php to enqueue the jQuery.supersized script that gets loaded when the "Fit Image to Page" option is checked, except be able to control the image url on a page by page basis?

 

<script> /* <![CDATA[ */

!function ($) {

jQuery(document).ready(function() {

jQuery.supersized({ slides: [{ image : 'http://members.culturedfoodlife.com/wp-content/uploads/sites/2/2013/12/door.jpg' }]})

})

}(window.jQuery);

/* ]]> */

</script>

[MrFent+ 28]

bump

[Danny+ 1,327]

MrFent - I have no idea to be honest.

Can you provide a screenshot of the background issue, I didn't have any such issue on mine and my test didn't contain a lot of content.