Go Back   Serif Software Forums > Design and Publishing > WebPlus

Notices

WebPlus Questions about using WebPlus for website design

 
 
Thread Tools Display Modes
Old 20th February 2012, 08:49 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 Method - Fluid Background with options of Fade In/Out

The background will resize to fit the browser window and optionally can be faded in or out when page loads. Uses a small jquery script and tested with jquery libraries from 1.2.4 to 1.6.4, so if you are using a jquery plugin the background can use the same library.

See a demo here

Posted to tidy up three recent threads and to improve the final solution by adding opacity and fade-out capability.
EDIT: The hyperlinks for the following three threads have been removed to prevent confusion.
Background Fade In.
Resizing background image to fit browser.
"Bgstretcher" and "slicebox" on the same page.

EDIT: This new attached file is updated and in X6 format but should transfer to any version. Anyone having difficulty can always copy all thats required from the demo.

Joe

EDIT: Script amended in attached file
Attached Files
File Type: wpp Fluid Background X.wpp (230.8 KB, 1041 views)

Last edited by Clitheroe Kid; 28th December 2012 at 08:04 AM.
Clitheroe Kid is offline  
Old 20th February 2012, 08:51 PM   #2
mjh
The one and only mjh
 
mjh's Avatar
 
Join Date: Feb 2009
Location: Michigan USA
Posts: 74,639
mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)
Default Re: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by Clitheroe Kid View Post
The background will resize to fit the browser window and optionally can be faded in or out when page loads. Uses a small jquery script and tested with jquery libraries from 1.2.4 to 1.6.4, so if you are using a jquery plugin the background can use the same library.

See a demo here

Posted to tidy up three recent threads and to improve the final solution by adding opacity and fade-out capability.

Background Fade In



Resizing background image to fit browser

"Bgstretcher" and "slicebox" on the same page

The attached file is in X4 format but should transfer to X5. Anyone having difficulty can always copy all thats required from the demo.

Joe


__________________
---------------
T9900, 8 GB RAM, 512 vidram, WIN 7 Ult 64-bit - Chrome
mjh is offline  
Old 3rd October 2012, 04:51 AM   #3
borse63
New Member
 
Join Date: Nov 2010
Location: NY
Posts: 18
borse63 is on a distinguished road
Default Re: Method - Fluid Background with options of Fade In/Out

Can anyone help.. Ive been trying for months for a client to get these two pictures as a full background image. They just dont seem to work ive tried every code I can find along with editing the codes etc.

this is the website I'm making http://newjerseysfinest.com/public_html/test/

I need two of the pages to be fixed to work with a full background. The other ones work because the image is zoomed basically.

I've attached the two images. If anyone I mean anyone can help me out and tell me what size to make the image, the code that will work on all browseers including mac, and show me an example the final product I would greatly appreciate it.

or any other options anyone can think of to help!!!!

I woul dlike basically the whole image to be displayed or at least the ,main content in the images I don't mind some cropping but not 200% zoom to fill the background. I also dont care if the code is perfect as long as it works and looks good.

Thanks so much,

MIKE
Attached Thumbnails
Click image for larger version

Name:	CONTACTUS3.jpg
Views:	213
Size:	162.5 KB
ID:	36198   Click image for larger version

Name:	60006000.jpg
Views:	212
Size:	137.7 KB
ID:	36199  
borse63 is offline  
Old 3rd October 2012, 05:41 AM   #4
djinn
Regular Member
 
Join Date: Dec 2010
Posts: 302
djinn is on a distinguished road
Default Re: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by borse63 View Post
Can anyone help.. Ive been trying for months for a client to get these two pictures as a full background image. They just dont seem to work ive tried every code I can find along with editing the codes etc.

this is the website I'm making http://newjerseysfinest.com/public_html/test/

I need two of the pages to be fixed to work with a full background. The other ones work because the image is zoomed basically.

I've attached the two images. If anyone I mean anyone can help me out and tell me what size to make the image, the code that will work on all browseers including mac, and show me an example the final product I would greatly appreciate it.

or any other options anyone can think of to help!!!!

I woul dlike basically the whole image to be displayed or at least the ,main content in the images I don't mind some cropping but not 200% zoom to fill the background. I also dont care if the code is perfect as long as it works and looks good.

Thanks so much,

MIKE
Removed my answer, just realised what the page is doing and my answer was waaaay off - sorry!

Addendum: widescreen sort of ratio is best I think - this...

http://www.petitesites.co.uk/stretchbg/

Uses this image which scales nicely with browser resizing.....

