Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 28, 2015 at 8:49 pm #557833
    JC

    Hi guys,

    As part of putting my site back together, I attempted to use this previous thread to get my footer working again.

    https://kriesi.at/support/topic/menu-footer-2/

    I was able to resize everything as needed, but still can’t seem to get the background working per Ismael’s instructions.

    I have changed the location of the background image to this location:
    http://newinceptions.com/wp-content/images/footer/Background/Footer-Background2.png

    Which I thought I accounted for in the following Quick CSS:

    @media only screen and (max-width: 767px) {
#footer .flex_column:nth-child(3), #footer .flex_column:nth-child(4) {
  width: 48% !important;
  float: left;
}

.footer_color {
  background: #222222 url(https://newinceptions.com/wp-content/images/footer/Background/Footer-Background2.png) center bottom no-repeat scroll;
  background-size: cover;
}
}

    but it’s not showing up. I’m guessing I missed something?

    December 29, 2015 at 2:44 am #557933
    Elliott

    Hey JC!

    Are you trying to get that image to display as your footer background? You can do this in Dashboard > Enfold > General Styling > Footer. Set the background image and have it’s position set to bottom right.

    Cheers!
    Elliott

    December 29, 2015 at 4:50 am #557981
    JC

    Hey Elliott!

    Thanks for suggesting that.

    However, I remember trying this before (and I just retried it) but it doesn’t stretch properly to fit the entire footer background. Since there’s no way to stretch it, and only just tile it, it ends up looking dumb with a repeated image.

    Thoughts?

    December 31, 2015 at 10:35 pm #558773
    Josue

    Hi!

    Try changing cover to contain:

      background-size: contain;

    Best regards,
    Josue

    January 4, 2016 at 9:29 pm #559493
    JC

    Hey Josue,

    There’s still nothing showing up in the footer when I use my original code. Even when I changed what you recommended. I’ve now added this to the Quick CSS and still not having any luck.

    @media only screen and (max-width: 767px) {
#footer .flex_column:nth-child(3), #footer .flex_column:nth-child(4) {
  width: 48% !important;
  float: left;
}

.footer_color {
  background: #222222 url(https://newinceptions.com/wp-content/images/footer/Background/Footer-Background2.png) center bottom no-repeat scroll;
  background-size: contain;
}
}
    January 5, 2016 at 2:32 am #559675
    Elliott

    Hey!

    Go ahead and set it up and then send us a link to your page so we can check it.

    Cheers!
    Elliott

    January 5, 2016 at 11:24 am #559841
    Josue

    Hey!

    I can see the image but it’s sitting at the bottom, try changing the backgrounds position setting to:

      background: #222222 url(https://newinceptions.com/wp-content/images/footer/Background/Footer-Background2.png) center top no-repeat scroll;

    Best regards,
    Josue

    January 5, 2016 at 7:48 pm #560109
    JC

    Hi Josue,

    Still no luck.

    Is the answer in the old thread? Or was Enfold modified enough that the particular coding doesn’t work anymore?

    January 6, 2016 at 3:05 am #560250
    Josue

    Hi!

    Can you post a screenshot of your view?

    Regards,
    Josue

    January 6, 2016 at 4:53 am #560310
    JC

    Sure.

    current footer

    January 6, 2016 at 11:32 am #560417
    Josue

    Hey!

    It’s expected the image doesn’t show there because the code is wrapped by a media query that tells the browser to only apply the code in 767px width or less:

    @media only screen and (max-width: 767px) {

}

    Regards,
    Josue

    January 6, 2016 at 7:37 pm #560722
    JC

    Hey Josue,

    Yeah, not what I’m going for.
    However, I really appreciate that you guys don’t assume anything. That you want to specifically get it to what the client wants. I do appreciate that.

    So, let’s just start with the end in mind, instead of me just blindly giving you code that. at this point, seemed to have magically worked.

    I want this as my desktop footer (auto size – scales to the size of the footer):
    Desktop footer

    I want this as my mobile background (the globe image has half the opacity of the desktop globe image)

    Mobile Footer

    Again, previous thread was this: https://kriesi.at/support/topic/menu-footer-2/

    I ended up with the code:

    @media only screen and (max-width: 767px) {
#footer .flex_column:nth-child(3), #footer .flex_column:nth-child(4) {
  width: 48% !important;
  float: left;
}

.footer_color {
  background: #222222 url(https://newinceptions.com/wp-content/images/footer/Background/Footer-Background2.png) center bottom no-repeat scroll;
  background-size: auto;
}
}
    • This reply was modified 8 years, 11 months ago by JC. Reason: Was trying to bolden the background size is 'auto'
    January 6, 2016 at 11:31 pm #560825
    Josue

    Ok, replace that with this:

    .footer_color {
  	background: #222222 url(//newinceptions.com/wp-content/images/footer/Background/Footer-Background2.png) no-repeat scroll;
  	background-position: center top;
  	background-size: auto;
}
@media only screen and (max-width: 767px) {
	.footer_color{
		background-position: center bottom;
		background-size: contain;
	}
	#footer .flex_column:nth-child(3), #footer .flex_column:nth-child(4) {
	  	width: 48% !important;
	  	float: left;
	}
}

    Best regards,
    Josue

    January 7, 2016 at 8:00 pm #561475
    JC

    Hey, hey! We got it.

    Honored (as usual) to work with you, Josue. You’re the real MVP! :)

    Thanks again!
    -JC

    January 7, 2016 at 10:13 pm #561548
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.