***Saiba como tratar imagem

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 colocar espaço entre imagens em HTML?

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 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?

Leia mais sobre: imagem responsiva bootstrap

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 TRATAR IMAGEM

Conteúdo

Como fazer imagem rolar para baixo com css?

Como aplicar filtro com CSS ao passar mouse na imagem?

Como colocar espaço entre imagens em HTML?

Como retirar contorno azul em link de imagens?

Como deixar uma imagem responsiva com bootstrap?

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

Como colocar uma imagem em HTML?

Qual é a melhor plataforma para monetizar meu site em 2024, Adsterra ou Google AdSense?

Qual é o melhor livro para aprender sobre formação de hábitos, 'O Poder do Hábito' ou 'Hábitos Atômicos'?

Quais são os nichos mais lucrativos do YouTube em 2024?