I'm currently working on enhancing my website BJBGaming1.com, and I've encountered an issue with setting a background. Here's the code snippet I have:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet"
href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
</head>
<body>
Upon inspecting the code further, you'll notice that in the css/main.css file, I've added the following styles:
html {
min-height:100%;
min-width:100%;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
body {
background-image:url('../img/background.png');
background-repeat:no-repeat;
background-size:cover;
}
The issue arises when trying to display the background image named 'background.png'. It is located one folder back and inside the img folder, so theoretically the path ../img/background.png should work, but unfortunately, the background still does not show up. Any assistance would be greatly appreciated.