page background

[mako]

Hello

I added a page background but the image does not show in the main page area. It only shows at the bottom of the site. Why? How can I make the image show in the main content area of the page.

Screenshot http://i.share.pho.to/e9c6c5a2_l.png

Page http://www.listaxxx.com/tyc/

Thanks

[Rui Guerreiro – SUPPORT]

Hi,

The background in that page only works if you choose the Boxed Layout for the website.

-Rui

[Diana]

Hi Rui,

I think I’m having a similar problem? I’ve added a page background image and put my theme on “boxed content” and taken it off “responsive” setting yet on iPhone and iPad the outer image does not show up? Only shows up on desktop.

Here is a link: http://www.dianahancock.com

Thanks!

[Rui Guerreiro – SUPPORT]

Hi Diana,

That’s the default way Flexform works in Boxed mode. When shrinking the screen size the borders will disappear so that only the content of the page is displayed.

If you had the borders in mobile view it would left very few space to display the content.

-Rui

[Diana]

Gotcha. Thanks! Just thought I’d check… 🙂

[mako]

Is there any other way to add a photo to the background of the page if I am not working on Boxed Layout ?

[Kyle – SUPPORT]

Hi

Yes you need to use this css:

#main-container {
  background: url("http://www.listaxxx.com/wp-content/uploads/2014/08/background.png") no-repeat center top;
}

– Kyle

[mako]

this will add the image to all pages, right? How do I add it only to one particular page?

[Kyle – SUPPORT]

You will need to get the page id and use:

.page-id-1711 #main-container {
  background: url("http://www.listaxxx.com/wp-content/uploads/2014/08/background.png") no-repeat center top;
}

– Kyle

[mako]

How can I make the image width and height 100% ?

[Mohammad – SUPPORT]

Hi,
Please use this complete code:-

.page-id-1711 #main-container{background: url("http://www.listaxxx.com/wp-content/uploads/2014/08/background.png") no-repeat center top;
background-size: 100% 100%;
}

Thanks 🙂
With Best Regards
Mohammad