Question

How to change image resolution using jQuery.I have applied a image on body background using css/php. Now I want to apply screen height and width to the image, so image displays in full windows.
Actuly i haven’t use repeat style.

Used Code Is:

 <style type="text/css">
                    <?php
                            global $post;   
                            if ( has_post_thumbnail($post->ID) ) { 
                                    $image_id = get_post_thumbnail_id($post->ID);
                                    $bg_src = wp_get_attachment_image_src( $image_id, 'full');
                            ?>
                        body { background: #000000 url("<?php echo $bg_src[0]; ?>") no-repeat center top fixed !important; }
                            <?php } else { ?> 
                        body { background: #000000 url("<?php bloginfo('template_directory') ?>/img/bg_img.jpg") no-repeat center top fixed ; }
                            <?php } ?>
        </style>       

I get the screen height and width using this we not able to understand what to implement it on that Image.

var p_browserHeight= screen.height;
        var p_browserWidth= screen.width;
        jQuery('body.archive').css('height',p_browserHeight+'px' );
        jQuery('body.archive').css('width',p_browserWidth+'px' );

Answer 1

You can add this html just after your body tag:

<img src='img/bg_img.jpg' style='display:none;' id='image_hidden'/>

And get the with/height of this image with jquery