Fixed image background in Dynamik Website Builder

We’re going to add a big box at the top of the home page with a fixed position background image.

The box will contain a headline, a paragraph of text and a button graphic.

In the WordPress Dashboard, choose…

• Genesis > Dynamik Design.
• Choose EZ from the black navbar at the top of the screen.
• Scroll down to, Feature Top EZ-Widget Areas.
• Feature Top Display Locations = Home
• Feature Top Display Position = Outside Inner Div
• Feature Top Structure = EZ Feature Top 1
• Feature Top Widget Heading Fonts = 5.2 rem Color: FFFFFF
• Feature Top Widget Content Fonts = 2.6 rem Color: FFFFFF

I also added some custom CSS to both heading and content fonts using the #Custom buttons.

I built the code using the Dynamik CSS Builder. To use the CSS Builder, click the button at the top of Dynamik Website Builder (it’s available on every page except the settings page).

These are the settings I used…

Feature Top Widget Heading Fonts (no padding)
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000000;

Feature Top Widget Content Fonts (with padding)
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000000;
padding: 100px 0px 100px 0px;

SAVE your changes!

Adding a simple background image…
If you want a background image that scrolls with the page, find…

• Feature Top Container Wrap BG: Type = No Repeat Image (Centre) Image = (choose an image)

PLEASE NOTE! To use a background image, you have to uploaded it via the Dynamik Design Images tab (on top navbar). Not via the WordPress media upload button.

Next we’ll make some HTML using the WordPress page editor…

• Open the WordPress page editor.
• Type a paragraph of text.
• Use the Add Media button to upload a button or graphic you’ve made, into your page.
• Click the Text tab, and copy the HTML code.

We need to paste the HTML code into a text widget. Go to Appearance > Widgets…

• Drag a Text Widget into EZ Feature Top 1 widget area.
• Paste the HTML code in here.
• Tick Automatically Add Paragraphs, and click SAVE.

You now have a full width box with a background image and some text. We styled the text using the #Custom CSS button.

But. A lot of people want to make the background image stay in a fixed position as the page scrolls.

This is what you need to do. In the WordPress dashboard choose…
(Please see the slides below)

• Genesis > Dynamik Custom.
• Custom CSS ( Activate Front-end CSS Builder) – tick the box to activate. Then SAVE your changes.
• Click the text link that says – Click To View Front-end.
• Click the Show/Hide CSS Builder button (it’s blue). Top right of your screen.
• On the left of your screen a red button appears. Click – Enable Element Selectors.
• Find and click a button that’s labelled #ez-feature-top. You might have to scroll sideways to see this button.
• The part of the screen we’ve selected, goes green. So we can see which part of our site we’re making changes to. The green part.
• EZ Feature Top Container Wrap >> appears on the left hand screen near the top. Click the double arrow >> button.
• The CSS selector is now pasted in the TEMPORARY CSS edit box.
• Make sure your cursor is between the curly braces in the code and click the Backgrounds tab at the top of the screen.
• In the Background dialogue box make these changes…
• Type: choose – No-Repeat Image (Center Fixed)
• Image: Choose any image that you have ALREADY uploaded via the Dynamik Design Images tab. You can NOT use images uploaded via the WordPress media library.
• Click the button labelled – Insert Image Background CSS.

Your CSS is not SAVED yet.

• Beneath the CSS you’ve just made, look for – Click to Insert into Custom CSS Editor >>. Click that button.
• Your code moves in to the Custom CSS Editor box. BUT it’s still not SAVED.
• At the top right of your screen click the SAVE CHANGES button.

You now have a box at the top of your homepage containing text and a button. And when you scroll the page the background stays in a fixed position.

Whoo! That was a tricky one. Give your self a pat on the back. And if you don’t have Dynamik Website Builder yet, why not go now and check it out now?