Go Back   Serif Software Forums > Design and Publishing > WebPlus

Notices

WebPlus Questions about using WebPlus for website design

 
 
Thread Tools Display Modes
Old 19th August 2013, 01:16 PM   #1
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default X7, X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

This simple one line will change a fixed size image in Page Properties, to a fluid (responsive) image.

This uses css3 and may not be viewable in older browsers.

Right click on page>Page Properties>Background. Change "Use Master Page Background" to "Use Page Background". Click Add, and insert your background image.

Copy the following line

HTML Code:
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover;
Right click page>Attach HTML and scroll down until you come to the line beginning <body text="#000000" Scroll to the right and paste the line immediately before /*Master Page Body Style*/


For X7 Only Right Click>View>HTML Source. Scroll down until you come to <body, scroll to the right and paste the line immediately before, or in place of /*Page Body Style*/ or /*Master A Body Style*/ X7 example is not included in the attached file.


The image in the attached file is 1000px x 512px and may look odd in design view, but preview in browser to see the effect.

Joe
Attached Files
File Type: wpp Fluid Bg using cover.wpp (175.9 KB, 789 views)

Last edited by Clitheroe Kid; 23rd December 2013 at 08:05 AM. Reason: X7 added
Clitheroe Kid is offline  
Old 19th August 2013, 02:19 PM   #2
bruno
Regular Member
 
Join Date: May 2010
Location: Lisbon, Portugal
Posts: 93
bruno is on a distinguished road
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Excellent!
bruno is offline  
Old 19th August 2013, 03:34 PM   #3
Lon in NWArkansas
Master
 
Lon in NWArkansas's Avatar
 
Join Date: Feb 2009
Location: Bella Vista, AR
Posts: 12,688
Lon in NWArkansas is a splendid one to beholdLon in NWArkansas is a splendid one to beholdLon in NWArkansas is a splendid one to behold
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Yeah, like that one, Joe. I've downloaded the file, reviewed it, and will give it a play this week.


Lon in California
__________________
Dell XPS 8300 | Win7 Home Premium 64-bit | Core i7-2600 @ 3.4ghz w/8GB RAM | 1GB AMD Radeon 6450 Graphics
Lon in NWArkansas is offline  
Old 19th August 2013, 06:55 PM   #4
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
Originally Posted by bruno View Post
Excellent!
Quote:
Originally Posted by Lon in California View Post
Yeah, like that one, Joe. I've downloaded the file, reviewed it, and will give it a play this week.


Lon in California
Hi guys, and thanks for your comments,

Should be slightly easier to implement and may help file size by the fact that you can use a smaller background image.

Joe
Clitheroe Kid is offline  
Old 21st December 2013, 01:28 AM   #5
Gary-ser
New Member
 
Join Date: Dec 2013
Posts: 3
Gary-ser is on a distinguished road
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Hi Clithore,

Is there any way to:

1) Make this work with the Fluid Slider

(It seems like after using the fluid slider, the options to paste where you instruct for this are changed)

2) Cut the background image down in height, and position it at the bottom? (Like a footer)?

Thanks
Gary-ser is offline  
Old 21st December 2013, 04:38 PM   #6
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
Originally Posted by Gary-ser View Post
Hi Clithore,

Is there any way to:

1) Make this work with the Fluid Slider

(It seems like after using the fluid slider, the options to paste where you instruct for this are changed)

2) Cut the background image down in height, and position it at the bottom? (Like a footer)?

Thanks
What version of Webplus are you using? It does work with the camera slider.

You can insert a footer image using Page properties>backgrounds, or a panel. See Webplus help files.

Joe
Clitheroe Kid is offline  
Old 21st December 2013, 06:32 PM   #7
Gary-ser
New Member
 
Join Date: Dec 2013
Posts: 3
Gary-ser is on a distinguished road
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Hi Joe,

I am using X7.

When I search for "*Master Page Body Style*" in your project it is there. In mine it is not. I have 3 Masters and already implemented the slider which works great.

The forum will not allow me to upload my 1.7MB .wpp file.

I think when I have learned a bit more maybe I will see my error.

Until then I'll just read, unless some kind soul wanted to link to a .wpp file that had both the fluid slider and the fluid background...

Best,

Gary
Gary-ser is offline  
Old 21st December 2013, 06:51 PM   #8
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
Originally Posted by Gary-ser View Post
Hi Joe,

I am using X7.

When I search for "*Master Page Body Style*" in your project it is there. In mine it is not. I have 3 Masters and already implemented the slider which works great.

The forum will not allow me to upload my 1.7MB .wpp file.

I think when I have learned a bit more maybe I will see my error.

Until then I'll just read, unless some kind soul wanted to link to a .wpp file that had both the fluid slider and the fluid background...

Best,

Gary
Gary,

In X7 Right Click>View>HTML Source.

Scroll down until you come to <body, scroll to the right and paste the line immediately before, or in place of /*Page Body Style*/ or /*Master A Body Style*/

Joe
Clitheroe Kid is offline  
Old 21st December 2013, 06:56 PM   #9
Gary-ser
New Member
 
Join Date: Dec 2013
Posts: 3
Gary-ser is on a distinguished road
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Joe,

OK thanks, I guess that X7 code was a little different. When I search for /*Page Body Style*/ or /*Master A Body Style*/ I DO find them!

Many thanks for the great community support Joe.

Gary
Gary-ser is offline  
Old 21st December 2013, 07:05 PM   #10
AlfredP
Guru
 
AlfredP's Avatar
 
Join Date: Feb 2009
Location: Scotland, UK
Posts: 26,444
AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
Originally Posted by Gary-ser View Post
Joe,

OK thanks, I guess that X7 code was a little different. When I search for /*Page Body Style*/ or /*Master A Body Style*/ I DO find them!

