Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #13279

    Hi guys,

    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?

    Thanks,

    C

    #78556

    Hi cadunbar,

    Can you post a link to the demo you referring to? To my knowledge Shoutbox doesn’t offer a full screen backgrounds feature.

    Regards,

    Mya

    #78557
    #78558

    Hi Craig,

    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.

    Regards,

    Mya

    #78559

    Hi Craig,

    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.

    Regards,

    Mya

    #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.

    Cheers,

    Craig

    #78562

    Shoutbox does not offer a fullscreen background feature. The demo page uses a big background image: http://www.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/

    If you want to display a fullscreen image on all browsers you need to use javascript solutions (like my plugin: http://wordpress.org/extend/plugins/wp-backgrounds-lite/ )

    #78563

    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?

    #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.

    #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?

    #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/ )

    #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 */
    html, body{
    background-image:url(../images/your-large-background-image.jpg); /* use an image that fades to the solid background color for best results */
    background-position:top center;
    background-repeat:no-repeat;
    background-attachment:scroll; /*you can also use 'fixed' for a different effect */
    background-color: #111f2c;
    }

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Background image won't fill page.’ is closed to new replies.