Switch up the background image of the webpage using CSS styling

Currently, I am facing an issue with changing the background image on my webpage. The problem is that when I change the background image on one page, it also reflects on another page where I don't want the change to occur. Is assigning an id/class to the body element on the first page a viable solution to this problem (where I want the hover function)?

<!DOCTYPE Html>
<head>
  <meta charset="utf-8" />
  <title>MakeHappy, One good thought everyday!</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="randomMessages.js"></script>
  <link rel="stylesheet" href="MakeHappy.css" />
</head>
<div id="wink" class="imageSwap">
</div>
<body>
  <header>
    <nav>
      <ul>
        <a id="MakeHappy" href="Main.html">Make Happy</a>
        <a id="Contact" href="#">Contact us</a>
        <a id="Suscribe" href="#">Suscribe</a>
        <a id="Project" href="#">Project</a>
      </ul>
    </nav>
  </header>

</body>

\

<!DOCTYPE Html>
<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="randomMessages.js"></script>
  <title>MakeHappy, One good thought everyday!</title>
  <link rel="stylesheet" href="MakeHappy.css" />
</head>
<body class="Main">
  <input type="button" onclick="popup()" value="Click to be Happy!">
  <div  id="demo"></div>
</body>

\

body {
  background-image: url("MakeHappy.jpg");
  background-repeat: no-repeat;
  background-position: 200px 60px;
  background-size: 900px;
  background-color: black;
}
body:hover{
  background-image: url("MakeHappy2.jpg");
  background-position: 200px 60px;
}
.Main{
  background-size: 100px;
  background-position:top;
}
.imageSwap{
  position:absolute;
  color: yellow;
  padding: 150px;
  bottom: 130px;
  right: 500px
}
#MakeHappy{
  color: white;
  position: absolute;
  right: 660px;
}
#Contact{
  color: white;
  position: absolute;
  right: 660px;
  bottom: 10px;
  transform: rotate(180deg);
}
#Suscribe{
  color: white;
  position: absolute;
  left: 320px;
  bottom: 300px;
  transform: rotate(270deg);
}
#Project{
  color: white;
  position: absolute;
  right: 360px;
  bottom: 300px;
  transform: rotate(90deg);
}
.Main div{
  color: white;
  position: fixed;
}
input{
  position: fixed;
  bottom: 150px;
  left: 625px;
}

Answer №1

If you want the hover effect specifically on your startpage, give it a class with that specific background.

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");
}

However, your first HTML code has errors as you shouldn't declare a div outside the body.

It's not valid HTML

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

In general, your HTML and CSS practices are not good and the code is inconsistent. It's recommended to not use IDs to style elements, only classes. Also, keep your classes and IDs lowercase like some-class instead of SomeClass. Additionally, try to avoid absolute positioning for your navigation elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving a transparent background in WebGLRender: A guide

I've been experimenting with placing objects in front of CSS3DObjects using the THREE.NoBlending hack. However, in the latest revisions (tested on r65 and r66), I only see the black plane without the CSS3DObject. Here is a small example I created: in ...

Creating resizable rows of DIVs using jQuery

I'm currently developing a scheduling widget concept. The main idea is to create a row of DIVs for each day of the week. Every row consists of a set number of time periods represented by DIVs. My goal is to enable the resizing of each DIV by dragging ...

How to center a container in HTML using Bootstrap techniques

Here is the code I have been working on: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="span4 offset4 centered"> <div class="container overflow-hidden"> < ...

What is the method for creating an HTML table with a percentage-based width?

Is it possible to create a 4-column table with each column taking up 100% of the width? The idea is to have two cells in each column - one (cell A) occupying 15% of the width and the other cell (cell B) taking up the remaining space. However, there seems ...

Is Flex still wrapping elements even when set to nowrap?

My goal is to create a layout with 4 blocks, where the first section contains 2 blocks each occupying 50% of the width, followed by 2 other blocks in the next section. I am utilizing the flex property for this layout. I want the flex-container to take up ...

