Forums

Add a background Pic?

Permalink
I am using a free theme from C5 and want to change the background stock gray to an image. Is that possible? And can it be done easily? It seems other posts talk about specific areas (nav, headers, etc.), but not the background. Thanks, from a newbie.
rickhboone
 
EmeraldStar replied on at Permalink Reply
EmeraldStar
I'm not aware of an easy way to change it. So if no one else replies here is how to edit the code.

Step 1: Save the image you want to use in your images file.
So go to your images file: Concrete >Themes> Default> Images
Upload the picture.

Step 2: Find your main.css file. This sets the style for your site.
For me it was under Concrete >Themes> Default> Main.css

Step 3: Edit the code. Open your main.css code and at the top there should be a place where they set the parameters for the body.

Here is the code I have for mine. I think it's pretty self explanatory. 

body {/* customize_background */ background-color: #cccccc; /* customize_background */ padding: 0px; margin: 0px;
background-image:url(images/test_math_copy.png);
background-position:center;
background-repeat:repeat-y;}


You can change the test_math_copy.png to the name of the file you put in your images folder. Decide how you want the picture positioned and change the settings accordingly. Repeat-y means it repeats the picture vertically, repeat-x means it repeats the picture horizontally. Enjoy!
wagdi replied on at Permalink Reply
wagdi
Another option would be to use one of these great add-ons-

1. Backstretch- developed byhereNT

"Uses a jQuery library written by Scott Robbin to place an image from the file manager as the background of your page, stretched to fill the browser window. Resizes with the window and changes orientation for iPhone."

SOURCE: http://www.concrete5.org/marketplace/addons/backstretch/...



2. Background gallery- developed by lak17a

"Fullscreen background slideshow.

Features:

Resizes images to fill browser while maintaining image dimension ratio
Cycles backgrounds via slideshow with transitions and dynamic preloading
Thumbnail navigation option
Navigation controls with keyboard support
Images from a file set
Ability to show one random image from File Set"

SOURCE: http://www.concrete5.org/marketplace/addons/background/...



3. Dojo Supersized-developed bydojodesign

"Add images that fill your website background.

Works great in Concrete 5.5!

Images can:

Resizes images to fill browser while maintaining image dimension ratio
Cycles backgrounds via slideshow with transitions and preloading
Thumbnail navigation option with image titles
Navigate images using your keyboards arrow keys
Pulls images from a file set
Add code anywhere on your page
Works great on an iPad!"

View it in action without navigation:
http://www.dojodesignstudio.com/dev/c5-testing/dojo-supersized/...

View it in action with navigation:
http://www.dojodesignstudio.com/dev/c5-testing/supersized-with-nav/...

SOURCE: http://www.concrete5.org/marketplace/addons/dojo-supersized/...



4. DeepIt Slider- developed bysebastienj

"The DeepIt plug-in has a lot of features of a regular slider. Some of them are auto play, stop on hover, show/hide navigation, bullets list or thumbnails for a navigation, captions with html content. But the main cause for creation of the addons was to give websites' users amazing live-background experience. Use as many layers as you want.

Resizing capabilities (Whatever the size of your image, the plugin can reduce the size of each image)
4 captions position (top, bottom, left, right)
Use any image attribute as caption
Image description attribute will converted with Textile Markup
Bullet and thumbnails are dynamically positioned on the center of the screen
The addon support differents ratio of picture (not only images of the same size)
Pretty cool CSS3 easy to adapt.
Any Animated backgrounds you want
Auto playPause on hover
Bullets list or thumbnails navigation
Prev/Next arrowsHide arrows on mouse out
And more !
The depth effect is created by superimposing images with transparency (PNG 24 bits). In the plugin, these images are called 'layers' and you can add as many as you want, manage their speed and their direction of movement (right to left or left to right)."

SOURCE:http://www.concrete5.org/marketplace/addons/deepit-slider/...