Jump to content

Archived

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

KimAnn03

Background image issue

Recommended Posts

KimAnn03

I have a bit of a conundrum with the background image. I really like the way it looks and how responsive it is when I check off the box "fit image to page."

The problem is that the image loads everytime you go to a different page and there's a lag and the screen flashes white. At one point James B told me that I could alleviate this issue if I were to just uncheck "fit image to page". ANd it does work however I don't like the way it looks nearly as much.

 

SO my question is is there another way to get it to look like it does when "fit image to page" wihout the lag in load time?

 

http://dev.thecosmicpath.com

 

Share this post


Link to post
Share on other sites
greenfly
What is the file size of the image you are you using for the background?

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
KimAnn03

2000 × 1040

 

I tried to make it bigger in photoshop but it just looked distorted. I went up to 3000 px.

Share this post


Link to post
Share on other sites
greenfly
How big is the 'file size' in Kb/mb gigawatts??

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
KimAnn03

Martin Davies any word on this? Or anyone for that matter I am still awaiting a reply on this.

 

thanks

Share this post


Link to post
Share on other sites
Aires
Hi, have you tried changing the background with CSS. I have noticed that background image loads faster when it done with CSS.

Hope this helps

Sent from my Lumia 900 using Tapatalk

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
KimAnn03

Thanks for the advice Aires . How would I do this via CSS?

Share this post


Link to post
Share on other sites
James B

Hi there, to apply an image to the background of the page using css you'd need to do like the following;

 

#site {
    background: url("http://www.path-to-your-image.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0) ;
}

 

There are additional css commands you can apply to the background image to make it do different things, see http://www.w3schools.com/css/css_background.asp for more examples.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
KimAnn03

James B unfortunately I am still in a pickle with this one. CSS does the same as if I had fit image to page unchecked.

 

So here's where I am....with out "fit image to page" on screens larger than 21'' I get white space and also I have to add color to fill in the gaps that appear at the top or bottom (depending on the vertical position)

 

It looks PERFECT with "fit image to page" checked off but if you peruse around my site for a bit, especially THIS PAGE with all the boxes, there is a skip in the background loading. It is soooo annoying. Is there any way for this to be fixed? CSS did not work, unchecking the fit to page doesn't work as I mentioned...

 

(if need be you can see my bg image size and information in the thread above).

 

please advise and please move around my site some so you get a feel for the annoying white screen that pops up with each new page click :(

Share this post


Link to post
Share on other sites
Danny

You can try James method, but include the following.

 

background-size: cover;

 

So the CSS looks like this:

 

#site {
    background-image: url("http://www.path-to-your-image.jpg");
    background-size: cover;
}
 
See if that works.
 
In my opinion, your issue this is likely caused by either poor hosting or the image is far too large, try reducing its size to as small as possible.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
KimAnn03

Thanks Danny still the same issue.

 

I added the CSS you recommended and it alleviated the page skip when it turns white but the image looked distorted and blown up.

 

Then I thought it was a great idea to lower the image size...i went from 2000px all the way down to 500 and it didn't make any difference in the skipping (not to mention it looks blown up).

 

You can see for yourself here on my dev site the image is at 500px:

http://dev.thecosmicpath.com/

 

On my live site you can test it against the background image being much larger:

http://www.thecosmicpath.com/

 

please advise and thanks

Share this post


Link to post
Share on other sites
Danny

When I mentioned reducing the size of the image, I wasn't referring to its dimensions, but actually it's file size.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
KimAnn03

Danny Ok I will try this and let you know how it goes....also you may be onto something with the hosting. I tried the image on my personal DMS site (which is on a diff host) and yes it does skip a beat when navigating but probably about a quarter of what's happening here.

Share this post


Link to post
Share on other sites
KimAnn03

I called my host- they said that the core style sheet is not being loaded first. There are like 4 or 5 stylesheets loading before the core one and that is why it takes so long for the background image to load. Can you advise on this? Let me know if you want my cpanel info.

 

Kim

Share this post


Link to post
Share on other sites
KimAnn03
Hi is somebody looking into this? I really need support and to resolve this.
I looked at how the style sheets are set up and the background image loads almost last. It's like 3rd from the bottom. I'd really appreciate assistance soon it is really messing up the enjoyment of our trafficked site.

Please advise

Share this post


Link to post
Share on other sites
Danny

OK, I've just this moment uploaded your image to my test site which is locally hosted via MAMP Pro and I do have any issue with your image loading. This means that your host isn't the greatest, I can tell this as it takes me about 2-4 seconds for your site to load and my internet speed is 152Mbt.

 

http://screencast.com/t/kdm5hJHu2


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
KimAnn03

Danny Please see this:

http://tools.pingdom.com/fpt/#!/dwjAwK/http://www.thecosmicpath.com/

 

As I mentioned before the stylesheets load the bg image close to last....testing it on your site will not address the order of the stylesheets loading because you do not have all the plugins etc that we are loading. I was told by my host that this is the theme calling this image after all the other things before it. I REALLY NEED RESOLVE ON THIS. I can't keep going back and forth like this waiting 2 days for an answer. I've been VERY clear about the issue yet nobody is looking at the stylesheets. It is called bg.jpg and is 5th from the bottom.

Share this post


Link to post
Share on other sites
greenfly

Hello @kim - 

 

if you could create an admin level account for your site and send the credentials to hello @ PageLines dot com along with a link to this topic in the email i will jump on your site and take a look for you. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly

