Adding a background image to other than a section or page

[designerwriter]

I am not sure how to do this. I looked through other questions on the forum and tried to add a background to the white section of my Contact page. It’s on top of the grey background but underneath the section where I added the contact information. This white part of the page is where I want the background image.

I tried putting the background image on the page but the image showed up behind the white section. Then I tried adding the image to the section but I didn’t like it there. I just want to add it to the white section. Is that a container? What size should I make the photograph? Thanks in advance.

https://eagleheartdynamic.com/contact/

designerwriter

[ruenel]

Hello Grace,

Thanks for writing in!

The white space on the mentioned page is actually the padding of the content wrapper container since you are using the default page template. To accomplish what you have in mind, please use the Blank - No Container | Header, Footer page template so that you can easily insert a background image behind the contact form.

Please check out the secure note for the test page.

Best Regards.

[designerwriter]

Hey ruenel thanks. But I don’t want the rounded corners. I see that the image background is in the column not the section or the page. Do I have to delete this page? Where do I find this Blank - No Container Header, Footer page? Do I just drag it on to the existing page? What are the steps to get to what you did on this test page? I forgot there were other page templates! It’s not in the elements section. Page builder section? Oh I see it now, it’s in the Content section. So I just choose the template then apply the photo correct? I will do it in the morning then paste it here to show you. What size should I make the image?

By the way, Brad from Envira Gallery solved the license issue when he pasted the license key into the database. I went to find the topic in the forum to tell you but I couldn’t find it so that I could not reply to you!

[christian]

Hey Grace,

@designerwriter

But I don’t want the rounded corners.

You can opt not to use the Border Radious setting of the Column.

@designerwriter

I see that the image background is in the column not the section or the page. Do I have to delete this page?

If you’re done learning from the sample page done by Runel, you can delete it.

@designerwriter

Where do I find this Blank - No Container Header, Footer page?

It’s under the Page Attributes option. See https://theme.co/docs/page-settings#page-attributes

@designerwriter

What are the steps to get to what you did on this test page?

I’m sorry but the steps are too numerous to detail. I can only provide a general setup guide.

1. Set the Page Template to Blank No Container | Header Footer
2. Edit the page in Cornerstone Page Builder
3. Set the Column Background to the image
4. Add a Headline element to the Column. This would be the “Contact” page title
5. Add a Text element under the Headline element and insert the Contact Form 7 shortcode in this Text element.

@designerwriter

What size should I make the image?

This depends on the resolution you’ll support. If you support 4k monitors, for example, your image must be 3,840 pixels horizontally. Please consult with a web designer or agency to give you the exact image size that you need.

Hope that helps.

[designerwriter]

I am working with a vertical photograph. I will just keep it size as.

Why do I have to edit it in Cornerstone? Just curious. I guess this is part of the program.

Thanks for the tips and the list. Much appreciated. I will let you know how it turns out!

designerwriter

[friech]

Hi Grace,

Just a tip, you should not put too much focus on the background-image because it is only for cosmetics. The user should have the focus on your content (form), not on the background-image. Another thing, no matter what size of your background-image it will not fit to everything, as you realize your page will be viewed on different device/screen sizes, a vertical/portrait oriented image will fit nicely on a portrait oriented device, but its not going to fit nicely on a landscape oriented screen.

