Change Background Image in Body

Change body background image with css

You should give it a class with that specific background, if you only want the hover on lets say your startpage.

body {
  background-image: url("MakeHappy.jpg");
  background-repeat: no-repeat;
  background-position: 200px 60px;
  background-size: 900px;
  background-color: black;
}

.startpage-background:hover{
  background-image: url("MakeHappy2.jpg");
}

but your first html has errors, you shouldn't declare a div outside the body

Not valid html

<head>
  <link rel="stylesheet" href="MakeHappy.css" />
</head>
<div id="wink" class="imageSwap">
</div>
<body>
</body>

But in general your html and css has not good practises and inconsistent code. I never use id to style a element, only classes. Also keep your classes and ids lowercase like some-class instead of SomeClass. Also I think you can avoid to absolute position your navigation elements.

Changing a background image of body (in CSS) depending on the season (Current Calendar Month)

I suggest you to use class injection into the <html> tag. Javascript code will inject whatever class you want (depending on location (winter vs summer) or local time (day vs night)). And your css will have the backgrounds (or any other differences accordingly.

CSS:

.spring {background-image: url("springTree.jpg");}
.summer {background-image: url("summerTree.jpg");}
...

You can also have other differences:

.spring li a {color: green}
.winter li a {color: white}

You can set the class from javascript like this:

var html = document.getElementsByTagName('html')[0];
html.setAttribute('class', 'spring');

Or if you want multiple classes inject (add) the one you need:

root.classList.add('evening');

With your conditions:

var d = new Date();
var month = d.getMonth() + 1;
var html = document.getElementsByTagName('html')[0];
if (month >= 3 && month <= 5) {
    root.classList.add('spring');
} else if (month >= 6 && month <= 8) {
    root.classList.add('summer');
} else if (month >= 9 && month <= 11) {
    root.classList.add('autumn');
} else(month == 12 || month <= 2) {
    root.classList.add('winter');
}

Change the background image property of body depending on which ID and class is active

I came up with a workaround for this. Here's what I did:
1) I set the overall background color to #000, removed the original bg-image altogether, and actually restored a full-screen video I'd previously hid
2) I edited each nav menu item to have a hidevid class, except for the Home link, which I made showvid
3) I created CSS for each "page" ID (ie #about {background-image: url(image);}
4) I created a new CSS class: .hidethis {display: none;}
5) I then implemented the following jquery:

$(document).ready(function(){
$(".hidevid").click(function(){
    $("video").addClass("hidethis");
});
$(".showvid").click(function(){
    $("video").removeClass("hidethis");
});
});

What this does is set the background to black, but that's not seen on the landing ("home") page, just the video. However, clicking a nav menu item will "slide" the next "page" into view, displaying its background image and changing the video to have a display: none property, basically hiding it and the extra content (the nav) just has a black background behind it.

change background image in body

If you have JQuery loaded already, you can just do this:

$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');

EDIT:

First load JQuery in the head tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Then call the Javascript to change the background image when something happens on the page, like when it finishes loading:

<script type="text/javascript">
    $(document).ready(function() {
        $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
    });
</script>

Setting body background-image inside useEffect

You need to import the image.

import React, { useEffect } from "react";
import "./styles.css";
import bg from "./clouds.png";

export default function App() {
  useEffect(() => {
    document.body.style.backgroundImage = `url('${bg}')`;
  }, []);
  return <div className="App"></div>;
}

check this out:
working example

putting a different background image on a different page in a website

Option 1

This option, which uses a CSS custom property, allows you keep things structured as is. You would override the custom property (set in your root, shared CSS file) each individual page, within your <style> block.

root.css

:root {
  /* Define this in your global CSS */
  --bg-url: './static/images/golden_gate_bridge.jpg';
}

body {
  background-image: url(var(--bg-url);
}

Now, whenever you update --bg-url, you update the background dynamically.

search_results.html

<style>
  /* Override default background image */
  body {
    --bg-url: './static/images/search_results_img.jpg';
  }
</style>

And again for other_page.html:

<style>
  /* Override default background image */
  body {
    --bg-url: './static/images/other_page_img.jpg';
  }
</style>

Option 2

Somewhere in your layout, you're including a body tag. I would include the page name there and style the backgrounds from a global file.

<body class="home">…</body>

And:

<body class="search-results">…</body>

Then, adjust your CSS accordingly:

/* base */
body {
  background-size: cover;
  background-repeat: no-repeat;   
}

.home {
  background-image: url(./static/images/golden_gate_bridge.jpg);
}

.search-results {
  background-image: url(./static/images/search-image.jpg);
}

Setting a background image with a button in HTML/CSS

You can't do that without JavaScript

Unfortunately CSS styles can only be applied to the selected elements and their children, neighbors, and siblings. Since the body is a parent of your button, setting styles on the button itself has no effect on it. You have to give your button an event handler that sets the background of the body tag. The easiest way to do it would be

<button onclick="changeBackground();">Click me</button>

Then create the function that will handle the click

<script type="text/javascript">

    function changeBackground() {
        document.body.style.background = 'url(meme.jpg) no-repeat';
    }

</script>

Of course this is just the tip of the iceberg if you've yet to use JavaScript, there's a lot of material about it on the web.