Just a not on how this was resolved 

 

''Your live site uses supersized and WordPress loads the supersized.js jquery script which handles the background image sizing.

Jquery is loaded after the page loads and runs on document.ready. As there are quite a few items to load each time the page loads and WordPress has to load the script for each page.

 

http://www.codeproject.com/Tips/632672/JavaScripts-document-ready-vs-window-load

As i explained previously, the more elements your site loads and the larger the file size of those elements causes the page to load slowly and the 'Page Load' sequence of events and the subsequent loading of the scripts more noticeable. 

I have added responsive image CSS to the site for you and this loads a responsive image without jquery. 

html { 
  background: url(http://dev.thecosmicpath.com/wp-content/uploads/bg-1.jpg) no-repeat center center fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}

/* this removes the white site background that is added after the HTML tag and therefore sits on top */

body .site-wrap {
  background-color:transparent;
}


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
KimAnn03

Martin Davies We are close but this still is not completely resolved, as you know, because I can not use the CSS until it looks ok on mobile. I am still waiting for that piece before I go live with your fix. I know if anybody else has this issue they would also want the mobile responsive piece figured out as well before we could call it resolved. Thanks and REALLY looking forward to getting all the way there so I can fix my live site.

 

Kim

Share this post


Link to post
Share on other sites
jmad

@aires 

Are you saying that adding the photos to a section via CSS is improving performance for your sites...opposed to loading them in to a section as a background?  How does that effect does that have on parallax or photo resizing based on screen size or device?

Share this post


Link to post
Share on other sites
KimAnn03

jmad"] yes it improves performance on the site to add the photo via CSS. Significantly as a matter of fact. I am still waiting for @[member="Martin Davies to provide a solution for mobile responsiveness because even though his solution above renders flawless on the computer it's quite hideous looking on the phone & tablet :/

Share this post


Link to post
Share on other sites
jmad

KimAnn03  

I think you could manually constrain/adjust the image size based on screen size using @media queries.  However, I don't know that that is a great solution and then the question of how to easily take advantage of the cool DMS2 features like the various types of parallax becomes another issue.  

 

Martin Davies"] & @[member="Simon_P"] & @[member="arpowers

I've tested several DMS2 sites compared to some other themes and the transition between portrait and landscape is often much slower for DMS and I don't have resize photos 3x as tall as wide in order for parallax (basic kind) (content on scroll seems to work fine) to work properly.  How is DMS2 handling these images because it seems there are issues?  When is this truly going to be resolved. 

 

As a point of reference.  I have the exact same photos (I think but might have already made taller for DMS) on madskydesign.com/aboutpage/   and madsky.wpengine.com/aboutpage/  you will notice that the phots NOT on DMS are working fine on any size of browser (not mobile as parallax isn't supposed in that theme).  You can also see that text on madsky.wpengine is consistent across browsers and I didn't have to code that in myself so apparently there is a way to include that maybe by reseting CSS at the start or including the CSS in DMS2 (don't know as I'm not a developer).  On the not-DMS site Pinch Zoom is also available on mobile.  Also, to play video in Firefox I don't have todo anything special as the theme takes care of that.  The homepage of madsky.wpengine is a mess as I was testing the speed compared to DMS2 but your welcome to compare (specifically how long it takes to transition from portrait to landscape).

 

Why aren't I using the other theme...well I do but I love the idea of DMS2 and the layout flexibility and spending hours looking at shortcodes isn't fun. I think DMS2 really has come along way but this photo issue and parallax issue have been around forever and simply aren't being resolved.  I have good load times with DMS using WPEngine (I'm going to make another post asking for best DMS2 setup options for speed since documentation is lacking).  Using DMS2, the multiple menu options (including uber menu), the flexible sections, the multiple posts/blog options and the growing number of sections in the store it's possible to create so many great layouts and sites.  I think many of the people using the developer plan hope for a long-term , mutually profitable, consistent and expanding relationship with Pagelines (maybe one where PL develops some killer custom sections that they charge for in addition to premium sections included in the monthly fee).  In order for that to happen we as designers and developers have to be able to deliver sites that are fast, reliable, functional and well cool.  

 

Clients pick up on these speed and function issues and it waste our time trying to work things out that should be working already.  The increasing the photo dimensions I get but then it also increases file size and then slows things down on mobile.

 

On another note, I think it's clear that the Pagelines DMS team isn't giving it's third-party developers a heads up or access to a new stable version in advance enough for them to respond well to your clients and their clients.  Releasing a DMS version where half the add-in components don't work is a tough spot for the developers and for us as users communicating with our clients.  Too many sections still aren't updated or the developers seem to have abandoned them...(Nick was happy to take our money with clearly no intention of supporting DMS2).  

 

This was me addressing parallax and it never got completely answered.  http://forum.pagelines.com/topic/33540-dms2-photo-dimensions-recommended-for-parallax/

 

These are posts mentioning the photo or parallax  not all but several...clearly there is an issue that needs resolved.

 

http://forum.pagelines.com/topic/33175-parallax-and-re-size-pictures-in-mobile-devices/

 

http://forum.pagelines.com/topic/34582-parallax-basics/?hl=parallax

 

http://forum.pagelines.com/topic/29703-parallax-full-width-section-problem-lower-part-picture-showing-on-top/?hl=parallax

 

http://forum.pagelines.com/topic/33695-parallax-scrolling-issue-after-upgrade/?hl=parallax

Share this post


Link to post
Share on other sites

×