[SOLVED] Adding shape as background?

Adding shape as background?

So i have a uni project to deliver, where i first make my website template and then apply it to html. I have been trying to reach this result:

Prototype

However, not only does the backgroung layer not work, but i am also not sure of how to insert the triangle shape in the background.

Whenever i try to set the background image, i receive this: Error

For the background problem i have tried:

header { background-image: url(Livro.png); }

header { background-image: url(Imagens/Livro.png); }

header { background-image: url("Imagens/Livro.png"); }

As long as inserting the entire path to the image and none of them have worked.

As for the triangle shape, i have tried to insert it as an image, but it gets hidden behind the background (that i have set as background-color instead). I've also tried moving it up in the html file but to no avail.

The code i made for this: sad, i know part of the page is:

 <body>
        <!-------------- Cabeçalho --------------->

        <header>

            <!-------------- Cabeçalho do Menu --------------->
            <!--??(Sticky)??-->
        
            <div class="menu">
                <h3 class="contactos">Contactos</h3>
                <img class="logo" src="Imagens\Logotipo.png">
                <div class="icone-menu">
                    <div class="retangulo-longo"></div>
                    <div class="retangulo-curto"></div>
                    <div class="retangulo-longo"></div>
                </div>
            </div>


            
            <!-------------- Rosto da Página --------------->
        <div class="rosto">
            
            <img class="kudu" src="Imagens\Kudu.png">

            <div class="descricao">
                <h1>A LUZ E A ENERGIA</h1>
                <p class="legenda">A luz é um dos fatores ecológicos essenciais e de grande importância em todo o estudo dos ecossistemas, já que constitui a fonte principal de energia para os seres vivos. A luz visível faz parte do espectro que chega ao nosso planeta procedente do Sol. É um fator que regula a existência e os ciclos dos diversos organismos, exercendo ao mesmo tempo uma ação limitadora.
                </p>
            </div>

        </div>
        </header>

And the css is:

header {
    background-image: url(Imagens/Livro.png);
}

header h1 {
    grid-column: span 12;
}

header .text-block {
    grid-column: span 12;
}

header .text-block a {
    vertical-align: super;
}


/* ------------------------ Grelha ------------------------ */

.grelha {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
}


/* ------------------------ Cabeçalho do Menu ------------------------ */

.menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    width: 1300px;
    margin: auto;
}

.logo {
    height: 150px;
    width: 150px;
}

.icone-menu {
    position: sticky;
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4%;
}

.retangulo-longo {
    position: relative;
    width: 55px;
    height: 5px;
    background-color: black;
}
  
.retangulo-curto {
    position: relative;
    width: 30px;
    height: 5px;
    background-color: black;
}

.contactos {
    position: sticky;
    margin-top: 4%;
}


/* ------------------------ Rosto da Página ------------------------ */

.rosto {
    position: relative;
    height: 1000px;
    top: 80px;
}

.kudu {
    display: block;
    margin: auto;
    width: 55%;
}

.descricao {
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
    margin-top: 5%;
}

.legenda {
    width: 800px;
    text-align: center;
}

And this is what im trying to achieve: Prototype

Im not sure if i made myself clear, and i apologive if i didn't. Im still kinda new to html so any help would be appreciated!

Solution

When you are using url() the file should be in the same location as the css.
```
  folder
    style.css
    image.png
```
if triangle image is shown, but behind other objects. you can set this to triangle
```
  z-index: 1;
```

But what I recommend is using clip-path. this website may also help you.