Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › How to add background pattern in full width website?
New Landing › How can we help? › Themeforest Theme Support › Dante › How to add background pattern in full width website?
- This topic has 5 replies, 2 voices, and was last updated 7 years by Kyle – SUPPORT.
-
Posted in: Dante
-
June 20, 2016 at 11:13 am #275851
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;
}June 20, 2016 at 1:05 pm #275890There are html comments not css comments:
<!-- BACKGROUND PATTERN -->
Should be:
/* BACKGROUND PATTERN */
Change that and let me know if it works
– Kyle
June 20, 2016 at 1:12 pm #275892Omg 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,
JoJune 20, 2016 at 1:14 pm #275893Change 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
June 20, 2016 at 1:15 pm #275894I 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!
June 20, 2016 at 1:17 pm #275896No problem!
– Kyle
-
Posted in: Dante
You must be logged in and have valid license to reply to this topic.