June 14, 2012 at 1:17 pm #13279
Great theme btw however I am hitting a brick wall trying to get a full screen background like the theme demo.
When I upload my large background WP resizes my background to smaller sizes.
I’ve tried searching but there doesn’t seem to be a definitive way of fixing this and the documentation only mentions to simply upload the background.
How do I do it?
CJune 14, 2012 at 4:55 pm #78556
Can you post a link to the demo you referring to? To my knowledge Shoutbox doesn’t offer a full screen backgrounds feature.
MyaJune 14, 2012 at 5:17 pm #78557
Accessed from the Shoutbox Demo at
I’ve taken a screenshot for you also at http://img401.imageshack.us/img401/7921/shoutboxdemo.png
CraigJune 14, 2012 at 6:04 pm #78558
Sorry. I see now. I was looking for a full screen option like on some of our other themes. Let me do some testing. I’m having the same issue.
MyaJune 14, 2012 at 6:25 pm #78559
I’m going to flag this for the rest of the support team plus Kriesi to look at. Perhaps they know a setting you and I are missing. In the meantime, you can do this.
Open functions.php and change this line
$avia_config['imgSize']['full'] = array('width'=>940, 'height'=>390); // big images for fullsize pages and fullsize 2D & 3D slider
so it reads like this
// $avia_config['imgSize']['full'] = array('width'=>940, 'height'=>390); // big images for fullsize pages and fullsize 2D & 3D slider
Save/upload your changes then go back to Layout & Styling to upload your image. Make sure you select “Full size” before clicking the Use Image button.
MyaJune 14, 2012 at 7:22 pm #78560
Much appreciated Mya, using the workaround above didn’t do anything different for me but changing the dimensions in the functions file to the same resolution as my image seems to work, although I’d prefer a setting to set it to 100% to adjust for different screen sizes.
CraigJune 15, 2012 at 8:22 am #78562
Shoutbox does not offer a fullscreen background feature. The demo page uses a big background image: http://kriesi.at/themes/wp-content/plugins/avia_styleswitch/images/big_bg_dark.jpg and therefore it appears to be fullwidth (but actually it’s just a simple background image which coverseven high screen resolutions). You can use the background-size: cover css attribute which is supported by some css3 browsers only: http://www.css3.info/preview/background-size/
I have installed wp-backgrounds-lite. What content container id or class do I use to display this image http://www.islanddiver.eu/wp-content/uploads/2012/10/bubbles_underwater_theme-940×390.jpg
The original bubbles_underwater_theme.jpg is 1600×1200 but when I upload it through the Shoutbox theme backend (with the background image uploader) the full size resolution becomes 940×360. I would like to fade the edges and bottom of the original size bubbles_underwater_theme.jpg to a dark grey background color so I don’t have to tile it and it will fade nicely into the background color no matter the end users screen resolution.
What would be the best solution?October 25, 2012 at 6:25 am #78564
The content container id is #wrap_all. You can set the z-index of the content container to 5. The position of the content container must be set to relative. I’d set the z-index of the background layer to 2.October 26, 2012 at 2:36 pm #78565
What am I missing? I see the set background option for individual pages and posts, but not for the site as a whole. Do I need to set the background image in the css of #wrap_all?October 28, 2012 at 6:47 am #78566
Unfortunately that’s a limitation of the free lite version. You can upgrade to WP-Backgrounds II (which also offers a lot more features like KenBurns slider, video and youtube backgrounds, etc.) or you can use a free plugin from wordpress.org (eg http://wordpress.org/extend/plugins/better-backgrounds/ )November 2, 2012 at 1:18 am #78567
No need for a background plugin for a simple large background image behind the site content. You can use the following css
/* body background */
background-image:url(../images/your-large-background-image.jpg); /* use an image that fades to the solid background color for best results */
background-attachment:scroll; /*you can also use 'fixed' for a different effect */
The topic ‘Background image won't fill page.’ is closed to new replies.