Jump to content

Archived

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

bartok

How to Add a Site Background Image Inline

Recommended Posts

bartok
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

Hi, 

 

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

    • fancoder
      By fancoder+
      Hi I can't seem to get the background image for the Tour Guide section to be clear. It is always blurry. Any idea why that is? I am using a high res image. Is it a sizing issue? Thanks 
    • IDdigital
      By IDdigital+
      Hi,
      A site of ours irregularly does not finish loading. The page in question is https://rw360.org/grievance-process/
      In Safari, I'll occasionally get the following error:
      [Error] TypeError: undefined is not an object (evaluating 'a.plModel.init')
          (anonymous function) (site.js:5:91)
          i (jquery.js:2:27455)
          add (jquery.js:2:27750)
          ready (jquery.js:2:29819)
          (anonymous function) (site.js:5)
          Global Code (site.js:5:3421)
      This seems to be a bug in PageLines as far as I can tell. Any suggestions or a fix coming?
      Thanks,
    • 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
      Thanks
      Michael
    • flourishdesignstudio
      By flourishdesignstudio+
      Hello,
      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+
      Hello,
      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
      Problem:
      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.
       
       
       
       
       
       
       
       
×