0

I am trying to put bits.svg as my background. I want it to cover the entire background of the page, but it won't even show at all. when I click on the URL it works, so I don't understand why it will not show. I added my HTML as well now. Perhaps the SVG file is an issue? The full URL path is C:\Users\jacob\Desktop\oblig2\bilder\bits.svg and it did not change when I tried to use that. I am quite confident the URL itself works.

     h1 {
        font-size: xx-large;
     }

     main {
            display: inline-block;
            border: dashed 2px black;
            width: 1250px;
            height: 230px;
            background-color: white;
    }

    div.galleri img {
        height: 200px;
    }

    #cssimage:hover {
        background-color: yellow;
    }

    body {
        background-image: url("..\oblig2\bilder\bits.svg");
    }

    aside {
        background-color: pink;
        font-weight: bold;
    }

    #navfooter {
        background-color: lightblue;
    }


    <!DOCTYPE html>
<html>

<head>
    <title> Oblig 2 IBE102</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="C:\Users\jacob\Desktop\oblig2\stil.css" />
</head>

<body>

    <h1>Info om webutvikling</h1>
    <nav id="navfooter">Navigasjon</nav>
    <main>
        <section>
            <div class="galleri">
                <table>
                    <tr>
                        <td><img alt="htmlsvg" src="..\oblig2\bilder\html.svg"></td>
                        <td><a href="..\oblig2\innhold\css.html"> <img id="cssimage" alt="csshtml" src="..\oblig2\bilder\css.svg">
                            </a></td>
                    </tr>
                </table>
            </div>
        </section>
        <aside>Ingen anekdoter foreløpig.</aside>
    </main>

    <footer id="navfooter">
        <p>Nettstedet er drevet av meg. Jeg studerer her (klikk på bildet): <a href="https://www.himolde.no/">
                <img alt="HIM" src="..\oblig2\bilder\himolde-logo.jpg" width="20" height="15"> </a></p>
    </footer>

</body>

</html>
jacob starheim
  • 89
  • 5
  • 1
    Does this answer your question? [SVG background image not showing](https://stackoverflow.com/questions/41023616/svg-background-image-not-showing) – diiN__________ Sep 14 '21 at 12:21
  • We need to see a [mcve]. Please add your HTML to the question as well, and confirm the URL/file path is correct. – TylerH Sep 14 '21 at 13:28
  • 1
    Use relative paths for the background-image like : `../oblig2/bilder/bits.svg`. Use `/` instead of `\ ` for all of the relative paths in your HTML file as well – Pranav Rustagi Sep 14 '21 at 13:58
  • @PranavRustagi Thank you Pranav Rustagi! This worked, only issue is that when I tried to use relative path to link the CSS file in the HTML file, it did not work. When I changed it back to the absolute path, it worked. Do you know how to fix this? – jacob starheim Sep 14 '21 at 14:11
  • @jacobstarheim if relative path is not working ... you are providing the wrong path. Just correct that... It will work. – Pranav Rustagi Sep 15 '21 at 08:06

0 Answers0