"Quick and Dirty" full browser background

arsondpi / 2012-08-19 14:31:40   

This is a "Quick and Dirty" way to have a full browser background image in your exhibits...

For Indexhibit version 2:
--------------------------------------------------------
From the backend go to Admin -> Assets -> plugin.backgrounder.php
Find line:

$style .= ($OBJ->vars->exhibit['bgimg'] != '') ? "\nbackground-image: url(" . $OBJ->baseurl . "/files/" . $OBJ->vars->exhibit['bgimg'] . ");\nbackground-repeat: $tiling;\nbackground-position: 215px 0;\nbackground-attachment: fixed;\n" : '';

and change it to:

$style .= ($OBJ->vars->exhibit['bgimg'] != '') ? "\nbackground: url(" . $OBJ->baseurl . "/files/" . $OBJ->vars->exhibit['bgimg'] . ") no-repeat center center fixed;\n-moz-background-size: cover;\n-webkit-background-size: cover;\n-o-background-size: cover;\nbackground-size: cover;\n" : '';

Click the Disk/Save icon.

For Indexhibit version 0.73 or older:
--------------------------------------------------------
Open the index.php file found in ndxz-studio -> site -> plugin
Find line 210

$style .= ($img != '') ? "\nbackground-image: url(".BASEURL."/files/$img);\nbackground-repeat: $tile;\nbackground-position: 215px 0;\nbackground-attachment: fixed;\n" : '';

and change it to

$style .= ($img != '') ? "\nbackground: url(".BASEURL."/files/$img) no-repeat center center fixed;\n-moz-background-size: cover;\n-webkit-background-size: cover;\n-o-background-size: cover;\nbackground-size: cover;\n" : '';

Save.

* Internet Explorer doesn’t recognize the CSS3 property of background-size below IE9. Modern browsers are good though.

arsondpi / 2012-08-19 14:39:53   

As I mentioned this is a quick and dirty way of doing things.
This is not a proper plugin/format.
It's a customisation - try this if you're familiar with code!

ogabriel / 2012-08-19 17:47:44   

awesome.

simonjmp / 2012-08-20 20:04:08   

This seems so straightforward, what's all the fuss about?

;)

andu / 2012-08-20 20:13:21   

Thanks arsondpi.
I try to adapt your code for format.random_image.php, but in the end I have only errors (my html skills very low level).
Can you post similar replace code for random_image format, or suggest any tips.
Thanks.

morganwwf / 2012-08-22 00:49:33   

hi everyone,

i have tried with the suggestion, but still not working...
(not working as in is not scaling with the browser)
here is my website, please kindly help, got really stuck, esp this is just first 5% of my website....
and i am just using default theme, basically with nth changed...

blog.wongwingfat.com

thanks!!
Morgan

morganwwf / 2012-08-22 01:31:27   

ps. i have tried to change the background image from
base.css and also style.css
but still the same result of non scale with browser size.

and this might be a better website to see how it don't work
blog.wongwingfat.com/helo/

ps. there is another potential problem that i wanna ask while i am trying
when i set section 1 background as color, i will see a rectangle about 20px height appear on the front page. hopefully someone can help both!!
THANKS!

best,
Morgan

arsondpi / 2012-08-22 07:46:23   

morganwwf please don't double post... :-)
I've answered your question in your other post...

karlt / 2012-09-06 16:24:15   

Hi,

Is there a way to get full browser background image in format.random_image.php?

Thanks

jonathangrevsen / 2012-09-12 22:59:38   

Very nice Arsondi. I tried it out here on a testsite: bcnmedia.es/indexhibitv2
Can you tell me how and if it´s possible to do two things:

1: make the image expand to the top of the browser? Now it stops where the index ends.

2: is it posible to make a margin/padding on the left and right side of the image=

Thank you. Jonathan

ssperlich / 2012-09-22 01:53:18   

Where do I add my code/ path to background image on this??

$style .= ($img != '') ? "nbackground: url(".BASEURL."/files/$img) no-repeat center center fixed;n-moz-background-size: cover;n-webkit-background-size: cover;n-o-background-size: cover;nbackground-size: cover;n" : '';

Thanks!!

arsondpi / 2012-09-22 07:07:30   

Read the instructions carefully.
To upload background images, edit an exhibit, click on page options and click the Upload Background link button...

ssperlich / 2012-09-23 08:23:01   

thanks, it worked!

