minha imagem está duplicada como consertar? https://drive.google.com/file/d/1_uLSTbr6sluDRpT-HlN6ih7q4qFb1lCm/view?usp=sharing
ele ficou assim https://drive.google.com/file/d/1RXmQfeqFTBYdbRsezrvNhL-uasnzCnHO/view?usp=sharing duplicado como fasso para arrumar e além disso está faltando a parte de baixo da imagem !
Você pode adicionar a imagem diretamente aqui no GUJ!
Faltou mostrar o código, mas no css (Se for o caso), tente assim:
background: url("suaImagem") no-repeat
background-size: cover;
Da uma olhada nesse site ele ensina fazer várias coisas:
https://www.w3schools.com/cssref/css3_pr_background-size.asp
body {
background-image: url(“fundo.jpeg”);
}
.informacao {
margin: 40px 100px;
}
#desenvolvedor {
margin: 0 20px;
}
h1 {
padding: 40px 200px 80px;
font-size: 70px;
text-decoration: underline;
}
img {
position: absolute;
top: 0px;
left: 60px;
margin: 0px 0px 0px;
width: 650px;
}
Assim:
body {
background-image: url("fundo.jpeg");
background-repeat: no-repeat;
background-size: cover;
}bom até resolveu fera mais a pagina tem que ficar assim olha!https://drive.google.com/file/d/1vpNlxQlzEDmC2P-1eUP_icMFIzGrOzF7/view?usp=sharing
Aí que tá, creio eu que isso não seja uma imagem só, mas sim um total de três pelo menos, Marquei em pretos:
Sua imagem só tem 686x1289, logo não vai dá para ocupar toda a tela em dispositivos maiores, sem ser esticada ou se repetir!
A única ideia que eu tenho é colocar 3 imagem nos lugares que você quer, não sei se vai funcionar como você deseja!
biografia-Geovane
</head>
<body>
<header>
<div class="informacao">
Geovane Santana<br>
<div id="desenvolvedor"> desenvolvedor </div>
</div>
<h1>olá<img src="Geovane (1).png"></h1>
</header>
<main>
<p>Meu nome é Geovane, tenho 24 anos, estudo linguagem de programação e gosto muito de tecnologia em geral. Tenho conhecimento em html e css e estou estudando java script. Procuro estágio na área e será muito bom fazer parte da sua equipe.</p>
<p>Se quiser saber mais sobre meu trabalho ou bater um papo sem compromisso, entre em contato logo abaixo.</p>
<p>Obrigada!</p>
</main>
<footer>
</footer>
</body>
body {
background-image: url(“fundo.jpeg”);
background-repeat: no-repeat;
background-size: cover;
}
.informacao {
margin: 40px 100px;
}
#desenvolvedor {
margin: 0 20px;
}
h1 {
padding: 40px 200px 80px;
font-size: 70px;
text-decoration: underline;
}
img {
position: absolute;
top: 0px;
left: 200px;
margin: 100px 0px 0px;
width: 1000px;
background-size: 100px;
}
@geovane10, eu crie um exemplo melhor para você conseguir obter o resultado desejado!
Basicamente você vai precisar de 4 imagens:
- Uma para o Header;
- Uma para o circulo vermelho no canto;
- Uma para os três circulos azuis no centro;
- Uma para o circulo azul no canto direito.
Como eu não tinha essas imagem eu crie elas em svg, você pode pesquisar a respeito. Também usei um pouco de Bootstrap Click aqui para saber mais.
Segue a imagem de como ficou:
O arquivo compactado:
Download.zip (5,7,KB)