Can you help with changing image resolution using jQuery? I have a background image applied to the body using CSS/PHP. My goal is to make the image fill the entire window by applying the screen height and width, without using repeat style.
The code I am currently using:
<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 am able to obtain the screen height and width but struggling with how to implement it on the image. Can you provide guidance?
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' );