How do I change/add a background image?
Permalink Browser Info Environment
I'm trying to add a sitewide background image in Fruitful, but I can't figure out how to add that.
In digging through discussion posts, I can find references to that question, but the answers don't appear to apply to concrete 5.7 installs. There are also a couple of plugins that do that, but again they don't install in 5.7.
In digging through discussion posts, I can find references to that question, but the answers don't appear to apply to concrete 5.7 installs. There are also a couple of plugins that do that, but again they don't install in 5.7.
| Type: | Discussion |
|---|---|
| Status: | In Progress |
Thanks for your reply.
What CSS file needs to be edited for the background of this theme?
The logical file appears to be:
/packages/fruitful/themes/fruitful/css/bootstrap.less
(forgive me, I'm not a CSS expert).
What CSS file needs to be edited for the background of this theme?
The logical file appears to be:
/packages/fruitful/themes/fruitful/css/bootstrap.less
(forgive me, I'm not a CSS expert).
I can now confirm that the above is the correct file to edit to change the background image for this theme. Here's a snippet of the edited file:
One other note: there is a bit of weirdness going on with the Sitewide Logo Area;
On the Main/Home page, if block is added to the Sitewide Logo Area, the background becomes solid white (obscuring the background). However, the same area displays with a transparent background on any sub pages. Unfortunately this meant that I had to avoid using this block area.
body { /*! BEGIN. My addition for background image. */ padding: 0px; background-repeat: no-repeat; background-attachment: scroll; background-position: left top; -moz-background-size: cover; background-size: auto; height:100%; background-color: transparent; background-image:url('grass_pixels_dirt_Bkgrnd-m2.jpg'); /*! END. My addition for background image. */ margin: 0; }
One other note: there is a bit of weirdness going on with the Sitewide Logo Area;
On the Main/Home page, if block is added to the Sitewide Logo Area, the background becomes solid white (obscuring the background). However, the same area displays with a transparent background on any sub pages. Unfortunately this meant that I had to avoid using this block area.
you could put it in any CSS file. However, bootstrap is simply the framework CSS.
iGotStyle.less is the actual theme customization file. I'd probably make customizations there.
iGotStyle.less is the actual theme customization file. I'd probably make customizations there.
Also, there's no reason why it should have a background on one page and not another. Shoot me a link I can look at?
if you add the background to the HTML tag you will no get the background flickering.
as below
the example above expects the image in the image folder + the adjustment is made in the iGotStyle.less
as below
html { height: 100%; width: 100%; background: transparent url(../img/image.png); }
the example above expects the image in the image folder + the adjustment is made in the iGotStyle.less
At the moment, there's no real way to set a background image other than editing the CSS files.
That said, that will likely change in the near future.