jonathangrevsen / 2012-10-10 21:34:51   

Hi Arsondi. I have a question for the v 0.73 fix. Can you make a top padding or margin for the background image, so that it dosn´t start in the top of the browser?

techtonix / 2012-10-27 04:31:40   

Worked great for me.
tectonicus.com
I'm liking all this... Learning code for the first time from this forum. Thanks

ellenjong / 2012-11-26 16:36:25   

Hi arsondpi, very excited to try this out! When this is done on the "back end" does this mean i make a copy of the original php first then make changes to the copied version so i have both options? Then upload to original folder on server? I am only interested in full background for my homepage.

Can this be done for video as well?

arsondpi / 2012-11-27 07:08:08   

Copy/paste the following in the text area:

  1. <style type='text/css'>body { background-repeat: no-repeat; background-position: center center; background-attachment: fixed;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }</style type>

:-)

ellenjong / 2012-11-27 20:11:34   

I now have 3 full background plugins, the original that came with the upgrade, the quick and dirty and the one you last posted. all are in my public folder. I don't think there is any difference when uploading a background file in page options. what am i doing wrong?

ellenjong / 2012-11-27 20:58:30   

thank u arsondpi!

my site looks like this: ellenjong.com

but i would like it to look like this:

ellenjong.com/index.php/test/

(please refer to the image only, not the layout)

apologies for not being able to make links for easier access...

arsondpi / 2012-11-27 21:44:02   

ok then.

In Admin->Assets->style.css find line 47 and make the background attribute transparent.

  1. #index {
  2.      background: transparent;
  3.      width: 215px;
  4. }

then apply the "hack" I posted in the very top of this page, or the code on my last post. The "hack" is going to apply a full background throughout your site and the code just on one page.

ellenjong / 2012-11-28 04:06:38   

I feel so lame that i can't figure this out. When I go to Admin-> Assets->style.css i can't make changes. When I open the style.css file from the downloaded upgrade files to dreamweaver, the code is not the same as the one in Admin.

Should I be able to make the changes directly in Admin? If not, how to proceed?

Regarding the hack code above, I modified in 'back end' in dreamweaver then uploaded via Transmit to server into the plugins folder. Is this correct?

Thanks a mil

arsondpi / 2012-11-28 06:52:23   

yes you should be able to make changes via Admin->Assets. Don't forget that you need to click the Save/Disk icon to save your changes.

I'm not using dreamweaver myself as it often messes up my files/code.
I use Coda but there's other code editor out there - free ones as well.
Just search the web.

jiltko / 2013-01-25 01:25:34   

This little hack, as nice as it is, does not seem to display correctly with my ipad. Any thoughts?

Plumm / 2013-02-02 04:44:35   

Hi, andu and karlt asked if there is a way to get full browser background image in format.random_image.php and nobody answered them. I have the same question. :)
The solution described here: indexhibit.org/forum/thread/17039/ doesn't work for me and and don't know why. So...is possible to change those pictures in "random picture theme" into full browser bg? I would be awesome. Thank you very much.

arsondpi / 2013-02-02 13:23:58   

I think I did this using javascript and building a format in my old Legacy site.
You'd have to do the same I guess - and coding skills are needed for this.

Plumm / 2013-02-03 06:47:33   

Oh, coding skills. I don't have them. That's a bit of a problem. :D In the old version of indexhibit I succeeded in this full random bg thing, but now it looks impossible for me. So, if somebody figure it out - how to transform this format.random_image.php into a random full background format - I would realy apreciate some advice. :) Thank's.

plasticpeter / 2013-03-13 09:12:27   

Hi there!

I also would like to have the 'full random background' - option for my intro page in this new 2.0 version...
Any suggestions would be greatly appreciated :)
Thanks, Peter

lemathieu A / 2013-03-13 09:36:10   

Hello,
Did you made a simple search with "random background" ? I guess no.
Another "Paper" made the work : indexhibit.org/forum/thread/17039/

kcasanova / 2013-03-27 00:29:03   

Hello.

I used the "Quick & Dirty" hack but it's only applying to one page, not the whole site...

vivariumamericana.com

Vaska A / 2013-03-27 00:37:44   

It's not supposed to apply to the whole site. You would do that by editing your style.css file directly. I'm closing this thread because it's become unfocused and is becoming unusable. Ask specific questions in new threads.

This thread has been closed, thank you.