Básicamente, puedes usar estilos CSS
para conseguir una imagen de fondo, así:
.cabecera {
background-image: url('https://picsum.photos/1600/100');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
text-align: center;
}
<!DOCTYPE HTML>
<html lang="es">
<head>
<title> Community of Cheats | Free Cheats and Injectors. </title>
<!--Titulo de la box de arriba-->
<meta charset="UTF-8">
<link rel="stylesheet" href="css/estilos.css">
<meta name="description" content="We offer the best free cheats out there. On our site you will find all free cheats checked by our team. Be a member.">
<!--Titulo que aparece en la descripcion en la busqueda de la pagina-->
</head>
<body>
<title>Imagenes de fondo</title>
<div class="image-fondo cabecera">
<h1>
Community of Cheats | Free Cheats and Injectors
</h1>
<!--Titulo en la web-->
</div>
</body>
</html>
En la propiedad background-image: url('https://picsum.photos/1600/100');
pones la ruta de tu imagen.
También puedes centrar el texto desde el CSS
y evitar los estilos en línea text-align: center;
. Fíjate que no es necesario usar una etiqueta <p>
para lograrlo.
El código CSS
lo puedes tener:
- Como atributo en cada elemento del DOM (no recomendado)
<div style="background-image: url('https://picsum.photos/1600/100');"></div>
- Dentro de las etiquetas
<head></head>
, entre etiquetas <style></style>
<head>
<style>
.cabecera {
background-image: url('https://picsum.photos/1600/100');
}
</style>
</head>
<div class="cabecera">...</div>
- En una hoja de estilos independiente de tu
HTML
y lo puedes vincular con la etiqueta link
(recomendado), tal como lo tienes aquí:
<link rel="stylesheet" href="css/estilos.css">
PD: No debes hacer varias preguntas en una ya que va en contra de las normas de la comunidad. Sigue las recomendaciones que te han dejado en los comentarios. Cuando edites tu pregunta, déjame un comentario para descartar mi voto de cierre.
image-fondo
y explica más detalladamente tú problema, y luego lo que deseas lograr.