full screen page background images

[skaalyk]

Hello Andrii,

I’m having difficulty with the sizing of background images on specific pages. When I set a background image via ‘Theme Options’ the image is scaled to the width of the page; however, when I set the same image as a background image under the ‘Pages’ section the sizing is much different.

Is there a way to have the ‘Background Image’ for that specific page, span the whole width of the page?

Thanks so much,

Kjael

[satori]

Hey Kjael,

could you please provide the URL of the particular page, I need to see the code to give a meaningful advice ;) Thanks!

Best,
Andrii / Satori Studio

[skaalyk]

You are awesome, Andrii. To say you go above and beyond to service your clients is a huge understatement. THANK YOU!

http://new.capitallendingsolutions.com/

[satori]

Hey Kjael,

I’ve investigated the problem and it seems to be my mistake: a certain line of CSS should have been moved below another one :) in any case, here’s the fix, please unzip the archive and upload the resulting file into the theme folder. Let me know if this fixes the bug!

Best,
Andrii / Satori Studio

[skaalyk]

Hi Andrii,

Background images are still not filling the page frame 100%. I’ve tried playing with the dimensions of the images themselves, but I’m concerned about the website displaying properly across devices.

Are you familiar with any custom css that would cause each respective page’s background image to fill the frame? Here’s the site for reference – new.capitallendingsolutions.com.

In addition, here’s a resource I came across on the topic – http://webdesign.about.com/od/css3tutorials/a/browser-size-cover.htm

Thanks so much for the help,

Kjael

[satori]

Hey Kjael,

the “background-size: cover” is indeed the solution that I’m already using in the theme ;) in case you meant the labyrinth images, they both have the “background-size: cover” now after you’ve updated the file I’ve sent you. The first labyrinth image doesn’t reach the bottom of the respective section because it is not tall enough – please try making it taller, so that there is some extra room for the parallax effect to roll out, or turn the parallax off on this section (the “Parallax background” option in the “Page settings” box in the page editor mode.

Please let me know if I missed something!

Sincerely,
Andrii / Satori Studio

[Author]

Posts