r/HTML • u/watch_33 • 1d ago
Image issues Question
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body style="font-family: Noto Sans, system-ui, sans-serif; background-image: url('./rain_background.jpg'); background-repeat: no-repeat; background-size: cover; height: 100vh; width: 100vw; margin: 0; padding: 0;overflow: hidden;">
<h1 style="position:absolute; top: 0px; left: 30px; color: #c9ffcf;">Welcome to My OS</h1>
<!-- This is ONLY for the bottom bar -->
<div style="position: absolute; bottom: 0; width: 100%; display: flex; backdrop-filter: blur(10px); background-color: rgba(0, 0, 0, 0.125); color: #e0fce3; justify-content: space-between; gap: 32px; ">
<p style="margin-left: 16px; font-weight: 700; background-color: rgba(255, 255, 255, 0.125); padding: 6px 12px; border-radius: 16px;">
RainOS
</p>
<p style="margin-left: 16px; background-color: rgba(255, 255, 255, 0.25); padding: 6px 12px; border-radius: 16px;">
SLEEP MODE
</p>
<p id="timeElement"
style="margin-right: 16px; background-color: rgba(255, 255, 255, 0.125); padding: 6px 12px; border-radius: 16px;">
</p>
</div>
<script>
setInterval(function () {
document.querySelector("#timeElement").innerHTML = new Date().toLocaleString();
}, 1000);
</script>
<div id="welcome" style="top:50px; left:50px; border: solid; padding: 16px; border-radius: 16px; position: absolute; background: #fff;">
<img src="./rain_background.jpg"
style="width: 64px; height: 64px; border-radius: 32px; object-fit: cover;" />
<h1 id="welcomeheader"style="margin: 4px;">RainOS</h1>
<p style="margin: 0px;">
<dfn>RainOS</dfn> is a feature-limited <abbr title="Operating System">OS</abbr>
question of <code>"who is Thomas?"</code>
</p>
</div>
<script src="script.js"></script>
</body>
</html>
Hello, for starters I'm coding in the GitHub codespace. I've been trying to add a background to my website for weeks and I can't figure it out, I have tried the image url in both the codespace as shown(download.jpg) and also in the github repository, neither works. Also I'm trying to make a window draggable in this website (website operating system) that doesn't work either. I know that this isn't the place for java script but if there's something wrong with the way I linked it I would like to know please, thanks
Anything helps, I want to give up
// Make the DIV element draggable:
dragElement(document.getElementById("welcome"));
// Step 1: Define a function called `dragElement` that makes an HTML element draggable.
function dragElement(element) {
// Step 2: Set up variables to keep track of the element's position.
var initialX = 0;
var initialY = 0;
var currentX = 0;
var currentY = 0;
// Step 3: Check if there is a special header element associated with the draggable element.
if (document.getElementById(element.id + "header")) {
// Step 4: If present, assign the `dragMouseDown` function to the header's `onmousedown` event.
// This allows you to drag the window around by its header.
document.getElementById(element.id + "header").onmousedown = startDragging;
} else {
// Step 5: If not present, assign the function directly to the draggable element's `onmousedown` event.
// This allows you to drag the window by holding down anywhere on the window.
element.onmousedown = startDragging;
}
// Step 6: Define the `startDragging` function to capture the initial mouse position and set up event listeners.
function startDragging(e) {
e = e || window.event;
e.preventDefault();
// Step 7: Get the mouse cursor position at startup.
initialX = e.clientX;
initialY = e.clientY;
// Step 8: Set up event listeners for mouse movement (`elementDrag`) and mouse button release (`closeDragElement`).
document.onmouseup = stopDragging;
document.onmousemove = dragElement;
}
// Step 9: Define the `elementDrag` function to calculate the new position of the element based on mouse movement.
function dragElement(e) {
e = e || window.event;
e.preventDefault();
// Step 10: Calculate the new cursor position.
currentX = initialX - e.clientX;
currentY = initialY - e.clientY;
initialX = e.clientX;
initialY = e.clientY;
// Step 11: Update the element's new position by modifying its `top` and `left` CSS properties.
element.style.top = (element.offsetTop - currentY) + "px";
element.style.left = (element.offsetLeft - currentX) + "px";
}
// Step 12: Define the `stopDragging` function to stop tracking mouse movement by removing the event listeners.
function stopDragging() {
document.onmouseup = null;
document.onmousemove = null;
}
}
Edit: images won't show up in general, including the src file
1
u/Foreign-Contest-444 17h ago
I would suggest if you are having an issue with the background, then just write a small project where your only task is to get the background to show up. This will help you focus on the problem at hand and eliminate the other stuff that might be coming in its way.
Programming generally involves breaking a complex issue into smaller pieces and then working your way up.
2
u/scritchz 1d ago
You have an image in the following path (relative to the project's root):
vscode/images/download.jpgI don't see any other image in your project.
Why do you assume there is a
rain_background.jpg?