Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #243200

    Hi Kriesi,

    I was just wondering if it would be possible to have the background image set to be full screen?
    Meaning: the background image is like 4368 × 2912 and 3MB. If I use the center center option in the styles tab, it is zoomed 100%.
    But I need the background image to be shrinked so it is screen filling.

    Any help on this one?
    I believe some css code needs to be added to the backgroundimage lik “max-width” or so?

    Thanks in advance!

    #243258

    Hi Aerdvark!

    The only way I know of to do that would be to use the cover value: http://css-tricks.com/perfect-full-page-background-image/

    Just take note of what browsers it does and does not support.

    Cheers!
    Devin

    #244247

    Hi Devin,

    This most certainly looks like what I am after for.
    Css trick# 2 is what is working best for me.
    But how do you implement this code?

    I mean, the best way would be to go into the theme options, style tab, and use custom css.
    But How to do it?

    The php file contains:
    <div class=”bg_container” style=”background-image:url(‘http://www.mysite.nl/wp-content/uploads/2011/12/myfile-300×200.jpg’);”></div>

    Can you help me out?
    Or give me a hint? I have no site up and running yet to show you, I am just precticing :-)

    Thanks again!

    #244331

    Hi!

    If you’re going with css trick #2, you can start by editing header.php. Find this code on line 126:

    <body id="top" <?php body_class($style." ".$avia_config['font_stack']); ?>>
    

    Add the background html code below, replace the image source with the image that you want to use:

    <div id="avia-bg">
      <img src="images/bg.jpg" alt="">
    </div>

    Add this on Quick CSS or custom.css:

    #avia-bg {
      position: fixed; 
      top: -50%; 
      left: -50%; 
      width: 200%; 
      height: 200%;
    }
    
    #avia-bg img {
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      margin: auto; 
      min-width: 50%;
      min-height: 50%;
    }

    You can also use this plugin: http://wordpress.org/plugins/wp-backgrounds-lite/

    Cheers!
    Ismael

    #245309

    Ismael, thanks this plugin seems to be working for me. I will have a try with it!

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

The topic ‘Making the background image responisive / full stretched’ is closed to new replies.