Estoy intentando hacer una seccion de noticias. Lo que intento es que cada noticia con su respectivo titulo, cuerpo e imagen tenga su propio fondo de color. El problema es que me queda un espacio en blanco entre el titulo y el cuerpo y no sabría como ingresar la imagen al mismo fondo donde esta el titulo y cuerpo. No se como separar ambos codigos en stackoverflow, espero se entienda.
HTML
<h2 id="titulo_noticia1">Más del 21% de las especies de reptiles está en peligro de extinción</h2>
</p>
<p id="cuerpo_noticia1">
Una amplia investigación en la que se ha realizado la primera evaluación integral del riesgo de extinción de reptiles en la Lista Roja de Especies Amenazadas de la UICN ha encontrado que más de una de cada cinco especies (al menos el 21%) de reptiles del mundo corren el peligro de extinguirse.
Los investigadores han comprobado que las estrategias para proteger a mamíferos, aves y anfibios amenazados ofrecen más probabilidades de las esperadas para beneficiar también a muchos de los reptiles en peligro.
</p>
<p>
<img src="imagenes/noticia1.jpg" width="300" height="200" alt="Imagen de reptil" id="noticia1">
</p>
CSS
#titulo_noticia1{
font-family: 'Abel', sans-serif;
background-color: mediumpurple;
}
#cuerpo_noticia1{
font-family: 'M PLUS Rounded 1c', sans-serif;
background-color: mediumpurple;
}
#noticia1{
background-color: mediumpurple;
}
<>
).