Help!

[KLNewton]

Select Topic Area

Question

Body

Please help, I'm losing my mind. This seemed to load fine (mostly - background image refuses to load) through website upload, however desktop app upload is having issues and not giving me a link to view the site remotely. I've now deleted both repositories (again) with an idea to try again tomorrow/whenever I receive an answer :(

The main issue is no matter what I try, the background image will not load. I've been trying for over 2hrs, YouTube and other searches have been of no use. I've tried ./ ../ .. and it has always been .jpg not .JPG also no spelling errors for either link.

HTML:

<title>DOM Manipulation P1</title>

<!-- Project 1: Quote Generator-->

<div class="container">
        <div class="header">
            <h2>JavaScript Quote Generator</h2>
    </div>
    <div class="main-content">
        <div class="text-area">
            <span class="quote">"I do the very best I know how - the very best I can; and I mean to keep on doing so until the end."</span>
        </div>
        <div class="person">Abraham Lincoln</div>

        <div class="button-area">
            <button id="new-quote">New Quote</button>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="DOMproject1.js"></script>

CSS:
/* General Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    background: url(project-1.jpg)
    no-repeat center center/cover;
}

.container {
    width: 550px;
    height: 450px;
}

.header {
    font-size: 1.3rem;
    border: solid 2px #ffffff;
    color: #ffffff;
    background-color: #262626;
    padding: 5px;
    width: 80%;
    margin: 20px auto;
    border-radius: 5px;
}

.main-content {
    width: 100%;
    height: 300px;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 50px 40px;
    box-shadow: 0 0 10px;
}

.main-content .text-area {
    font-size: 1.5rem;
    line-height: 1.5;
}

.main-content .person {
font-size: 1.6rem;
color: red;
text-transform: uppercase;
margin-top: 20px;
}

.button-area button {
background-color: #262626;
color: #ffffff;
font-size: 1.3rem;
padding: 10px 15px;
margin-top: 20px;
border-radius: 5px;
}

.button-area button:active {
background-color: lightblue;
}

JavaScript:
// Variables

let btn = document.querySelector("#new-quote");
let quote = document.querySelector(".quote");
let person = document.querySelector(".person");

const quotes = [{
quote: "The best way to find yourself is to lose yourself in the service of others.",
person: Mahatma Gandhi
}, {
quote: "If you want to live a happy life, tie it to a goal, not to people or things.",
person: Albert Einstein
}, {
quote: "At his best, man is the noblest of all animals; separated from law and justice he is the worst.",
person: Aristotle
}, {
quote: "Your time is limited, so dont waste it living someone else's life.",
person: Steve Jobs
}, {
quote: "Tell me and I forget. Teach me and I remember. Involve me and I learn.",
person: Benjamin Franklin
}, {
quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough.",
person: Oprah Winfrey
}, {
quote: "It does not matter how slowly you go as long as you do not stop.",
person: Confucius
}, {
quote: "Our lives begin to end the day we become silent about things that matter.",
person: Martin Luther King, Jr.
}, {
quote: "Remember that not getting what you want is sometimes a wonderful stroke of luck.",
person: Dalai Lama
}, {
quote: "The journey of a thousand miles begins with one step.",
person: Lao Tzu
}, ];

btn.addEventListener("click", function(){

let random = Math.floor(Math.random() * quotes.length);

quote.innerText = quotes[random].quote;
person.innerText = quotes[random].person;

})

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[ThisIs-Developer]

It seems your background image isn’t loading. Check these:

1. File Path: Ensure the path in background: url('project-1.jpg') is correct relative to your CSS file.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    background: url(project-1.jpg) no-repeat center center/cover;
}

2. Case Sensitivity: Verify the file name project-1.jpg matches exactly, including case.
3. Network Requests: Use browser DevTools to check if the image request fails.
4. Cache: Clear your browser cache or try in incognito mode.

If helpful, please mark as an answer! 😴

[landsman]

@KLNewton How is this related to GitHub repositories? Please find a better place to ask for help with your code. Plus - I would write the subject of the topic better, not general "help" that's annoying. Imagine that everyone will be doing it like that.

The best help for you is to try ChatGPT.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