Some cool HTML and CSS tricks

Make a background image fit on all devices

Sometimes your background image will not work on all devices, and will either repeat or be cut off, with this code you can make it fit on any devices.

body {
background: url("images/background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;
}

How to add downloaded fonts

You can add custom fonts to your website with this CSS code, just specify where it is in the src and then give it its font weight.

@font-face {
font-family: "Your font name";
src: url("font_folder/font_name.ttf") format("truetype");
font-weight: 200;
}

Add a custom cursor

This is how you add a custom mouse cursor, you can put this in any element you'd like a custom cursor for, or in body for it to apply to everything.

body {
cursor: url("cursor_folder_location/cursor_name.cur"), auto;
}

Add a video/audio element

This is how to add a audio element:

<audio controls>
<source src="music_folder/your_song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Here "controls" is a parameter that adds the play pause and volume buttons. Removing it will make the element invisible to the user. You can add other parameters like "loop" for the song to restart when it's over, or "autoplay" to load when the page is loaded (if the user permitted it).

The video element works in the same way but you can specify the width/height in the element itself or in your external css file:

<video controls width="500">
<source src="video_folder/video_name.mp4" type="video/mp4">
Your browser doesn't support embedded videos.
</video>