Jump to content


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


How to Add a Site Background Image Inline

Recommended Posts

bartok+    0
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
Rob    547



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

    • 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.
    • crose
      By crose+
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      Thanks in advance.
    • oseehys
      By oseehys+
      Can someone give me a breakthrough out here?
      I have been on the media player for like 5 hours now yet it is still not displaying on my media box or the textbox,
      its a free media player on soundclound
      Great day ahead to the developers out here...
      am trying to install the Toneden media player https://www.toneden.io/player to display my songs on sound cloud, i followed everything on the doc, but obviuosly am missing something i did everything i can for 5 hours yet no breakthrough, am using the textbox as display.
      This is the html script i used, what am i missing here? see it below
        (function() { var script = document.createElement('script') script.type = 'text/javascript'; script.async = true; script.src = 'http://sd.toneden.io/production/toneden.loader.js' var entry = document.getElementsByTagName('script')[0]; entry.parentNode.insertBefore(script, entry); }()); ToneDenReady = window.ToneDenReady || []; ToneDenReady.push(function() { ToneDen.player.create({''enter code here'' dom: '#player', urls: [''https://soundcloud.com/reginaspektor'' ] }); });