How to add background pattern in full width website?

[Joanna]

Hello,

I am trying to set up a background pattern for the whole website + keep white background for blog posts. I have managed to do it partially but there are few pages that still don’t catch the bg pattern (all blog posts and portfolio pages). For example here:

http://www.varrojoanna.com/start-project/
http://www.varrojoanna.com/weekly-colours-inspiration-summer/

Is there a better way to apply custom css to A) Have bg pattern B keep white bg for blog posts

Thank you,

Code I have tried:

<!– BACKGROUND PATTERN••• –>

#main-container {
background-image: url(http://www.varrojoanna.com/wp-content/uploads/2016/05/website-bg-pattern-V2.jpg)!important;
background-repeat: repeat;
}

#page-wrap {
background-image: url(http://www.varrojoanna.com/wp-content/uploads/2016/05/website-bg-pattern-V2.jpg);
background-repeat: repeat;
}

#header {
background: #fff url(http://www.varrojoanna.com/wp-content/uploads/2016/05/website-bg-pattern-V2.jpg) repeat top center;
}

#header-section:before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header, .ajax-search-wrap {
background: #fff url(http://www.varrojoanna.com/wp-content/uploads/2016/05/website-bg-pattern-V2.jpg) repeat top center;
}

#footer {
background: #fff url(http://www.varrojoanna.com/wp-content/uploads/2016/05/website-bg-pattern-V2.jpg) repeat top center;
}

#copyright {
background: #fff url(http://www.varrojoanna.com/wp-content/uploads/2016/05/website-bg-pattern-V2.jpg) repeat top center;
}

<!– BLOG POST NO BG PATTERN••• –>

.single-post #main-container {
background:#fff !important;
}

[Kyle – SUPPORT]

There are html comments not css comments:

<!-- BACKGROUND PATTERN••• -->

Should be:

/* BACKGROUND PATTERN */

Change that and let me know if it works

– Kyle

[Joanna]

Omg I am so silly 🙂 It fixed most of the issues. I am left only with the blog posts page:
http://www.varrojoanna.com/diy-trifold-wedding-invitations/

I would like this page to keep white background.

Thank you,
Jo

[Kyle – SUPPORT]

Change the css for page wrap to:

body:not(.single-post) #page-wrap {
  background-image: url("http://www.varrojoanna.com/wp-content/uploads/2016/05/website-bg-pattern-V2.jpg");
  background-repeat: repeat;
}

– Kyle

[Joanna]

I have found the problem! I just had to remove this part and now everything is working.

#page-wrap {
background-image: url(http://www.varrojoanna.com/wp-content/uploads/2016/05/website-bg-pattern-V2.jpg);
background-repeat: repeat;
}

Thank you for fast help! I really appreciate it!

[Kyle – SUPPORT]

No problem!

– Kyle