Add Photo Overlays to Layout

small tut to add photo overlays to your layout!

reminder: this adds photos OVER your layout, meaning that any buttons that happen to be under the photo will be unclickable and any text unreadable.

css code:

<div class="PHOTO_NAME"></div>

<style>

.PHOTO_NAME {

background: url(DIRECT_PHOTO_LINK) no-repeat;

background-size: 100%!important;

position: fixed;

\\fixed = your photo will move with you while you scroll & absolute = your photo will not move while you scroll and will stay in place

left: NUMBER_HEREpx;

\\if you want your photo to be on the right, change left to right. The photo starts at the left/right, then as you increase the number, it gets closer to the center 

bottom: NUMBER_HEREpx;

\\how high or low you want your photo to be. starts at the bottom, and as you increase the number, it goes up

height: NUMBER_HEREpx;

width: NUMBER_HEREpx;

\\height = how tall you want your photo to be & width = how wide you want your photo to be

z-index: 1000;

}

</style>

css photo filters and stuff:

still want to make your text underneath readable? lower the opacity!

add the following css code to the main code:

opacity:NUMBER_HERE%;

\\opacity starts at 100%, as you lower the number, the photo gets more see-through

wanna add a shadow to your photo? add a drop-shadow!

add the following css code to the main code:

filter: drop-shadow(1px 2px 3px COLOR_NAME/HEX);

\\first px = how far away you want the shadow to be - second px = how low or high you want the shadow to be - third hex = how blurry you want the shadow to be

wanna make your photo blurry?

add the following css code to the main code:

filter: blur(var(--value, 0.1rem));

\\the 0.1 can be replaced with any value. it determines how blurry your photo is gonna be, the higher the number goes, the more blurry it will be.

wanna change the colors of your photo?

add the following css code of your choice to the main code:

filter: saturate(NUMBER_HERE);

\\saturates your photo, making colors brighter

filter: hue-rotate(NUMBER_HEREdeg);

\\changes the hues of your photo

filter: invert(NUMBER_HERE);

\\inverts the colors of your photo

filter: brightness(NUMBER_HERE%);

\\makes the colors of your photo lighter

hope this helps! if you have any questions, ill try to help in the comments 💙