Image of website not having black background
I am building a website and would like one of the pages within the same HTML to have red as the body background, as I have found that it wraps around the whole image. I have placed clickable links to go into ISO pages which will have the background color black to blend the image with the wide size of a website ratio.
My issue is I can’t have multiple colors. If I set it to a color that color is final, thus the ISO pages will be red or black not alternating. I want the color to go behind every thing due to how I’ve styled the image to fit the screen.
I’ve tried setting a DIV to a specific style section to make the background color change however it doesn’t accomplish the same effect as setting the body to a background color. I could just make another HMTL file for that ISO photo, however I have a bunch of photos and thus this would be unnecessary. I’m expecting red on the P1 (I have more like it just without the ISO section) and black on the ISO pages covering the excess background behind the image.
<!DOCTYPE html>
<html>
<head>
<title>Stephanie Dahlberg Art Studio</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap");
body {
background-attachment: scroll;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
margin: 0;
}
.red-background {
background-color: rgb(100, 52, 52);
}
.black-background {
background-color: black; /* Change the background color */
}
.image-frame {
position: relative;
max-width: 100%;
max-height: 100%; /* Adjust height to make space for buttons */
text-align: center;
flex: 1; /* Allow image frame to take available space */
display: flex;
justify-content: center;
align-items: center;
}
.image-frame img {
max-width: 100%;
max-height: 100%;
}
.section {
display: none; /* Hide all sections by default */
}
.section.active {
display: flex; /* Show the active section */
}
.nav-buttons {
position: absolute;
bottom: 10px; /* Position at the bottom of the image */
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.nav-buttons button {
background: none;
border: none;
margin: 10px;
font-size: 35px;
color: white;
cursor: pointer;
font-family: 'Patrick Hand', cursive; /* Apply the crayon-like font */
}
.nav-buttons button:hover {
color: rgb(200, 100, 100);
}
.nav-buttons button:focus {
outline: none; /* Remove default outline */
}
</style>
<script>
function showSection(sectionId) {
// Hide all sections
const sections = document.querySelectorAll('.section');
sections.forEach(section => {
section.classList.remove('active');
});
// Show the selected section
const sectionToShow = document.getElementById(sectionId);
sectionToShow.classList.add('active');
scrollToTop();
}
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
function goToHome() {
window.location.href = 'home.html';
}
function goToPaintings() {
window.location.href = 'paintings.html';
}
document.addEventListener('DOMContentLoaded', () => {
// Show the first section by default
showSection('P1');
});
</script>
</head>
<body>
<!-- Page 1 -->
<div id="P1" class="section active red-background">
<div class="image-frame">
<img src="pages/ArtWebsite P1.jpg" alt="Painting 1" usemap="#home-image-map-P1">
<map name="home-image-map-P1">
<!-- Define clickable areas using <area> tags -->
<area shape="poly" coords="422,357,1108,357,1108,804,724,804,723,872,422,872" href="imagepages/BreakfeastCrowd.html" alt="Breakfeast Crowd">
<area shape="rect" coords="786,15,1195,330" href="javascript:void(0);" onclick="showSection('P1I')" alt="Breakfeast Crowd">
<area shape="rect" coords="16,314,350,750" href="sketches.html" alt="Visit our gallery">
<area shape="rect" coords="13,772,380,1472" href="sketches.html" alt="Visit our gallery">
<area shape="rect" coords="409,924,723,1346" href="sketches.html" alt="Visit our gallery">
<area shape="rect" coords="409,924,723,1346" href="sketches.html" alt="Visit our gallery">
<area shape="rect" coords="742,831,1183,1399" href="sketches.html" alt="Visit our gallery">
</map>
<!-- Navigation Buttons -->
<div class="nav-buttons">
<button onclick="showSection('P1')">< 1</button>
<button onclick="showSection('P2')">2</button>
<button onclick="showSection('P3')">3</button>
<button onclick="showSection('P4')">4</button>
<button onclick="showSection('P5')">5 ></button>
<button onclick="goToHome()">Home</button>
</div>
</div>
</div>
<!-- Page 1 ISO's -->
<div id="P1I" class="section black-background">
<div class="image-frame">
<img src="pages/BreakFest Club ISO.jpg" alt="Painting 1 ISO">
<!-- Black background div -->
<div class="nav-buttons">
<button onclick="goToPaintings()">Back</button>
</div>
</div>
</div>