Forums

Fixed Background Image

Permalink 1 user found helpful
So I've set up my background image with the following code

<?php
$backgroundImage = $c->getAttribute('bg_img');
if ($backgroundImage) {
$backgroundImageURL = $backgroundImage->getURL();
echo '<style type="text/css">body {background-image:url(' . $backgroundImageURL . ');background-position: center;}</style>';
}
?>

I'm wondering how should I edit this code to make it so that the background remains static whilst I scroll up and down the page. Any ideas?
 
irsah replied on at Permalink Reply
irsah
Hi ZeCaoow,

I used to use background image property in css but do to browsers inconsistencies i use this method which will work perfectly in any browsers.

An example i use here in this blogger templatehttp://blogrstore-template.blogspot.com/... which uses the below css property.

In your case, add this to your main.css theme file:-

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}


At your template/page type > add this piece of codes after <body> element:-

<?php 
$backgroundImage = $c->getAttribute('bg_img');
if ($backgroundImage) {
$backgroundImageURL = $backgroundImage->getURL();
echo '<div id="bg"><img src="' . $backgroundImageURL. '" alt=""></div>';
}
?>


Credits to Chriss of CSSTricks.com

FYI, I also have a static full background image block which comes with a responsive template that can be found here in c5 marketplacehttp://www.concrete5.org/marketplace/themes/arteri5-responsive-them... and there are a couple of blocks which has the same features too made available, which you can easily customize and work with.

You can also find example of use at the link above.

Hope it helps out.
irsah
pdcouto replied on at Permalink Reply
pdcouto
Hi irsah, applied this last one, but where do I insert the pic URL?
irsah replied on at Permalink Reply
irsah
Hai..

The image is included/can be accessed at any of your web pages using via c5 Edit mode.

You have to add/create a custom image attribute at your c5 dashboard with an id of " bg_url " (without quotes). Then install that custom image attribute at your web pages

Any time you wish to display the background image then go to your web pages > click edit > find the image attribute you created > select/grab/upload your image and save. It will automatically insert your selected image as the background of your c5 webpage/s (depending how set up the template codes).

By using this method, it is easier to maintain the changes to your webpages/websites for future development or upgrades including template changes just by using c5 built-in functionalities.

Hope it helps.