• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Genesis framework / Fixed image background in Dynamik Website Builder

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.

Dynamik Website Builder

Go to the Feature Top EZ widget areas sectionIn 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.

Open Dynamik Website Builder CSS builderI 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!

Dynamik Website Builder

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?

The end result.
Settings for Feature Top EZ Widget area in Dynamik Website Builder
Using the WordPress post editor to make basic HTML
Paste your HTML in to a text widget
Activate Dynamik's front end CSS builder
Finding the correct CSS element using Dynamik Website Builder for Genesis Framework
There are 3 steps to building and saving your CSS.

Dynamik Website Builder

Sidebar

StudioPress and Genesis Tutorials
  • StudioPress and Genesis Tutorials
StudioPress themes Free with this hosting.

My StudioPress and Genesis Tutorials

  • StudioPress Sites Review
  • Genesis Responsive Slider Tutorial
  • Genesis Featured Post Widget Tutorial
  • StudioPress Core Skills
  • Simple Hooks Tutorial
  • Genesis Simple Edits Tutorial
  • Genesis Dambuster plugin basic settings
  • Beaver Builder Tutorial – The Basics
  • Elementor Tutorial: a Quick Start Guide
  • Changing the color scheme of Altitude, Magazine Parallax Pro themes
  • Basic StudioPress Theme Customization (Old Post)
  • Genesis Framework Widget Areas Tutorial
  • Genesis Grid Loop Tutorial
  • Simple URLs (plugin) Tutorial
  • Simple Sidebars Tutorial
  • Simple Social Icons Plugin
  • Customizing the WordPress Query
  • Category and Tag Archive Listing Pages
  • Adding an author box below posts
  • Choosing the right StudioPress theme (a review)
  • Genesis eNews Extended and Mailchimp
  • StudioPress Pricing Table
  • StudioPress Flexible Layouts
  • Genesis CSS learn how to tweak and customize your site
  • Icons used in StudioPress themes
  • Images in homepage text widgets
  • Using Genesis Column Classes To Build Layout Grids
  • Sticky Header or Menu in Genesis
  • Plugins used in StudioPress themes
  • Genesis Simple FAQ plugin
  • Strong Testimonials Plugin – The Basics
  • Cornerstone Content: a simple how to guide
  • Genesis Portfolio Pro
  • Setup Generate Pro theme
  • Setup Hello Pro
  • Set up Altitude Pro theme
  • Setup – Executive Pro Theme
  • Parallax Pro Theme Review
  • Setup Parallax Pro Theme
  • Changing Google Fonts in a Genesis child theme (Parallax Pro)
  • Setup Daily Dish Pro theme
  • Setup Metro Pro theme
  • Foodie Pro Overview
  • Smart Passive Income Pro Theme: set up guide
  • Academy Pro theme Setup Guide
  • Authority Pro Theme: setup guide
Install the Genesis Framework
  • Are you ready to take your first steps? Watch as I install WordPress and Genesis.

Rainmaker Platform – a Review

  • Discover if you need the Rainmaker Platform
FoodieProTutorials
Build your own Genesis child themes with Dynamik Website Builder

Genesis Design Palette Pro

  • Customize your theme with Genesis Design Palette Pro

DIY Webdesign with Dynamik Website Builder AND Genesis Extender plugin

  • Genesis Child Theme Tutorial with Dynamik Website Builder
  • StudioPress theme customisation with the Genesis Extender plugin
  • Dynamik Fixed Background Image

StudioPress Accelerator

  • StudioPress Accelerator, the budget-friendly way to get a seriously fast website.

Are you getting stuck setting up a StudioPress site?Please let me know if you get stuck.

Disclosure: I receive compensation from some of the companies whose products I review.

How my affiliate links work…

  • I only get paid if someone buys a product. Not because someone clicks a link.
  • You pay the same price using my links or the StudioPress site.
  • If I earn some commission I can spend some more time making more tutorials.
  • P.S. Thanks to all those folks who have bought through my links.
  • It's much appreciated :-)

Philip Gledhill web design

Philip Gledhill is a Bradford web designer and WordPress assistant.

Genesis Extender

Customise your Genesis child theme the easy way.

The Genesis Extender Plugin

Get The Genesis Framework

WordPress Hosting

WordPress Hosting, Which Deal is Best For You?

Genesis – StudioPress resources

There are many good websites where you can find information about the Genesis Framework.

I use the sites listed below on a weekly or even daily basis to find answers, solutions and basic information.

I hope you find them as useful as I have.

Bill Erickson
WordPress Consultant

  • Tutorials
  • Code

Designs by Nick the Geek
Genesis based WordPress development and tutorials for everyone

  • Genesis Explained a good introduction to the code that makes Genesis work

Greg Rickaby
Front-End Developer @WebDevStudios

  • Code Snippets

Christopher Cochran
web/tech/design/music

  • The Visual Hook Guide

Carrie Dils

Genesis Developer and Web Designer

  • Genesis Tutorials and Information

Carrie Dils course on Lynda.com

  • There are two Genesis courses on Lynda.com. Up and Running with Genesis and Customizing Themes. Both are well worth a look. And if you're new to Lynda.com you can usually get a 7 day free trial.

Sridhar Katakam

  • Loads of WordPress and Genesis tutorials. Well worth a look.

Genesis For Beginners

  • pdf book

StudioPress.tv

  • Some basic videos from StudioPress

Brian Gardner

  • Code snippets and info from the man behind StudioPress

Sure Fire Web Services Inc
Web Design Tips, WordPress Development Help,and Genesis Framework Tutorials

  • Useful Genesis links page

WP Smith

  • Genesis code snippets

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top