Jump to content
brightideas

Supersize option for background image not working properly.

Recommended Posts

brightideas    0
brightideas

You all need to look at the supersize option and script. The large image is now just hiding behind the main content area when I set it to supersize.

When I uncheck supersize, it goes to the regular size which is way larger than what I want.

Here's the site with the supersize option on: http://battle.brightideasgroup.com

And, yes, I have the site set to fixed width mode.

Thanks!

Share this post


Link to post
Share on other sites
Simon    247
Simon

There is a javascript error on the page, could be stopping the supersize as that likes to run last.

main.js something to do with maps?

Share this post


Link to post
Share on other sites
brightideas    0
brightideas

I have the Store Locator plugin on this page that uses maps:

http://battle.brightideasgroup.com/locate-a-dealer/

Please don't tell me it's that because I have 150 locations to input for that plugin and it's the only one that could do what I needed it to do. I just updated it when I updated the theme a few minutes ago.

Share this post


Link to post
Share on other sites
Simon    247
Simon

I cant see any background image anywhere.

Share this post


Link to post
Share on other sites
brightideas    0
brightideas

Yep, because it's behind the main content. I see the small sliver of it above the main content. Like I said, supersize shrunk it so you can't see it.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi, I'm seeing a rather nice blue background stretched perfectly. Is this browser related or working everywhere?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brightideas    0
brightideas

That's because I turned the supersize off before the client saw the site and said, "WTF?" (They really wanted the tree background.) I downloaded the files this evening to move the site to a new server tomorrow and I wanted to get it in working condition before the move.

That background you see is 2400x2400 and not properly sized for the screen. The left side of the photo is a large tree trunk and it's usually a little more obivious that there's an entire forest there.

The background is cropped halfway through the tree trunk from the photo on this page: http://battle.brightideasgroup.com/history/green-statement/

Unless it's a conflict with the store locator plug-in, the supersize doesn't seem to be working properly. I'll play around with it after the move to see if it corrects itself.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Can't you temporarily deactivate the plugin to test?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brightideas    0
brightideas

I turned off the option for the plugin to load the javascript on every page. Still didn't fix the problem. Having another problem... gonna post that, too.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi,

I've just had a look at the site and the supersize isn't on at the moment. I've played about with the css to see if anything can help with the supersize off. Try the below, its not perfect but its sizing the picture better. Result comes out like this http://screencast.com/t/A5PH8BSXrN


.full_width #page .page-canvas, body.fixed_width {

    background-size: cover;

}


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
paul_saccone    0
paul_saccone

I'm having the same exact problem on a brand new install (local development system) with only PageLines and Simplicate installed.

 

When I check supersize the image is behind the content.  I can make the content transparent, but I shouldn't have to do that to get this to work.

 

Any ideas?

 

Thanks,

Paul

 

Share this post


Link to post
Share on other sites
paul_saccone    0
paul_saccone

I figured it out, but would love somebody to explain this to me.  

 

When I put CSS in my style.css using Pagelines Customize plugin it doesn't work. 

When I put the SAME code in the Pagelines Admin Custom Code section it DOES work.  Weird.

 

Here's the code I used to reveal the supersized bg image:

#page .page-canvas {
  	background-color: rgba(0, 0, 0, 0);
}



Share this post


Link to post
Share on other sites
paul_saccone    0
paul_saccone

Please ignore my previous message.

 

In case anyone was wondering, the Pagelines Customize plugin works MUCH better if you actually ACTIVATE it.  Doh!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Thanks for informing us that the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • jacobtippett
      By jacobtippett+
      Hi,
      I am trying to get the background image of the Revslider to be clickable and redirect to a link.
      Does anyone know how this is possible?
    • martinjrob
      By martinjrob+
      I am having problems in figuring out how to make the sections transparent so it shows 1 background color, Image.
      I have made all sections with no background colour as it suggests in pagelines docs
      this is the domain name http://www.socialwebservice.co.uk/ and this is how i would like it to look http://ecologysurveysinnorfolk.co.uk/
       
      Any help will be much appreciated. 
    • abuzzelli
      By abuzzelli+
      Trying to adjust the position of the background image on http://churchofwolves.com/. I need the wolf background to move over to the left on mobile versions so it can be seen. Here's the code I'm using and it's not working. I've tried a bunch of different things. Getting frustrated. Any advice?
      @media (max-width: 768px) { .home .site-wrap{ background: url(http://churchofwolves.com/wp-content/uploads/2015/06/Church-of-Wolves-bkgd1.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 100% 0%; } }  
    • zetanet
      By zetanet+
      I can insert three text box in a page, of course.
      I'm not able to set three different background colors to each text box.
      I would like a result as the attached picture.
      How do I do this?

×