HOW TO HIDE A FLOATING IMAGE ON MOBILE.

HOW TO HIDE A FLOATING IMAGE ON MOBILE.

I WILL CONSTANTLY BE UPDATING IT. 

SO, IF YOU HAVE QUESTIONS BE UNAFRAID TO ASK.

<style>

/* corner image! hidden on mobile */

.image {

/* PUT YOUR IMG URL IN THE PLACE WHERE MINE IS!  */

    background: url('https://i.ibb.co/ZMpTthM/75914377-6-C79-4-C22-B83-C-F82-BB373-A2-E6.jpg') no-repeat;

    background-size: 100%!important;

/* "absolute" keeps the image in place relative to your whole page instead of relative to the where on the screen you see it so it MOVES WHEN YOU SCROLL. */

    position: absolute;

/* LEFT AND TOP ARE SPECIFIC TO YOUR LAYOUT! Change these around to see how it moves. Lower "top" values will be closer to the top of your screen. If you want it on the right side, change "left" to "right". */

    left: 10px;

    top: 2550px;

/* the height and width of the image are SPECIFIC to the image you choose and how big you want it. when i change even just one of these values to "auto" the image disappears. UPDATE: CHANGING WIDTH AND HEIGHT AT THE BOTTOM*/

    height: 200px;

    width: 200px;

/* "z-index" makes sure it stays on top in terms of layers */

    z-index: 1000;

/* "opacity" is a value from 0-1 that determines how transparent the image is. "1" would be fully opaque. */

    opacity: .9;

}

/* THIS IS THE CODE THAT MAKES IT DISAPPEAR ON MOBILE! */

@media (max-width: 600px) {

.image{display:none;}

}

</style>

/* you don't edit this part, but it just places the image down. */

<div class="image"></div>

HERE IS THE CODE FOR 2 FLOATING IMAGES 

FOR IF YOU WANT TO INTERPRET IT TO HAVE MANY ON YOUR PAGE

<style>

.image {

    background: url('https://i.ibb.co/ZMpTthM/75914377-6-C79-4-C22-B83-C-F82-BB373-A2-E6.jpg') no-repeat;

    background-size: 100%!important;

    position: absolute;

    left: 10px;

    top: 2550px;

    height: 200px;

    width: 200px;

    z-index: 1000;

    opacity: .9;

}

.image2 {

    background: url('https://i.ibb.co/4gS3vX3/558-AE9-A1-DD17-40-F7-A772-41-D576-DA954-A.jpg') no-repeat;

    background-size: 100%!important;

    position: absolute;

    left: 10px;

    top: 2340px;

    height: 200px;

    width: 200px;

    z-index: 1000;

    opacity: .9;

}

@media (max-width: 600px) {

.image{display:none;}

.image2{display:none;}

}

</style>

<div class="image"></div>

<div class="image2"></div>

UPDATE: CHANGING HEIGHT AND WIDTH OF IMAGE ITSELF

.image8 {

    background: url('https://i.pinimg.com/564x/2b/6a/81/2b6a811d30f68049cd129389bbd972c6.jpg') no-repeat;

/* HERE is the reason why i couldn't change the image sizes! it was so clear and i missed it! if you want all of your images to be the same width and want to crop the height, change the "background-size" parameters to "cover, auto" (do the opposite if you want to do the opposite) and add the "background-position: center;" to be able to freely change width and height! */

    background-size: cover, auto;

    background-position: center;

    position: absolute;

    right: 50px;

    top: 1873px;

/* yay we can change these now !! */

    height: 150px;

    width: 200px;

    z-index: 1000;

    opacity: .9;

}

I HOPE THIS HELPS YOU, LAYOUT LUVERS !! <3

UNTIL NEXT TIME. 

- LEXI