How to add more alternative backgrounds?

[keeralesh]

Hi,

How can I please add more alternative backgrounds?

Thanks.

keeralesh

[Melanie – SUPPORT]

Hi, in the file functions.php you find the code starting at

				echo "\n".'/*========== Asset Background Styles ==========*/'."\n";

Below that you will find a paragraph per background. This is one background code

echo '.alt-one {background-color: '.$alt_one_bg_color.';}'. "\n";
				if (isset($options['alt_one_bg_image']) && $alt_one_bg_image != "") {
					if ($alt_one_bg_image_size == "cover") {
						echo '.alt-one {background-image: url('.$alt_one_bg_image.'); background-repeat: no-repeat; background-position: center center; background-size:cover;}'. "\n";
					} else {
						echo '.alt-one {background-image: url('.$alt_one_bg_image.'); background-repeat: repeat; background-position: center center; background-size:auto;}'. "\n";
					}	
				}
				echo '.alt-one {color: '.$alt_one_text_color.';}'. "\n";
				echo '.alt-one.full-width-text:after {border-top-color:'.$alt_one_bg_color.';}'. "\n";

So you could copy that code and place it below the last paragraph and change “one” to the following number.

Then in sf-options.php to the same for the code

					array(
						'id' => 'alt_one_bg_image',
						'type' => 'upload',
						'title' => __('Alt 1 Background Image', Redux_TEXT_DOMAIN), 
						'sub_desc' => __('Upload an image for the Alt-1 alternative background here.', Redux_TEXT_DOMAIN),
						'desc' => ''
						),

Then do the same for

		$alt_one_bg_color = $options['alt_one_bg_color'];
		$alt_one_text_color = $options['alt_one_text_color'];
		if (isset($options['alt_one_bg_image'])) {
		$alt_one_bg_image = $options['alt_one_bg_image'];
		}

in sf-custom-styles.php

and

		echo '.alt-bg {border-color: '.$section_divide_color.';}'. "\n";
		echo '.alt-bg.alt-one {background-color: '.$alt_one_bg_color.';}'. "\n";
		if (isset($options['alt_one_bg_image']) && $alt_one_bg_image != "") {
			if ($alt_one_bg_image_size == "cover") {
				echo '.alt-bg.alt-one {background-image: url('.$alt_one_bg_image.'); background-repeat: no-repeat; background-position: center center; background-size:cover;}'. "\n";
			} else {
				echo '.alt-bg.alt-one {background-image: url('.$alt_one_bg_image.'); background-repeat: repeat; background-position: center top; background-size:auto;}'. "\n";
			}	
		}
		echo '.alt-bg.alt-one, .alt-bg.alt-one h1, .alt-bg.alt-one h2, .alt-bg.alt-one h3, .alt-bg.alt-one h3, .alt-bg.alt-one h4, .alt-bg.alt-one h5, .alt-bg.alt-one h6, .alt-one .carousel-wrap > a {color: '.$alt_one_text_color.';}'. "\n";
		echo '.alt-one.full-width-text:after {border-top-color:'.$alt_one_bg_color.';}'. "\n";
		echo '.alt-one h4.spb_text_heading, .alt-one h4.spb_heading {border-bottom-color:'.$alt_one_text_color.';}'. "\n";

If you’re unsure how to do that please don’t do it, as it can break the theme in a second.