Forums

Full-page background image

Permalink
Hi, I have a background that a client is able to modify. Like so:

<div id="bg">
<?php
$a = new Area('Background image');
$a->setBlockLimit(1);
$a->display($c);
?>
</div>

I also think this is better than creating a template for every single page (I already have many templates due to the nature of the site).

How would I go about making the background image full size AND proportional when the browser is resized?

I tried all of the tutorials on this page:http://css-tricks.com/perfect-full-page-background-image/... , and for some reason the background is still getting squished when I decrease the browser window width (horizontally).

I'm wondering if it's because I have a div with a block in it, as opposed to the examples on that site. Embedded background images and <img src="whatever.jpg" id="bg">

Thanks for any suggestions!
jaline
 
mesuva replied on at Permalink Reply
mesuva
I recently added this to a site (not live yet, otherwise I'd link to it).

I used:http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-...

Download that and create in your theme folder a bgstretch folder. In that, place bgstretcher.css and bgstretcher.js

I set one image to be the default and used a page attribute to manage the selection of ones for specific pages.

The only problem with the above script is that it breaks things in edit mode (had to set it to disable in this case).

I added this to my theme's header.php file, just underneath Loader::element('header_required');
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getThemePath() . '/bgstretch/bgstretcher.css'; ?>" />
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/bgstretch/bgstretcher.js"></script>
<?php 
$background = $c->getCollectionAttributeValue('background_image');
if ($background) {
   $backgroundimage =  $background->getVersion()->getRelativePath();
} else {
    $backgroundimage = $this->getThemePath() . '/images/background_default.jpg';
}
?>
<?php if (!$c->isEditMode()) { ?>
<script type="text/javascript">
$(document).ready(function(){
//  Initialize Backgound Stretcher
$('body').bgStretcher({
Viewing 15 lines of 20 lines. View entire code block.


After adding this, you'll just need to create your page attribute, 'background_image'

It's pretty fresh code, so if you find any problems with this approach, please let me know.

-Ryan
arrestingdevelopment replied on at Permalink Reply
arrestingdevelopment
Mesuva's solution sounds like a really good one. But you might also want to check out Dojo Supersized (http://www.concrete5.org/marketplace/addons/dojo-supersized/). It's $20, and targeted to creating a full-screen background slide-show but should work for a single image, too. Might be overkill. And/or might not work if you want different images for each page (unless you add it individually to each page).

If you're on 5.5.1... it might work as a Global Area so it could be managed centrally.

In 5.4.2.2... I used it via a Global Area (free addon here:http://www.concrete5.org/marketplace/addons/global-areas/... ) and it worked a treat.

Good luck!

- John
mesuva replied on at Permalink Reply
mesuva
Wow, I don't know how I missed that add-on!

I wouldn't be surprised if it actually uses the same jQuery library - but it takes care of all of the fiddly config, looks very good.
arrestingdevelopment replied on at Permalink Reply
arrestingdevelopment
It actually uses a different jQuery plugin: supersized.js.
wagdi replied on at Permalink Reply
wagdi
Heres a couple more for the list-

The 'Backstretch' add-on sounds like it fits your needs exactly- http://www.concrete5.org/marketplace/addons/backstretch/...

Similar to the Dojo-supersized add-on is http://www.concrete5.org/marketplace/addons/background/...
alanski replied on at Permalink Reply
alanski
I am fairly new to C5 but have just used backjground stretch to put a ful size image across the background of a template.

It runs in the header like this:

<script src="/c51/themes/mythemename/javascripts/jquery.backstretch.min.js"></script>
<script>
    $.backstretch("/c51/themes/mythemename/images/background1.png");
</script>

Somehow I imagine you need some javascript that will take the argument as a div id ="bg" and act upon that element and the image within
yoschi replied on at Permalink Reply
yoschi
Here's what I did, although this was for using a different picture on each page:

- Download the supersized plugin & use with jquery and use the provided "supersized.core.3.2.1.min.js":
http://www.buildinternet.com/project/supersized/download.html...

Add a custom attribute of type "image" to the page using "page_image" as the attribute handler. Then go into the page's properties and add an image (this will be where your user can change the image) for each page.

- Use this somewhere in your php code to get the path for the image:
<div id="fullscreenbackground"><?php
 if($c->getAttribute('page_image')){
     echo $c->getAttribute('page_image')->getRelativePath();
 }
?></div>


- Add this css to prevent the display of the path to the user:
#fullscreenbackground{ display:none; }


- Add this css for properly displaying the background image
* { margin:0; padding:0; }
body { background:#111; height:100%; }
img{ border:none; }
#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:#FFF;}
#supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img{ width:auto; height:auto; position:relative; outline:none; border:none; }
#supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#FFF; display:block; }
#supersized a.image-loading { background:#FFF; width:100%; height:100%; }


- Use this javascript code for displaying the background image using the filename provided by the php-code:
jQuery(document).ready(function($) {
   var fullscreenImageSource = ""; //might not be needed
   if ($('#fullscreenbackground').html() === ''){
      fullscreenImageSource = '/themes/[YOUR theme's name]/images/[Image to be used by DEFAULT].jpg';
   } else{
      fullscreenImageSource = $('#fullscreenbackground').html();
   }
   $.supersized({
      slides  :     [ {image : fullscreenImageSource} ],
      horizontal_center : 1
   });   
});


That should do it, hope it works for you if it isn't too late already. I think the supersized plugin is the most cross-browser solution, even more so than the solutions provided on css-tricks. But of course, you will need to have javascript enabled...
bozebep replied on at Permalink Reply
Dear Yoschi,

Thanks for the great post. This is very useful and I can easy select a full-screen background images on every page. There is only one question left. The default background image could not be loaded. All I see is a white background of the supersized loader. I try to modify the link to the defaultbackground several times but whatever I try this won't change.

This is what I put in my header.php

<!-- fullscreen background //-->
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/supersized.core.3.2.1.min.js"></script>
<script type="text/javascript">
   jQuery(document).ready(function($) {
   var fullscreenImageSource = ""; //might not be needed
   if ($('#fullscreenbackground').html() === ''){fullscreenImageSource = '/concrete/themes/portfolio-16-8/images/defaultbg6.jpg';} else{
      fullscreenImageSource = $('#fullscreenbackground').html();
   }
   $.supersized({
      slides  :     [ {image : fullscreenImageSource} ],
      horizontal_center : 1
   });   
});
</script>
<!-- end fullscreen background //-->


thank you very much!
yoschi replied on at Permalink Reply
yoschi
Have you tried without /concrete in the path?
Also you can try getting the theme path using php like so:
if ($('#fullscreenbackground').html() === ''){fullscreenImageSource = '<?php echo $this->getThemePath(); ?>/images/defaultbg6.jpg';} else{
      fullscreenImageSource = $('#fullscreenbackground').html();
   }