Many thanks for the great community support Joe.

Gary
Gary,

Variants such as '/*Master A Body Style*/' and '/*Master B Body Style*/' are new in X7: in older versions they're all just '/*Master Page Body Style*/', with the Master Page letter indicated in a tooltip when you mouse over the placeholder. The '/*Page Body Style*/' placeholder should be present in any recent version of WebPlus.

Alfred
__________________
Windows 10® Home 64-bit; Intel® Core™ i3-4010U CPU; 4GB DDR3L RAM; Intel® HD Graphics 4400
La perfection est atteinte non quand il ne reste rien à ajouter, mais quand il ne reste rien à enlever.
(Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away.)
- Antoine de Saint-Exupéry (1900-1944)
AlfredP is offline  
Old 21st December 2013, 07:31 PM   #11
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
Originally Posted by Gary-ser View Post
Joe,

OK thanks, I guess that X7 code was a little different. When I search for /*Page Body Style*/ or /*Master A Body Style*/ I DO find them!

Many thanks for the great community support Joe.

Gary
My pleasure



Joe
Clitheroe Kid is offline  
Old 22nd December 2013, 01:32 AM   #12
Val100
Member
 
Join Date: Sep 2011
Posts: 35
Val100 is on a distinguished road
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Wow! It seems like I have been waiting forever to be able to do this properly/easily. Thank you so much!

Val
Val100 is offline  
Old 22nd December 2013, 08:01 AM   #13
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
Originally Posted by Val100 View Post
Wow! It seems like I have been waiting forever to be able to do this properly/easily. Thank you so much!

Val
Glad it's been of help to you.

Joe
Clitheroe Kid is offline  
Old 7th February 2014, 07:22 PM   #14
sherrif
Regular Member
 
Join Date: Oct 2009
Posts: 395
sherrif is on a distinguished road
Default Re: X7, X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
For X7 Only Right Click>View>HTML Source. Scroll down until you come to <body, scroll to the right and paste the line immediately before, or in place of /*Page Body Style*/ or /*Master A Body Style*/ X7 example is not included in the attached file.
Hi Joe,
Where exactly can i find "master a body page" or "page body style in x7? I understand in the html view but i cant find them?
__________________
Cogito ergo sum

streekgerechten
renovatie
parket laminaat
sherrif is offline  
Old 7th February 2014, 08:10 PM   #15
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X7, X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
Originally Posted by sherrif View Post
Hi Joe,
Where exactly can i find "master a body page" or "page body style in x7? I understand in the html view but i cant find them?
Scroll down the page until you get to the tag <body
At that tag scroll to the right and you will see /*Page Body Style*/ and /*Master A Body Style*/

Joe
Clitheroe Kid is offline  
Old 7th February 2014, 11:21 PM   #16
MarkJC
Regular Member
 
Join Date: Feb 2013
Location: Reno, NV
Posts: 52
MarkJC is on a distinguished road
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Joe,

Can I make this scroll-able with page?

-Mark C
MarkJC is offline  
Old 8th February 2014, 07:57 AM   #17
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
Originally Posted by MarkJC View Post
Joe,

Can I make this scroll-able with page?

-Mark C
No. If you make an image fill the screen thats what it does. It can't fill the srcren if its scrolling. To scroll a background it needs to be larger than the screen(s).

Joe
Clitheroe Kid is offline  
Old 27th February 2014, 04:34 PM   #18
MarkJC
Regular Member
 
Join Date: Feb 2013
Location: Reno, NV
Posts: 52
MarkJC is on a distinguished road
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
Originally Posted by Clitheroe Kid View Post
No. If you make an image fill the screen thats what it does. It can't fill the srcren if its scrolling. To scroll a background it needs to be larger than the screen(s).

Joe
Hi Joe,
I was thinking like this site:
http://demo.codestag.com/?theme=crux
The second picture keeps it's size when you zoom out and scrolls with the page. Is this possible in Webplus X7?

Mark JC
MarkJC is offline  
Old 27th February 2014, 07:27 PM   #19
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Quote:
Originally Posted by MarkJC View Post
Hi Joe,
I was thinking like this site:
http://demo.codestag.com/?theme=crux
The second picture keeps it's size when you zoom out and scrolls with the page. Is this possible in Webplus X7?

Mark JC
Have a look at this thread, you may be able to adapt it to your needs. There are various sets of instructions throughout the thread.

If you need to ask questions about it, post them on this that thread.

http://forums.serif.com/showthread.php?t=126682


Joe
Clitheroe Kid is offline  
Old 12th April 2014, 08:40 AM   #20
sluises
New Member
 
Join Date: Aug 2011
Location: Durango, Colorado
Posts: 2
sluises is on a distinguished road
Default Re: X5, X4 Tutorial 2 for Fluid Background, but using Webplus Page Properties

Thanks Clitheroe Kid! I was very nervous to cut/paste HTML, because I don't speak computer code, but your instructions worked perfect.
sluises is offline  
 

Bookmarks

Tags
fluid background image, responsive image

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Method - Fluid Background with options of Fade In/Out Clitheroe Kid WebPlus 44 14th May 2014 01:05 PM
WebPlus X6: Problem with a Fluid Background hepwortha WebPlus 10 26th November 2012 04:09 PM
WebPlus X6: How to make fluid background scrollable? Sami WebPlus 6 9th October 2012 04:13 PM
WebPlus X5: Fluid Background Image siege WebPlus 16 2nd November 2011 11:54 PM
WebPlus X5: WebPlus Tutorial: build a Facebook fan page using WebPlus antoniotrotta WebPlus 1 12th September 2011 10:42 PM


All times are GMT +1. The time now is 01:16 PM.