I understand you want your contact page to look nice. But take a look on this example page (https://eagleheartdynamic.com/test-contact/) this is what you want to achieve, right? But it did not do justice to the beautiful Eagle image. If you want that Eagle image to put on display/focus you should redesign your layout, maybe do a 2 columns Eagle Image on the right, and form on the left. Hope this make sense.

@designerwriter

Why do I have to edit it in Cornerstone? Just curious. I guess this is part of the program.

Because it is easier to do it in Cornerstone. You can do that same Layout in your current contact page if you dont want to use the Cornerstone, but you need to learn how to write custom CSS.

To learn more custom CSS (when your schedule allows), you can inspect your site using Chrome’s developer tools to see the styling that is applied to an element and then using custom CSS to override it. You can find more info on how to check for CSS selectors here. Then information about writing your custom CSS here.

Hope this helps,
Cheers!

[designerwriter]

Thanks friech. I will be using a greyed out vector image that is subtle and blends in with the form and background. A full color photo won’t look good behind a form. I am a designer after all. This is the background I am using. It’s a 2021 autumn vector that I took with my cell phone. I really like the lines in this photo vector.
https://eagleheartdynamic.com/3341-2/

I tested it out on all of the breakpoints and it looks good. I put this photograph in a section so now I add the headline and add the text under that like Christian said? Do I copy the CSS for the headline from another page and just add it to the CSS? How do I know where to place it? In other words, will it end up in the position like on the other pages?

II think the Page templates should be more visible and not be part of Content. Can you for example give it its own button? It was so difficult to find the No Container/header, footer page and page options…Can you make a separate template page for it because I thought it would be in that section but it wasn’t.

[tristup]

Hi Grace,

If the image looks good in the background I would suggest using the elements and copying the style from other pages by using the Preset option and applying it to your page. If you have custom CSS code on any other page, please copy the CSS and add it to the Page CSS of your page. If the style is already in Global CSS, you need to add the corresponding selector to the elements on your page.

Regarding the Page Template, it is not very clear what exactly you want to say? But, It can be found in the Page Template settings of Default Editor and the Page Builder, you can select that from there.

Hope it helps.
Thanks

[designerwriter]

I don’t see the page attributes field. I only see the first image of the attached. Then when I click on the three lines to the left of the page building which is the navigation, I only get the templates page with no options as stated…No container / header, footer. In other words, it could be more user friendly instead of me having to hunt for it. I found it in the settings as you suggested but never would have thought to look there.

[designerwriter]

Ok guys I figured it out! I need your opinion of which version of the Contact page do you think is more effective?

This one…
https://eagleheartdynamic.com/contact/

or this one…
https://eagleheartdynamic.com/3341-2-2/

designerwriter

[ruenel]

Hey Grace,

This one is more attractive.

• https://eagleheartdynamic.com/3341-2-2/

If you are not satisfied yet, you can always change the background color or image, border, or box-shadow. The choices are limitless since you have full control over the elements on that page.

Best Regards.

[designerwriter]

That’s really interesting that you picked that one ruenel. I had a feeling you would I don’t know why. It’s less boxy and confined with less layers to it. You don’t find the photo distracting do you?

What I initially wanted to do on the first option is put the photo on the white part of the page but I didn’t know how to do it because it wasn’t a section. I wanted to make the the background where the image is now the grey color and the white part the page the photo with the grey background of the form on top. How can I achieve this and I will do one more version?
https://eagleheartdynamic.com/contact/

And I just realized something. That background greyed out photograph is showing up on all of the pages. I just want it on one page. Although it does give it a bit of extra dimension. However, I think the greyed out photo background is too distracting on the other pages so I just want a grey background. I got rid of the first version of the Contact page and after I put it in the trash, I thought the photo on the background of the other pages would be gone but it’s still there. How do I get rid of it?

designerwriter

[designerwriter]

Nevermind I figured it out! I dragged the Contact Version 2 page out of the trash and went to Theme Options > Layout and Design > Background Image > hit Delete. Voila! Magic happened. It disappeared. So now I know where to put an image if I want it to go across all of my pages. I stumbled across the solution!

[ruenel]

Hey Grace,

We are glad that you have resolved your issue already.

Cheers.

[designerwriter]

Well, I am a critical thinker and try to solve my own problems but sometimes when I don’t know everything about a theme, I need help. I subscribed to your Youtube channel so I will watch the videos in the near future.

I will miss you guys and I appreciate all of your support but I will be back because I want to change another website into Pro…my blog. I am just not jiving with the Gutenberg system because I don’t have the creative license to change a theme to what I want. I made my portfolio site simple because there were a ton of files and linking to do. The next site I am using Pro for will have more variety.

Do you have a link where I can view some of the complete templates for a website or is that just available with X?

Peace out,
designerwriter

[christian]

Hey Grace,

We don’t have a link but you can view the Templates within the backend of your site. Go to WordPress Admin Menu > X > Design Cloud.

You’ll see a popup like the screenshot below. Set the Filter to Sites and click on the Site’s Name to view the live sample page.

Hope that helps.

[designerwriter]

Are these for X only or are there Pro samples there too?

[ruenel]

Hello Grace,

The DesignCloud will display templates and presets.

DesignCloud when using X Theme:

• Site Demo
• Content Templates
• Element Presets

DesignCloud when using Pro Theme:

• Site Demo
• Content Templates
• Element Presets
• Header Templates
• Footer Templates
• Layout Templates

Hope this helps.

[designerwriter]

Ruenel so does that mean the information is on Design Cloud permanently until it is taken off or just for display? Just wondering. Honestly, I don’t trust the cloud and refuse to have any of my files on there.

Are all of the themes under the Cornerstone option? I don’t see any under Pro. I see Design Cloud under Cornerstone. Are they mixed and how can I tell the difference between the X and Pro templates? I know it sounds like a dumb question. lol

[friech]

Hi Grace,

Once you import any of the Demo from Design Cloud it will be downloaded locally on your site.

There is only one Design Cloud feature for both X and PRO, and that is one you see under Cornerstone.

The only difference is X has no Header and Footer builder, so you can not import Header and Footer demo if you’re using X. Whereas PRO has all the builders so you can get all the demo with PRO.

Cheers,