Customizing footer background – Minimum Pro

[PrayersNApples]

I'd like to add a background image (stripes) to my footer area. I'm using Minimum Pro and I'd done it before using the Adorable theme by adding:

background-image: url(http://sample.com) repeat;

but when I try replacing background-color with that line of code in Minimum Pro, the footer just becomes transparent (and you can see the bottom of the main background image instead).

Any suggestions?

Thanks so much!

http://www.prayersandapples.com

[Davinder Singh Kainth]

background: url (images/imagename.png) repeat-x;

repeat-x will repeat horizontally, for vertical use repeat-y

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[PrayersNApples]

Hi Davinder,

Thank you so much for your response! Unfortunately, I tried that and it didn't work - this is what my css looked like when I changed it:

/*
Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	background: url(http://prayersandapples.com/?attachment_id=6185) repeat-x;
	color: #999;
}

.footer-widgets .wrap {
	border-bottom: 1px solid #444;
	padding: 40px 0 16px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 340px;
}

.footer-widgets-1 {
	margin-right: 60px;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}

.footer-widgets-3 {
	float: right;
}

.footer-widgets a {
	border-bottom: 1px dotted #fff;
	color: #fff;
}

.footer-widgets a:hover {
	color: #999;
}

.footer-widgets .widget {
	margin-bottom: 40px;
}

.footer-widgets .widget-title {
	color: #fff;
}

.footer-widgets li {
	list-style-type: none;
	margin-bottom: 6px;
	word-wrap: break-word;
}

.footer-widgets .search-form input:focus {
	border: 1px solid #ddd;
}

/*
Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background: background: url(http://prayersandapples.com/?attachment_id=6185) repeat-x;
        letter-spacing: 1px;
	padding: 60px 0;
	text-align: center;
}

.site-footer a,
.site-footer p {
	color: #999;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer a {
	border: none;
	font-weight: 300;
}

.site-footer p {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 14px;
	margin-bottom: 0;
}

/*

However, after making those changes, my homepage footer was clear (showing the bottom of the main background) and the footer on all other pages was white.

I have since returned it to its normal settings:

/*
Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	background-color: #75bdb4:
	color: #999;
        clear: both;
}

.footer-widgets .wrap {
	border-bottom: 1px solid #444;
	padding: 40px 0 16px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 340px;
}

.footer-widgets-1 {
	margin-right: 60px;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}

.footer-widgets-3 {
	float: right;
}

.footer-widgets a {
	border-bottom: 1px dotted #fff;
	color: #fff;
}

.footer-widgets a:hover {
	color: #999;
}

.footer-widgets .widget {
	margin-bottom: 40px;
}

.footer-widgets .widget-title {
	color: #fff;
}

.footer-widgets li {
	list-style-type: none;
	margin-bottom: 6px;
	word-wrap: break-word;
}

.footer-widgets .search-form input:focus {
	border: 1px solid #ddd;
}

/*
Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background-color: #75bdb4;
        letter-spacing: 1px;
	padding: 60px 0;
	text-align: center;
}

.site-footer a,
.site-footer p {
	color: #999;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer a {
	border: none;
	font-weight: 300;
}

.site-footer p {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 14px;
	margin-bottom: 0;
}

(Note: the normal settings have a line that says "clear: both" under the site.footer section - I tried removing and keeping it; it doesn't seem to make a difference with the changes - the homepage is still clear and the others are white.)

Any other suggestions?

Thanks for your help!

[Davinder Singh Kainth]

In the following code:

/*
Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	background: url(http://prayersandapples.com/?attachment_id=6185) repeat-x;
	color: #999;
}

Replace this "http://prayersandapples.com/?attachment_id=6185" with url of an image and then check.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[PrayersNApples]

I didn't realize I was copying/pasting the wrong link! Thank you so much - that worked 🙂 One more question though: the background image is still showing through after the bottom of the footer. Is there any way to delete that/get it to stop showing? You can see it here at: http://www.prayersandapples.com.

Thank you so much for your help! 🙂

[PrayersNApples]

(all of the other pages, besides the homepage, show white underneath the footer area - I'd like to remove this as well)

[Davinder Singh Kainth]

The image you enter in the following code is not long enough (height wise)

Replace this code

.site-footer {
	background: url(http://prayersandapples.com/wp-content/uploads/2014/02/Teal-and-White-Stripe-Border.jpg) repeat-x;
        letter-spacing: 1px;
	padding: 60px 0;
	text-align: center;
}

with this code

.site-footer {
	background: url(http://prayersandapples.com/wp-content/uploads/2014/02/Teal-and-White-Stripe-Border.jpg);
        letter-spacing: 1px;
	padding: 60px 0;
	text-align: center;
}

If this does not work, upload strip image which is longer height wise

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[PrayersNApples]

Both solutions worked perfect! Thanks so much for your time and patience, I really appreciate it!

[Davinder Singh Kainth]

Cool, welcome !

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Author]

Posts