http://www.petitesites.co.uk/stretchbg/img-05.jpg

HTH
__________________
Slàinte....

Last edited by djinn; 3rd October 2012 at 06:23 AM. Reason: Didn't put enough effort in first time round ;-)
djinn is offline  
Old 3rd October 2012, 07:08 AM   #5
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: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by borse63 View Post
Can anyone help.. Ive been trying for months for a client to get these two pictures as a full background image. They just dont seem to work ive tried every code I can find along with editing the codes etc.

this is the website I'm making http://newjerseysfinest.com/public_html/test/

I need two of the pages to be fixed to work with a full background. The other ones work because the image is zoomed basically.

I've attached the two images. If anyone I mean anyone can help me out and tell me what size to make the image, the code that will work on all browseers including mac, and show me an example the final product I would greatly appreciate it.

or any other options anyone can think of to help!!!!

I woul dlike basically the whole image to be displayed or at least the ,main content in the images I don't mind some cropping but not 200% zoom to fill the background. I also dont care if the code is perfect as long as it works and looks good.

Thanks so much,

MIKE
Mike,

As I pointed out in your previous posts on this very same issue. Your original image of the the two women has a ratio of 1:1 and I see that you have added another image with a ratio of 4:5. Converting these image ratio's to aspect ratio's of between 4:3 and 16:9 without much loss of feature is a mathematical impossiblity.

I did at the time suggest that within photoshop or any other imaging software, try to add or stitch background to your images to physically extend them closer to the required aspect ratio. Did you ever try it?

Joe
Clitheroe Kid is offline  
Old 3rd October 2012, 09:52 AM   #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: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by borse63 View Post
Can anyone help..


or any other options anyone can think of to help!!!!

I woul dlike basically the whole image to be displayed or at least the ,main content in the images I don't mind some cropping but not 200% zoom to fill the background. I also dont care if the code is perfect as long as it works and looks good.

Thanks so much,

MIKE
This same discussion is running in two threads

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

Joe
Clitheroe Kid is offline  
Old 23rd October 2012, 04:22 PM   #7
Rkive
Regular Member
 
Rkive's Avatar
 
Join Date: Aug 2012
Location: London
Posts: 52
Rkive is on a distinguished road
Default Re: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by Clitheroe Kid View Post
The background will resize to fit the browser window and optionally can be faded in or out when page loads. Uses a small jquery script and tested with jquery libraries from 1.2.4 to 1.6.4, so if you are using a jquery plugin the background can use the same library.

~ snip...

Joe
Hi Joe,

I don't know what's happening but in the sample you posted (Fluid Background.wpp) the first page of the sample (Fade in on Page load) the background is not fixed. It scrolls with the contents.

Is that a problem on my computer only? I've been looking at the code you posted on the instructions page but I'm getting more and more confused.

How can I make the first page background fixed?

Sorry, any help please?

Rkive
Rkive is offline  
Old 23rd October 2012, 04:49 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: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by Rkive View Post
Hi Joe,

I don't know what's happening but in the sample you posted (Fluid Background.wpp) the first page of the sample (Fade in on Page load) the background is not fixed. It scrolls with the contents.

Is that a problem on my computer only? I've been looking at the code you posted on the instructions page but I'm getting more and more confused.

How can I make the first page background fixed?

Sorry, any help please?

Rkive
What a mistake from me, appologies to you and others who have downloaded this file. I will replace the file with a newer version.

Paste this into the stylesheet css, just above z-index:-1;

Code:
position:fixed;
It appears in the instructions but somehow I left it off the actual file.

Joe
Clitheroe Kid is offline  
Old 23rd October 2012, 05:30 PM   #9
Rkive
Regular Member
 
Rkive's Avatar
 
Join Date: Aug 2012
Location: London
Posts: 52
Rkive is on a distinguished road
Default Re: Method - Fluid Background with options of Fade In/Out

Thank you Joe



Oh can you add the CSS only background in the new ameded sample (like in the link you posted? )

Thank you very much!
Rkive is offline  
Old 23rd October 2012, 06:41 PM   #10
Mort11
Message imported from old Serif Forum
 
Posts: n/a
Default Re: Method - Fluid Background with options of Fade In/Out

Hi Joe,

I love your background image site and would like to add a background gallery but there is no code for that on the instruction/install page.

Can you help?

Many thanks,

Mort
 
Old 23rd October 2012, 06:55 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: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by Mort11 View Post
Hi Joe,

I love your background image site and would like to add a background gallery but there is no code for that on the instruction/install page.

Can you help?

Many thanks,

Mort
Hi Mort,

