Fullscreen image with border that shrinks depending by device resolution

Question

Hello everybody I want to make a homepage with a fullscreen image on the background with a border all around.

I have been able to do it as you can see from this jsfiddle

but I would like that the border shrinks when the resolution is smaller or desappear on resolution is smaller than 979px.

I use this script to make the border:

    <script>
$theBorder=35; //border around image (change top and left values of #bg accordingly)
$bg=$("#bg");

$bgimg=$("#bg #bgimg");

$preloader=$("#preloader");
//]]> 

$(window).load(function() {
    FullScreenBackground($bgimg,$bg);

    $(window).resize(function() {
        FullScreenBackground($bgimg,$bg);
    });
});

$bgimg.load(function() {
    var $this=$(this);
    FullScreenBackground($this,$bg);
    $preloader.fadeOut("fast");
    $this.delay(200).fadeIn("slow");
});

function FullScreenBackground(theItem,theContainer){
    var winWidth=$(window).width();
    var winHeight=$(window).height();
    var imageWidth=$(theItem).width();
    var imageHeight=$(theItem).height();
    var picHeight = imageHeight / imageWidth;
    var picWidth = imageWidth / imageHeight;
    if ((winHeight / winWidth) < picHeight) {
        $(theItem).css("width",winWidth);
        $(theItem).css("height",picHeight*winWidth);
    } else {
        $(theItem).css("height",winHeight);
        $(theItem).css("width",picWidth*winHeight);
    };
    $(theContainer).css("width",winWidth-($theBorder*2));
    $(theContainer).css("height",winHeight-($theBorder*2));
    $(theItem).css("margin-left",(winWidth- $(theItem).width())/2);
    $(theItem).css("margin-top",(winHeight- $(theItem).height())/2);
}
</script>

Thank you for your help!

what do you mean by _resolution smaller than 979px_ - width or height or both? — Axel Amthor, Jan 26 '16 at 18:59

score 1 · Answer 1 · answered Jan 26 '16 at 19:12

hope this will help to you.try this

    <html>
    <head>
    <title>Welcome !</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
    <style type="text/css">
      body{
        margin:0;
        padding: 0;
      }
    
      .maindiv{
        width: 100%;
        height: 100%;
        background-color:black;
        position: absolute;
        background-image: url(http://3.bp.blogspot.com/-dwPiL6_mLUo/UzPrdohyk0I/AAAAAAAADds/LNvY6Hyp4Tc/s1600/Programmer+HD+Wallpaper+by+PCbots.png);
        background-position: center;
        display: none;
    
    
      }
    
    </style>
    
    
     <body>
    
    <div class="maindiv"></div> 
    
    <script type="text/javascript">
      $(document).ready(function(){
        $(".maindiv").fadeIn(4000)
      });
    
    </script>
    
     </body>
    </html>

Note if you want to put a responsive image without using bootstrap, set it as div background-image with width and height in % value.or

give your div

width:anyvalue%;
height:anyvalue%;

then put your image inside this div and for your image,set

 width:100%;
 height:100%;

Guig · Accepted Answer · 2016-01-27T18:32:29.033

0

What about responsive css?

Something like

<div id="mainimage">
    <div class="img"></div>
</div>

and the css:

body{
  margin:0;
  padding:0;
  background:#fff;
}

#mainimage {
  box-sizing: border-box;
  width: 100%;
  height: 300px;
  padding: 20px;
}

@media(max-width: 1300px) {
  #mainimage{
    padding: 10px;
  }
}
@media(max-width: 979px) {
  #mainimage{
    padding: 0px;
  }
}
.img{
  height:100%;
  width: 100%;
  background: url(http://www.piedicosta.com/jnuovo/images/big.jpg) no-repeat center center; 
  background-size: cover;
}

You can add transitions to make the change smoother, something like

#mainimage {
  -webkit-transition: all 0.50s ease-in-out;
  -moz-transition: all 0.50s ease-in-out;
  -ms-transition: all 0.50s ease-in-out;
  -o-transition: all 0.50s ease-in-out;
}

edited Jan 27 '16 at 18:32

answered Jan 26 '16 at 19:19

Guig

9,891
7
64
126

Hello Guig and thank you for your kind help! It works like I want but I need this on a background image and not directly on an image... Because I need to add some content (Like menu, etc...) on the image.... Do you think it is possible? Thanks a lot! – FBracci Jan 27 '16 at 09:32
I edited the response. I usually prefers using ` and z-index for background things because I've found the background properties to be confusing (here you have to add the background property before the background size one (http://stackoverflow.com/questions/11811203/background-size-cover-suddenly-stopped-working-in-google-chrome) else cover doesn't work...) – Guig Jan 27 '16 at 18:36
1

Hello Guig, thank you for your kind reply! I need to add the image as a background for 2 reasons: - I manage the background as a module on Joomla. - I can replace the background with another module that manage an image slider Anyway it seems it is working... Thanks a lot for your kind help that has been crucial! – FBracci Jan 28 '16 at 07:39
Glad it helped! If you find my (or anyone else) post as a good response to your problem, it would be nice to accept it the correct answer and give it some upvote so that future readers can easily know where to look – Guig Jan 28 '16 at 17:13

Fullscreen image with border that shrinks depending by device resolution

2 Answers2