What is the best approach to determine the value of a textbox in an array for each row of

I am trying to display the total sum of values for each row in a data array. There are 5 rows of data, and I need to calculate the results for each one. Can someone assist me in solving this? function calculateTotalValue(){ var total = (document.get ...

Using createStyles in TypeScript to align content with justifyContent

Within my toolbar, I have two icons positioned on the left end. At the moment, I am applying this specific styling approach: const useStyles = makeStyles((theme: Theme) => createStyles({ root: { display: 'flex', }, appBar: ...

Can a jumbotron and navigation bar be permanently attached to the top of a screen?

Currently, I am in the process of constructing my website using Bootstrap and my goal is to ensure that the header and navigation bar remain fixed at the top of the page while the content below scrolls underneath. While I am aware that it is possible to fi ...

Guide to match the size of <td> with an <img>

I am currently attempting to align several images in my HTML using the <table> element. My goal is to eliminate any white space between the images. You can view my progress so far in this JSFiddle example: JSFiddle example. However, I am still encoun ...

Determination of Vertical Position in a Displayed Table

I am trying to incorporate infinite scrolling with an AJAX-based loader in the body of an HTML table. Here is a snippet of my HTML code: <table> <thead> <tr><th>Column</th></tr> </thead> <tbody> ...

Adapting Classes in Javascript Based on Screen Width: A Step-by-Step Guide

I'm dealing with two separate menus - one for mobile version and one for PC version. However, the mobile menu seems to be overlapping/blocking the PC menu. How can I resolve this issue? I've attempted various solutions such as removing the mobil ...

Adding space between Bootstrap columns to align them one below the other on small devices

https://i.sstatic.net/turhY.png Within this illustration, there are two columns - one with the class col-sm-3 and the other with col-sm-8, situated in a single row. Upon resizing the window (as shown in the screenshot provided), the two columns appear ...

Interconnected HTML div values impacting one another

Forgive me for the not-so-great title, as I am unsure of what this particular HTML coding method is called. That's why I am asking this question in the first place. I've written some code and I need to know what type of coding practice this is. ...

Incorporating header and footer elements into the design

I am facing an issue while editing a layout. Currently, when clicking on some side of the layout, a header and footer appear in a certain way. However, I would like to change this so that the header and footer appear differently, similar to the example s ...

Incorporate a new style into several previous slides using the Slick carousel feature

I'm attempting to utilize the Slick carousel to create a timeline. My goal is for the previous slides to remain colored as you progress through the timeline, and turn grey when you go back. I've tried using onAfterChange and onBeforeChange, but I ...

Masonry layout organizes images in a vertical stack, with one image per row

After implementing Masonry on my website, I encountered an issue where all the images stack vertically in a single row once the page loads. Instead, I would like them to stack both horizontally and vertically. You can view the problem on My Jsfiddle. This ...

How to create a custom CSS style to make Bootstrap 4 modal slide in from the bottom

Back in the days of Bootstrap 3, this was the trick: .modal.fade .modal-dialog { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } Another approach that could have been used: .modal.fade .modal-dialog { transfor ...

Inspecting element value on a website

On a marketplace website, I extracted the attribute (capacity_gold) from a table. Since the values are dynamic and constantly changing, I aim to develop a basic script that will notify me when the attribute value exceeds 100. The current value of the attr ...

Troubleshooting issue: Chrome bug causing JavaScript full height intro section to have incorrect padding and display issues

Trying to create a full-height intro section using basic JavaScript markup has been quite the challenge. Here's a more detailed explanation: I have a parent DIV element that is supposed to adjust to the full height of the viewport. Unfortunately, t ...

Lock GridView headers when only scrolling vertically

I am facing an issue with my gridview on an aspx page. The gridview is wider than the page itself, so I want the headers of the gridview to scroll horizontally along with the content, while remaining fixed vertically. Can anyone help me achieve this? I hav ...