Clever Geek Handbook

Full screen image on any screen

I tried to take a flibBook slideshow, but I can't get a full screen shot. I need an image to fill the screen with full width and height and not scroll while I try to do this with the image size that fits my screen, but not all screens, which are html code for my div.

<body>

<div id="flipbook">
    <div class="slide">
        <img src="images/1.jpg" alt="" /> 
    </div>
    <div class="slide">
        <img src="images/2.jpg" alt="" /> 
    </div>
    <div class="slide">
        <img src="images/3.jpg" alt="" /> 
    </div>
    <div class="slide">
        <img src="images/4.jpg" alt="" /> 
    </div>
</div>

</body>

If anyone knows how to make these images fill any screens without scrolling, please tell me

Css file:

body {
    margin: 0; 
    padding: 0;
    font-size: 62.5%;
    background: url('polaroid.png');
}


#flipbook {
    padding: 0px;
    margin: 0px auto;
    width: 100%;    
    height: 100%;
    background: #fff;   

}

#flipbook .slide {
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    left: 0;
}

#flipbook .slide .img {
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-size: 200% !important;
    background-repeat: no-repeat !important;
    -webkit-transition-property: -webkit-transform, box-shadow;
    -webkit-transition-timing-function: linear, linear;
    transition-property: transform, box-shadow;
    transition-timing-function: linear, linear;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#flipbook {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#flipbook .prev, #flipbook .next {
    z-index: 999999999;
    position: absolute;
    background: #;
    padding: 20px;
    color: #fff;
    top: 30%;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    font-size: 2em;
    cursor: pointer;
    background: transparent;
    -moz-box-sizing: border-box;
}

#flipbook .next {
    right: 0px;

}

#flipbook .prev {
    left: 0px;
}

#flipbook .prev:hover, #flipbook .next:hover {
    background: transparent;
}

#flipbook .prev:active {
}

#flipbook .next:active {
}

#flipbook .current {
    z-index: 99999;
}

#flipbook .slide .content {
    position: absolute;
    bottom: -75%;
    z-index: 99999999;
    background: rgba(0,0,0,0.3);
    width: 100%;
    left: 0;
    padding: 20px;
    font-size: 2.2em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#flipbook .slide .content a {
    color: #fff;
}

#flipbook .slide .slideup {
    bottom: 0;
    z-index: 99999999;
}

#pagination {
    position: absolute;
    bottom: 13px;
    right: 12px;
        margin-right:600px;

}

#pagination div {
    background: black;
    width: 16px;
    height: 16px;
    border-radius: 100px;
    float: left;
    cursor: pointer;
    margin: 0 5px 0 0;
}

#pagination .cur {
    background: #42cae8;
    box-shadow: inset 0 3px 7px rgba(0,0,0,0.2);
}

@media screen and (max-width: 1000px) {
    #flipbook {
        width: 100%;
        height: 200px;
        margin: 0;
    }   
    #flipbook .next, #flipbook .prev {
        right: 0;
        top: 0;
        width: 44px;
        height: 44px;
        padding: 10px;
    }

    #flipbook .prev {
        left: 0;
        right: auto;
    }
}

/* ------- IGNORE */

#header {
    width: 100%;
    margin: 0px auto;
}

#header #center {
    text-align: center;
}

#header h1 span {
    color: #000;
    display: block;
    font-size: 50px;
}

#header p {
    font-family: 'Georgia', serif;
}
#header h1 {
    color: #892dbf;
    font: bold 40px 'Bree Serif', serif;
}

#travel {
    padding: 10px;
    background: rgba(0,0,0,0.6);
    border-bottom: 2px solid rgba(0,0,0,0.2);
    font-variant: normal;
    text-decoration: none;
}

#travel a {
    font-family: 'Georgia', serif;
    text-decoration: none;
    border-bottom: 1px solid #f9f9f9;
    color: #f9f9f9;
    font-size: 1.6em;
}
+3


source to share


3 answers


Here is an article that suggests several methods.

This CSS-only method seems like the best option for this article:



.slide {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

.slide img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
+2


source


Use this add -webkit- -moz- -o- if you like



.slide{
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-image: url("...");
  -webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
+1


source


Update:
I found this question to be very similar to your question.

Another possible way to achieve your goal is to use JQuery Plugins:

These are the links to the plugin:

Supersized is a full-screen background slideshow created using the jQuery library.
BACKSTRETCH

and

You can also try this example using CSS

HTML:

<div class="with-bg-size" style="position:fixed; top:0px; left:0px; z-index:900; width:100%; overflow-y:hidden; overflow-x:hidden; margin:auto;"></div>

CSS

<style>
  body {height:100%; overflow-y:hidden;}

  .with-bg-size
  {
    background-image: url('PUT-URL-OF-IMAGE-HERE'); --> URL of image
    width: 100%; --> full width the image
    height: 100%; --> full height the image
    background-position: center; --> center the image
    background-size: cover; --> sets the image to fullscreen
    background-repeat:no-repeat; --> you could also add this for not repeating image effect
  }
</style>

JSFIDDLE work

0


source






More articles:


All Articles