Jump to content


This topic is now archived and is closed to further replies.


How to Add a Site Background Image Inline

Recommended Posts

I am trying to add a background image for my site inline so I can assign a class and use some css and JavaScript to adjust its size and center positioning on the fly according to browser size. For the life of me I can't figure out how to add it it inline. Can someone please clue me in on how, where and what code to use to accomplish adding the image inline?

I already have the css code and JavaScript code, only need inline code and where to enter it.

Share this post

Link to post
Share on other sites



Far be it from me to tell you how to design your site, but I think the method you're using could lead to other, more serious issues down the line.


With DMS, which is already designed to be responsive, out of the box, you just need to:

1.  Upload the image to Dashboard > Media > Add New.  When the image uploads, click "Edit" and you'll see, on the right, the URL for the image.

2.  Go to the site in Chrome, logged in, and click Custom Code.  Add the most basic CSS to include the background-image there, using the URL for the image. 

3.  The positioning should be done with CSS, not Javascript, as that is likely to break next time WP upgrades or it could cause conflicts elsewhere.  Moreover, it may not work on many browsers, including older browsers.  You can use CSS found here: http://www.w3schools.com/css/css_background.asp

4.  You can create browser specific CSS found here:  http://docs.pagelines.com/tutorials/browser-specific-css


The process is no more complicated than you described, and I think infinitely safer and browser-friendly.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using a plugin called Speed Booster Pack to speed up the load time of michaelkummer.com. One of the plugin settings, Minimize HTML and JavaScript causes an error that I only get with Pagelines. With other themes, such as WordPress' Twenty Seventeen, I do not get that error.
      I have reproduced the problem on my staging site and if you look at the JavaScript console, you will see the following error:
      SyntaxError: Unexpected end of script
      Any clue what PageLines may be doing differently to be contributing to this issue? I contacted the plugin developer and they, of course, pointed me to the theme developer
    • flourishdesignstudio
      By flourishdesignstudio+
      We are working on a site and the customers are complaining that the site loads too slowly. They contacted their host who mentioned that the Java Script is all loading at the beginning. Is it possible to delay the load of the less important Java Script until after the initial load to speed up the site? The goal is to load the page faster by minimizing the initial javascript calls.
      Are there any preferred plugins that you would recommend or does this end up causing excessive problems with plugins, etc.?
      Thanks for the help!
    • SaschaM
      By SaschaM+
      sorry. i got a problem on my site i can not fix myself, would be nice somebody can help.
      I use:
      - Platform 5 (latest) Pro
      - Pagelines Framework (latest for Platform 5)
      - keycdn (cdn enabler, cache enabler und optimus WebP)
      - my site:  example
      The background image i use in the Impulse Section is not beeing replaced automatically if i specify a CDN Url. I need to put in the cdn url to the image manually. Why?
      If you look in the button of the the side you see post grid section, where i have no problems. You also see there WebP Images working.
      Now i can not really use the direct cdn url for the impulse background image, cause i want to benefit there from WebP Image also in the background as it works in post grid section.
      How does it works with Impulse? The webP image for the background is ready to use.
      Thank you.
    • chamois_blanc
      By chamois_blanc+
      I am trying to clone a container on a page. It throws the following javascript error:
      function l(b, c, e, f) { var g = m.a.f.get(b, p); if (!c) { if (g) throw Error("You cannot apply bindings multiple times to the same element."); m.a.f.set(b, p, !0) } I would appreciate guidance and a fix. Thank you
    • Jeremiah
      By Jeremiah+
      Error: editing.js?ver=930684:5 Uncaught TypeError: Cannot read property 'getData' of undefined
      I have all of the plugins disabled and I still receive the error.
      Page Editor will not load on page.