***Saiba como tratar imagem

Como colocar espaço entre imagens em HTML?

Como fazer imagem rolar para baixo com css?

Leia mais sobre: Animação css rolar imagem

Para isso é usado animation e keyframe como no exemplo:

Animation e keyframe são propriedades css usadas em animações.

Segue abaixo o código com o exemplo solicitado na questão:

<div class="body">
<style rel="stylesheet" scoped="scoped" type="text/css">.body{
background: #ddd; /*Fundo no tom de cinza claro.*/
background-image: url("./confetes-tech.png"); /*Chamada das imagens de confetes.*/
background-repeat: repeat-y;/*Define que a imagem irá repetir no eixo y, ou seja na vertical.*/
height: auto;/*Define o tamanho da altura usada em auto.*/
left: 0;/*Define a posição horizontal da página começando do primeiro pixel.*/
position: absolute;/*Define a orientação da página, ficando fixa.*/
top: 0;/*Define o início da página na parte superior,*/
width: 100%;/*Define a largura da página para ser aproveitada toda.*/
/*Aqui é definida a animação para rodar em 4 segundos em linha reta sem parar.*/
animation: snow 4s linear infinite;
/*Abaixo é feita a mesma configuração de animação para diferentes prefixos de navegadores.*/
-webkit-animation: snow 4s linear infinite;
-moz-animation: snow 4s linear infinite;
-ms-animation: snow 4s linear infinite;
}
/*Aqui são definidas as posições da imagem.*/ @keyframes snow {
    /*Primeiro a posição zero da imagem.*/
    0% {background-position: center 0%, center 0%, center 0%;}
    /*Depois a posição final.*/
    100% {background-position: center 1120px, center 1120px, center 1120px;}
}
/*Abaixo é feita a mesma configuração de keyfranes para diferentes prefixos de navegadores.*/
@-moz-keyframes snow {
    0% {background-position: center 0%, center 0%, center 0%;}
    100% {background-position: center 1120px, center 1120px, center 1120px;}
}
@-webkit-keyframes snow {
    0% {background-position: center 0%, center 0%, center 0%;}
    100% {background-position: center 1120px, center 1120px, center 1120px;}
}
@-ms-keyframes snow {
    0% {background-position: center 0%, center 0%, center 0%;}
    100% {background-position: center 1120px, center 1120px, center 1120px;}
}
</style>
<div class="container">
<style rel="stylesheet" scoped="scoped" type="text/css">
.container{
      /*Abaixo é definido o tamanho da tela.*/
      max-width: 600px;
      max-height: 800px;
      width: 600px;
      height: 800px;
      margin: 0 auto;
    }
</style>

</div>
</div>

Ficando igual o exemplo abaixo:

Neste exemplo a imagem vai da posição 0% a 100%, mas poderia ser colocada outras posições como 50% ou 70%. Também poderia ser feito por medida exata em pixels.

No exemplo a imagem vai da posição 0% até a 100% em 4 segundos. Sendo que a última posição a imagem estará em uma altura de 1120px.

Leia mais sobre: Animação css rolar imagem

Como aplicar filtro com CSS ao passar mouse na imagem?

Como retirar contorno azul em link de imagens?

Leia mais sobre: Retirar contorno azul de imagem

Basta usar css no link em todos os estados.

Exemplo:

img a:active, a:selected, a:visited {
border: none;
outline: none;
}

Esse contorno é colocado por padrão pelo Chrome.

Com esse css é declarado como sem borda e sem contorno.

Leia mais sobre: Retirar contorno azul de imagem

Como carregar uma imagem diferente cada vez que abrir o site?

Leia mais sobre: mudar imagem ao carregar site

Pode ser usado os segundos do PHP para controlar a troca aleatória da imagem de background do CSS.

Pode conferir o efeito recarregando a página.

Além do que já foi mencionado uso if e else para fazer a troca.

ficando algo como:

<?php
          $segundos = date('s')%10;
          if($segundos < 3){
            $imagem = 'php';
          }elseif($segundos >= 3 and $segundos < 5) {
            $imagem = 'css';
          }elseif($segundos >= 5 and $segundos < 8) {
            $imagem = 'html';
          }else{
            $imagem = 'javascript';
          }
?>

No caso é registrado o resto da divisão dos segundos por dez para facilitar o if e deixar a troca da imagem mais rápida.

Também poderia ser usado um array para recuperar a imagem ficando assim:

$arrayImagem = array("php", "css", "javascript", "html", "python", "asp", ".dotnet", "java", "ruby", "perl");
$imagem = $arrayImagem[$segundos];

Se fossem menos de 5 imagens no projeto usaria o if direto, umas 10 o array, agora se tivessem mais, buscaria no banco de dados elas.

Como recuperar dados do banco com PHP?

Para o css é usado algo como:

</style>

Leia mais sobre: mudar imagem ao carregar site

Como deixar uma imagem responsiva com bootstrap?

Leia mais sobre: imagem responsiva bootstrap

Basta usar a classe do bootstrap img-responsive ou img-fluid.

A principal diferença entre o img-responsive e o img-fluid é a versão do bootstrap. Até o 3 se usava o img-responsive e depois do 4 o img-fluid.

Uma imagem responsiva serve para se adaptar a largura independente do tamanho da tela ou do navegador. Se adapta desde uma tela de desktop até um smartphone. Veja aqui o que é responsividade.

A classe img-responsive modifica a largura máxima e a altura da imagem adaptando o leiaute para a tela ou elemento pai. Para acompanhar o elemento pai ela usa width: 100% e height: auto.

Por exemplo:

Essa classe é padrão do framework, mas pode ser complementada com outras ou estilos próprios de CSS. Por exemplo para usar a imagem menor que o elemento pai para dividir por texto pode usar o width: 40%, ou para centralizar a imagem use a classe .center-block.

Por padrão a imagem irá ficar limitada ao elemento em que está contida. No caso se tiver usando um grade com col-md-6 a imagem irá ocupar apenas metade do elemento col-md-12.

Entenda melhor isso em como usar as grides do bootstrap.

Veja mais em:

Como tratar imagens com bootstrap?

Como fazer imagens com cantos arredondados no bootstrap?

Como usar miniaturas de imagens (thumbnails) no bootstrap?