adding multiple background images-CodePudding

ok, so I got an assignment to make a 3 page website using css and html, and we have to use external style sheets, naturally I want to make my stuff look nice, HOWEVER we are only aloud to use our one external sheet, so I was wondering if and or how I would be able to call upon different images to set them as backgrounds, because right now I only have my one background image, and I would like to be able to call upon a different image and set it to the background for each of the 3 pages -here is my style sheet I can also provide my html page though it is very bear bones and just references stuff from the style sheet, just let me know :)

body {
   font-family: Arial, Helvetica, sans-serif;
   font: sans-serif;
   background-image: url(back1.PNG);
   background-attachment: fixed;
   background-color: #403f42;
}

h1 {
   text-align: center;
   color: #0a0068;
   padding: 10px;
   border-color: #0a0068;
   border-style: ridge;
   border-width: 10px;
   margin: 1in;
   background-color: #5184d133;
   font-size: 50px;
}

h2 {
   text-align: center;
   background-color: #59696e71;
   padding: 10px;
   color: #0a0068;
   border-color: #473e93;
   border-style: solid;
   border-width: 5px;
   margin: .25in;
   font-size: 40px;
}

h3 {
   text-align: center;
   color: #007517;
   background-color: #62e47c5f;
   border-color: rgb(10, 151, 10);
   border-style: dashed;
   padding: 10px;
   border-width: 5px;
   font-size: 40px;
   margin: 2in;
}

h4 {
   text-align: center;
   color: #0092b0;
   background-color: #62e2ff5f;
   border-color: rgb(0, 217, 255);
   border-style: double;
   padding: 10px;
   border-width: 5px;
   font-size: 40px;
   margin: 2in;
}

h5 {
   text-align: center;
   color: #580707;
   background-color: #5c15155f;
   border-color: #580707;
   border-style: outset;
   padding: 10px;
   border-width: 5px;
   font-size: 40px;
   margin: 2in;
}

a:link {
   color: #bf00ff;
}

a:visited {
   color: #6d04a652;
}

a:hover {
   color: rgb(42, 1, 80);
}

h6 {
   font-family: Arial, Helvetica, sans-serif;
   font: sans-serif;
   background-image: url(armor.png);
   background-attachment: fixed;
   background-color: #403f42;
}


}

<html>

<link rel="stylesheet" href="style.css">


<head>


</head>

<body>
    <h1>
        <p>How to beat the ender dragon in Minecraft</p>
    </h1>
    <h2>
        <p>This will be a simple step by step guide for defeating the ender dragon!</p>
        <p>and yes, there will be pictures !</p>
    </h2>

</body>
<h3>
    <a href="page 2.html">Finding the End portal</a>
</h3>

<h4>
    <a href="page 3.html">Gearing Up</a>
</h4>

<h5>
    <a href="page 4.html">Combat</a>
</h5>

</html>

the website had to use a theme or a tutorial of some kind... that it is why it is a guide on minecraft

CodePudding user response：

I figured it out !

I had to id my bodies

so instead of just having body in my external file I needed to have another body in my css file so in my html I had to do

<body id="body2" >

and in the css file

body.body2 {
    font-family: Arial, Helvetica, sans-serif;
    font: sans-serif;
    background-image: url(end.PNG);
    background-attachment: fixed;
    background-color: #403f42;
}

all that it needed was identification,

CodePudding user response：

Something cool you can do is use CSS variables to manage your backgrounds a little easier. It doesn't solve your problem, but it seems like you've got it already.

:root {
  --background-1: (bck1.png);
  --background-2: (bck2.png);
  --background-3: (bck3.png);
}

#body1 {
  background: var(--background-1);
}

#body2 {
  background: var(--background-2);
}

#body3 {
  background: var(--background-3);
}