How to add a separate background

[ChrisjChrisj]

I am using a php script where upon selecting either category 1, 2 or 3, different video choices are displayed on a page.

The part of page code in question looks like this:

	<div class="wrapper">{{TITLE}}

	<?php
	$_GET['id'];
	if ($_GET['id'] == 1){
	echo "<div class='Cat1'>Category1</div>";
	}
	else if ($_GET['id'] == 2){
	echo "<div class='Cat2'>Category2</div>";
	}
	else if ($_GET['id'] == 3){
	echo "<div class='Cat3'>Category3</div>";
	}
	?>

	</div>

The TITLE is named in the script’s dashboard. Category 1, 2 and 3 each have a separate name.

I’d like help to display a different header background image to each category page displayed.

Here’s the current css:

	.wrapper {
	position: relative;
	text-align: center;
	color:#000;
        background-color:#696969;
	

which just shows the same #696969 color to all three header backgrounds.

Any ahelp is appreciated.

[m_hutley]

Apply the background-image to each of your classes…

.Cat1 {
  background-image: url(whateveryourimageis.jpg);
}
.Cat2 {
 background-image: url(adifferentimage.jpg);
}
...

[SamA74]

Will the image be on the .wrapper itself or the div within the wrapper?

We can slim down the PHP and remove (most of) it from the HTML.

$id = abs($_GET['id']);
if(!in_array($id, [1,2,3])){ $id = 1 ;} // Default to 1 if out of range

Then limit pollution of the HTML to:-

<div class="Cat<?=$id?>">Category<?=$id?></div>

That is if the image goes on the div.
If it’s on the wrapper:-

<div class="wrapper Cat<?=$id?>">