You are here: Forum Home / RapidWeaver User Forum / HTML, CSS, and Design Help / Thread
Change Background in Flavorite theme
Hi Guy’s,
This is my first post! Here is my problem and I would appreciate all help that anyone is willing to provide. First off in not a CSS code person so please be patient. I’ve been working for day on trying to change the body background of the Flavorite Theme ( http://www.seydesign.com/themes/Flavorite/ ) to my own background image created here http://bgpatterns.com/ . I believe that I’m correct in saying that this will not be a repeating image.
I want my site to look like this as far as my background image goes http://www.mpluspilates.com/ but my image only shows up on the right side of the page (if there is a scroll bar at the bottom) and the footer area of the page. One more thing when the preview page is loading my background pattern loads then the Flavorite original background loads over it.
Codes that I am using (please don’t laugh as I really don’t know what to use and have tried so many)
Page inspector> header>CSS
background:none !important;
padding: 25px 15px}
body { background: transparent url(assets/pattpalms.jpg) no repeat;!important}
body{background: #fff url(&#xpa;thto(assets/pattpalms.jpg)%);!important}
background:none !important;
padding: 25px 15px}
html {background: url(assets/pattpalms.jpg) repeat;height: 1220px;}
body {background: transparent url(assets/pattpalms.jpg) repeat !important;}
Page inspector> header>assets
I have dropped my image into the assets area (pattpalms.jpg)
I’ve also place the image in the editable images folder of the Flavorite theme
P.S
The attached is a screen snag of what I see, the green palm trees are the background that I would like!
Also I don’t have a URL link to the site yet.
Thanks in advance!
Hi - its a little trickier to work this out in a theme like Flavourite but the following should do it. Copy and paste the css below into the custom css box on each page and add your background image to the assets box on each page:
body {
background:url(assets/pattpalms.jpg) repeat;
}
.preContainer, .breadcrumbContainer, .mainContainer, .postContainer {
background:transparent;
}
If you decide the above obscures the title and navigation too much you could use the following which leaves that area untouched:
body {
background:url(assets/pattpalms.jpg) repeat;
}
.mainContainer, .postContainer {
background:transparent;
}
Best,
Formula for success: Rise early, work hard, strike oil. J P Getty.
Alternatively… put your feet up and play with this…
Thank you sooooooooooooo much Pete! It worked perfectly. Your the greatest!