Docs

[Dylan F]

Hello,
I would like to have a background image that spans across the entire background. Currently, I am only able to make it occupy the space of the content of the site. I would like for the image to span the entire screen, but also be above the footer elements.

For an example, I am looking for something similar to this site: http://www.icpc2014.ru/en

Thank you for any help you are able to give.
Dylan Fleming
Asio Studio

[Jade]

Hi Dylan,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Dylan F]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. You are not using any background image currently as I can see. Let’s add the background image first from Customize > Layout and Design > Background Options.

You might need to use background image separately for the section as section background to mimic the website you mentioned. Let us know what you are trying and where we could assist you.

Cheers!

[Dylan F]

Using the Background Options method just made it fill the screen with the height of the image or, if I use “Background Pattern” it stacks the image again and again. All of this while staying behind the white of the website. Unfortunately, that’s not quite what I was looking for and I understand now that the confusion is my fault. I will go into detail below.

What I am looking to do is have the attached image (footerbknd.jpg) span the entire length of bottom of the site just above the footer elements. You can see in the link I provided in the first post (http://www.icpc2014.ru/en), at the bottom of the site they have a cityscape image that spans the entire background of the site, but just along the bottom and above their footer. For the most part, the background is white. I am looking to achieve a similar effect on my site.

To clarify, I have attached an image (show.jpg) that should explain what I’m looking for.

Thanks for your help
Dylan Fleming
Asio Studio

[Rue Nel]

Hello There,

Thanks for providing the screenshots to give further clarifications of what you want. Because what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Add custom content above the footer
// =============================================================================
function custom_section_before_footer() { ?>
	<div id="content-footer-bg" style="height: 165px; margin-bottom: 0;background: url(https://s3.amazonaws.com/community-themeco/app/uploads/2016/08/04162930/footerbknd.jpg) repeat-x left bottom;">
	</div>
<?php }
add_action('x_before_view_global__footer-widget-areas', 'custom_section_before_footer');
// =============================================================================

Once all is setup properly, the final look should be like this:
http://prntscr.com/c1suwg

We would loved to know if this has work for you. Thank you.

[Dylan F]

Wonderful! This worked just as I had hoped!

Thank you very much for your help!

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Alexandra]

Just what I was looking for – perfect!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts