There are 2 ways of making a Dark Footer Background Image:

1. Manipulate the image directly, then add as a background
2. Use a combination of a dark background and a semi-transparent image allowing the darkness to show through

Suggested footer image sizes

• 1900 x 856
• 192 x 600

Method 1: Manipulate the image directly, then add as a background

This is by far the easiest way of making a footer background image.

• Open the image in your favourite image editor (mine is Paint.NET)
• Edit Hue/Saturation/Lightness and Brightness/Contrast as needed
• Save the image
• Upload the image to the appropriate folder
• Alter the background image using the code below

Basic

This is the absolute code required to change the footer background.

CSS

#jsn-footer::before {
	background: url("../custom/images/footer-background.jpg");
}

#jsn-footer {
	background: url("../custom/images/footer-background.jpg");
}

Reference Code

Joomlashine has also used the following code for setting a footer background.

CSS

/* Required for the positioning of the background */
#jsn-footer {
	position: relative;
	font-size: 13px;
	line-height: 22px;
	color: #acacac;
	padding: 55px 0;
	/* margin-top: 30px; */
}

/* This displays the background image in relation to its parent #jsn-footer */
#jsn-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../images/backgrounds/ft1.jpg");
	background-position: 50% 0;
	background-repeat: repeat;
	background-size: cover !important;
}

HTML

<div class="jsn-footer">
	<!-- Footer Content Here -->
</div>

Method 2: Semi-Transparent Image on Dark background

The #jsn-footer <div> background is black so when the image is semi-transparent the black comes through making the image darker and give a sort of watermark effect.

Not all the code is required but I have put it here for reference. Different Joomlashine Templates might have slightly different versions of this code but the the rules shoud be very similiar.

CSS

/* Required for the positioning of the background and sets it to be dark */
#jsn-footer {
	position: relative;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	padding: 35px 0px 0;
	background: #171c26;
}
	
/* This displays the background image in relation to its parent #jsn-footer and makes the background image semi-transparent */
#jsn-footer .img-ft-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../images/backgrounds/footer.jpg");
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="15")";
	filter: alpha(opacity= 15);
	-moz-opacity: 0.015;
	-khtml-opacity: 0.015;
	opacity: 0.015;
	background-position: 50% 0;
	background-attachment: fixed !important;
	background-repeat: repeat;
	background-size: cover !important;
}

HTML

<div class="jsn-footer">
	<div class="img-ft-bg></div>
</div>

Notes

• Demo here - It is a little hidden, possible they have made it to dark. it is on the politics page
• This code keeps the backgound image fixed in place.
• If you think the background has a layer it is fixed to the bottom of the page.
• So when you scroll it appears as if  the footer is a  window and is moving over the background image.
• This is created by absoulte positiong of the .img-ft-bg within the relative positioned footer DIV
• changing the following helps with positioning the picture in the background
  • background-position: 50% 0;
  • background-attachment: fixed !important; --> background-attachment: local !important;

Reduce Image File Size but keep the same resolution

When making  footer images they have to be quite wide and have resolutions such as 1920 x 1080 but this causes the images to be of a large file size. The solution is simple though.

This technique massively reduces its file size and allows you to use large resolution images with small footprints.

• Save the image  as a JPG @ 60% quality

When you save this lower quality image, you will find it normal to the human eye and as such it looks fine, but the image file size is massively reduced.