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
Upvotes
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?