Would 'Supersized' (in my sig below) do what you need, or do you want the gallery from the background demo page?

Joe
Clitheroe Kid is offline  
Old 23rd October 2012, 08:45 PM   #12
Mort11
Message imported from old Serif Forum
 
Posts: n/a
Default Re: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by Clitheroe Kid View Post
Hi Mort,

Would 'Supersized' (in my sig below) do what you need, or do you want the gallery from the background demo page?

Joe
Hi Joe,

The supersized gallery is great but is stopping a slider (in a panel set to side of page) that I'm using as a slide out menu, from working.
 
Old 24th October 2012, 02:10 PM   #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: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by Mort11 View Post
Hi Joe,

The supersized gallery is great but is stopping a slider (in a panel set to side of page) that I'm using as a slide out menu, from working.
Hi Mort,

I've tried a slider on all the backround gallery's that I have and when both are on the page, either one or the other does not work. I have previously included jquery noconflict in the file for Supersized, so it is not a jquery conflict. Sorry I cant help help you with this one.

Joe
Clitheroe Kid is offline  
Old 24th October 2012, 04:15 PM   #14
Mort11
Message imported from old Serif Forum
 
Posts: n/a
Default Re: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by Clitheroe Kid View Post
Hi Mort,

I've tried a slider on all the backround gallery's that I have and when both are on the page, either one or the other does not work. I have previously included jquery noconflict in the file for Supersized, so it is not a jquery conflict. Sorry I cant help help you with this one.

Joe
No worries Joe. It's not essential that the background is a gallery.

Thanks for your help
 
Old 24th October 2012, 04:25 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: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by Mort11 View Post
No worries Joe. It's not essential that the background is a gallery.

Thanks for your help
Thanks Mort.



Joe
Clitheroe Kid is offline  
Old 24th October 2012, 09:28 PM   #16
MTAHAKHALID
New Member
 
Join Date: Oct 2012
Posts: 5
MTAHAKHALID is on a distinguished road
Default Re: Method - Fluid Background with options of Fade In/Out

sir can you tell me where to copy these this code in css in webplus i can find html and css edtor in wenplus please guide me where to add these kind of code thanks
MTAHAKHALID is offline  
Old 25th October 2012, 06:59 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: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by MTAHAKHALID View Post
sir can you tell me where to copy these this code in css in webplus i can find html and css edtor in wenplus please guide me where to add these kind of code thanks
Hello and welcome to the forum,

Download the file and follow the instructions of how to install. To access the HTML area use either Alt-s, or Right click>Attach HTML. Here you will see all the headings mentioned in the instructions.

Joe
Clitheroe Kid is offline  
Old 25th October 2012, 09:17 AM   #18
MTAHAKHALID
New Member
 
Join Date: Oct 2012
Posts: 5
MTAHAKHALID is on a distinguished road
Default Re: Method - Fluid Background with options of Fade In/Out

thanks my friend one more thing can you tell me i want my images to be edge to edge fix like there is a website the botton of booknow is fix to edge im trying to do that see this website
http://www.hotelzaza.com/
MTAHAKHALID is offline  
Old 25th October 2012, 09:41 AM   #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: Method - Fluid Background with options of Fade In/Out

Quote:
Originally Posted by MTAHAKHALID View Post
thanks my friend one more thing can you tell me i want my images to be edge to edge fix like there is a website the botton of booknow is fix to edge im trying to do that see this website
http://www.hotelzaza.com/
If you want a feature like the book now, you need to create a sliding panel which is fixed to the edge.

Search the forum for sliding panels or sliding forms.

Joe
Clitheroe Kid is offline  
Old 25th October 2012, 01:05 PM   #20
Rkive
Regular Member
 
Rkive's Avatar
 
Join Date: Aug 2012
Location: London
Posts: 52
Rkive is on a distinguished road
Default Re: Method - Fluid Background with options of Fade In/Out

Once again Joe... Thank you very much for this

Rkive is offline  
 

Bookmarks

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
WebPlus X5: Background Fade In edwinadside WebPlus 8 9th February 2012 01:19 PM
Method for resizing background image to fit browser window Clitheroe Kid WebPlus 10 3rd February 2012 04:06 PM
WebPlus X5: Fluid Background Image siege WebPlus 16 2nd November 2011 11:54 PM
WebPlus X5: Change the Template background fade length seulater WebPlus 11 16th June 2011 07:34 PM
WebPlus X2: fade in background image - javascript problem Neil J WebPlus 8 4th January 2010 07:03 PM


All times are GMT +1. The time now is 09:12 AM.