Forums

Background Image

Permalink
Greetings!

I would like to change my background image on 1 of my pages. How do I do this without changing all of my pages background?

Thanks!
meal
 
enlil replied on at Permalink Reply
enlil
Reference my answer here for one easy way to do it...
http://www.concrete5.org/community/forums/themes/login-page-full-si...
Steevb replied on at Permalink Reply
Steevb
There was an add-on for this, but I cannot seem to find it?

It was called 'Page Background Selector', if anybody knows where it's gone?
INTcommunications replied on at Permalink Reply
INTcommunications
Just give your body tag an ID
<body id="homePage">

then in your css file

body#homePage {
color: red;
}

You can then call out to anything on that page directly
body#homePage { background-image: url(../images/bg.jpg);
background-repeat: repeat-y;
background-position: center top; }
body#homePage #header h1{ color: green; }
body#homePage #content { color: purple; }
body#homePage #footer { background: brown; }
INTcommunications replied on at Permalink Reply
INTcommunications
You could of course set the id tag of the body dynamically in your default code ( or any other page )
I have seen a lot of opening body tags in the header.php so that may be a good place to start looking

i.e.
<body id="<?php echo htmlspecialchars($c->getCollectionName(), ENT_QUOTES, 'UTF-8'); ?>">
or
<body id="<?php echo $c->getCollectionHandle() ?>">
then just reference what ever name you want the backgound in your css
file
bleenders replied on at Permalink Reply
bleenders
Here is free snippet you can use, because im in a good mood.
Make a page attribute called background_image (type should be obvious).
Place a fallback image in your /themes/THEME/images folder.
Place this somewhere in your header.
You should add some additional styling on the body like:
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:cover!important;
background-position:center center;
background-repeat:no-repeat;

And when you got some spare time you could do the same thing in a template file for the slideshow.

$(document).ready(function(){
            <?php 
               $file = $c->getAttribute("background_image");
               if (is_object($file)) {
                   $ih = Loader::helper('image');
                  $img = $ih->getThumbnail($file, 2000, 9999, false);
               }
            ?>
            var backgroundImage = "<?php Print($img->src); ?>";
            if(backgroundImage){
               $('body').css('background-image','url('+backgroundImage+')');
            }
            else{
               $('body').css('background-image','url(<?php echo $this->getThemePath() ?>/images/image.jpg)');   
            }
Viewing 15 lines of 16 lines. View entire code block.