Menu icon Foundation
inline style change by screen size

my 'background-image' is an in-line style with a random image from a directory of images.

1. Is it possible to change the inline style based on screen size?

2. Or is there another way to make this work:
medium to large: background image has a logo burned into the image
small: there is no logo in the image.

in-linestylevisibility

my 'background-image' is an in-line style with a random image from a directory of images.

1. Is it possible to change the inline style based on screen size?

2. Or is there another way to make this work:
medium to large: background image has a logo burned into the image
small: there is no logo in the image.

rivet almost 5 years ago

solved: just js to capture the beakpoints:

 <script>
jQuery(document).ready(function() {
  // check width on resize
  jQuery(window).resize(function() {
    var windowwidth = jQuery( window ).width(); 
    var ems = windowwidth / parseFloat(jQuery("body").css("font-size")); //alert( ems );

    if( ems < 40.063 ){
      var bkimg = '<?php echo $small;?>';
    }else{
      var bkimg = '<?php echo $large;?>';
    }

    jQuery('#bkimg').css('background-image', 'url(' + bkimg + ')');

  });

  // check width on load
  jQuery(document).ready(function(){
    var windowwidth = jQuery( window ).width(); 
    var ems = windowwidth / parseFloat(jQuery("body").css("font-size")); //alert( ems );

    if( ems < 40.063 ){
      var bkimg = '<?php echo $small;?>';
    }else{
      var bkimg = '<?php echo $large;?>';
    }
    jQuery('#bkimg').css('background-image', 'url(' + bkimg + ')');

  });


});
</script>

Rafi Benkual almost 5 years ago

Thanks for posting your solution.