Go Back   Serif Software Forums > Design and Publishing > WebPlus

Notices

WebPlus Questions about using WebPlus for website design

 
 
Thread Tools Display Modes
Old 3rd July 2013, 09:05 PM   #1
Taste
Regular Member
 
Taste's Avatar
 
Join Date: Feb 2013
Location: UK
Posts: 92
Taste is on a distinguished road
Exclamation Responsive Background + Overlay

Hi Everyone

URGENT QUESTION

I know how to get a resposnive background from here http://forums.serif.com/showpost.php...35&postcount=1

But what i want to do is add an overlay repeating image which is just some small png dots to give it that good effect. I have attached the image but how can i do this with both images and not using the one image?
Attached Images
 
__________________
Taste Digital Marketing
-----------------------------------------------------------------------------------------------
X6: [/COLOR][/B]oldshippub.co.uk
Taste is offline  
Old 3rd July 2013, 09:43 PM   #2
nfc212
Master
 
nfc212's Avatar
 
Join Date: Sep 2009
Location: Cardiff
Posts: 14,898
nfc212 has a reputation beyond reputenfc212 has a reputation beyond reputenfc212 has a reputation beyond reputenfc212 has a reputation beyond reputenfc212 has a reputation beyond repute
Default Re: Responsive Background + Overlay

Save that image as say dots.png.

Open HTML view, press Alt+S

find the second line of the body code, something like:

HTML Code:
<div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:980px;height:1000px; /*Master DIV Style*/ /*Spread DIV Style*/" __AddCode="Master DIV Tag" __AddCode="Spread DIV Tag">
Replace /*Master DIV Style*/ with
Code:
background:url(dots.png) top center;
to look like the following:

HTML Code:
<div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:980px;height:1000px; background:url(dots.png) top center; /*Spread DIV Style*/" __AddCode="Master DIV Tag" __AddCode="Spread DIV Tag">
In File manager select Add Files and navigate to dots.png

It will only be visible in preview not in the workspace.
__________________
Nigel

The Ferret - Using PHP & MySQL to create dynamic Web Plus sites
Sleeping tigers do not concern themselves over the opinions of sheep.
An Independent Forum for web design/development and all things creative.
nfc212 is offline  
Old 3rd July 2013, 09:52 PM   #3
Taste
Regular Member
 
Taste's Avatar
 
Join Date: Feb 2013
Location: UK
Posts: 92
Taste is on a distinguished road
Default Re: Responsive Background + Overlay

Quote:
Originally Posted by nfc212 View Post
Save that image as say dots.png.

Open HTML view, press Alt+S

find the second line of the body code, something like:

HTML Code:
<div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:980px;height:1000px; /*Master DIV Style*/ /*Spread DIV Style*/" __AddCode="Master DIV Tag" __AddCode="Spread DIV Tag">
Replace /*Master DIV Style*/ with
Code:
background:url(dots.png) top center;
to look like the following:

HTML Code:
<div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:980px;height:1000px; background:url(dots.png) top center; /*Spread DIV Style*/" __AddCode="Master DIV Tag" __AddCode="Spread DIV Tag">
In File manager select Add Files and navigate to dots.png

It will only be visible in preview not in the workspace.
HI

thanks for this although this only covers the on page area which i have at 980px how can i do it to cover full screen?
__________________
Taste Digital Marketing
-----------------------------------------------------------------------------------------------
X6: [/COLOR][/B]oldshippub.co.uk
Taste is offline  
Old 3rd July 2013, 10:07 PM   #4
nfc212
Master
 
nfc212's Avatar
 
Join Date: Sep 2009
Location: Cardiff
Posts: 14,898
nfc212 has a reputation beyond reputenfc212 has a reputation beyond reputenfc212 has a reputation beyond reputenfc212 has a reputation beyond reputenfc212 has a reputation beyond repute
Default Re: Responsive Background + Overlay

Quote:
Originally Posted by Taste View Post
HI

thanks for this although this only covers the on page area which i have at 980px how can i do it to cover full screen?
Sorry about that trying to do three things at once here.

Do this add:

Code:
<div class="fg">
to the
Code:
<!--Master Page Body Start-->
placeholder. should look something like:

Code:
<!--Master Page Body Start-->
<img src="content_bg.jpg" alt="background image" class="bg">
<div class="fg">
Then add

Code:
</div>
to the
Code:
<!--Master Page Body End-->
placeholder


Edit: forgot this first time due to creeping senile dementia.

Use this as the CSS HTML fragment will cover both images in one place then.

Code:
<style type="text/css">
img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
			z-index:-3;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}
		
		.fg {
		background:url(dots.png) top center;
		}
		
</style>
__________________
Nigel

The Ferret - Using PHP & MySQL to create dynamic Web Plus sites
Sleeping tigers do not concern themselves over the opinions of sheep.
An Independent Forum for web design/development and all things creative.

Last edited by nfc212; 3rd July 2013 at 10:25 PM.
nfc212 is offline  
Old 3rd July 2013, 10:23 PM   #5
nfc212
Master
 
nfc212's Avatar
 
Join Date: Sep 2009
Location: Cardiff
Posts: 14,898
nfc212 has a reputation beyond reputenfc212 has a reputation beyond reputenfc212 has a reputation beyond reputenfc212 has a reputation beyond reputenfc212 has a reputation beyond repute
Default Re: Responsive Background + Overlay

Forgot the CSS, must be going senile here.

Use this as the CSS HTML fragment will cover both images in one place then.

Code:
<style type="text/css">
img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
			z-index:-3;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}
		
		.fg {
		background:url(dots.png) top center;
		}
		
</style>
__________________
Nigel

The Ferret - Using PHP & MySQL to create dynamic Web Plus sites
Sleeping tigers do not concern themselves over the opinions of sheep.
An Independent Forum for web design/development and all things creative.
nfc212 is offline  
Old 4th July 2013, 06:35 AM   #6
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,771
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Responsive Background + Overlay

Quote:
Originally Posted by nfc212 View Post
Forgot the CSS, must be going senile here.

Use this as the CSS HTML fragment will cover both images in one place then.

Code:
<style type="text/css">
img.bg {
            /* Set rules to fill background */
            min-height: 100%;
            min-width: 1024px;
 
            /* Set up proportionate scaling */
            width: 100%;
            height: auto;
 
            /* Set up positioning */
            position: fixed;
            top: 0;
            left: 0;
            z-index:-3;
        }
 
        @media screen and (max-width: 1024px){
            img.bg {
                left: 50%;
                margin-left: -512px; }
        }
 
        .fg {
        background:url(dots.png) top center;
        }
 
</style>
I knew I'd seen that code before, its the Fluid Background in my sig below.

Joe
Clitheroe Kid is offline  
Old 18th July 2013, 08:49 PM   #7
FlackUK
Regular Member
 
FlackUK's Avatar
 
Join Date: May 2011
Location: Leicestershire, UK
Posts: 312
FlackUK is on a distinguished road
Default Re: Responsive Background + Overlay

Hi Joe,

I've tried 4 times tonight to try and get this working, and I just cannot get it right.

I have downloaded the Fluid X background.
Would like to have the CSS background with a repeating header.

I just cannot seem to do it

Do you have an example .wpp on this that I could see.

Thanks, Charlie
__________________
JOIN the Fully Pixel Forum for all your Serif Software Questions and Community Forum
===============================================
Unlimited Online PC Backup: www.clickbackup.co.uk
Fully Creative | East Midlands UK Website Design: www.fullycreative.co.uk
FlackUK is offline  
Old 18th July 2013, 11:17 PM   #8
Taste
Regular Member
 
Taste's Avatar
 
Join Date: Feb 2013
Location: UK
Posts: 92
Taste is on a distinguished road
Default Re: Responsive Background + Overlay

Quote:
Originally Posted by FlackUK View Post
Hi Joe,

I've tried 4 times tonight to try and get this working, and I just cannot get it right.

I have downloaded the Fluid X background.
Would like to have the CSS background with a repeating header.

I just cannot seem to do it

Do you have an example .wpp on this that I could see.

Thanks, Charlie
Hi Charlie. I found a way to get an overlay on top of the backstretch background. Firstly get backstretch to work and then add the overlay or whatever other background the normal way from web page properties but you will notice this wont show! Do it twice and for some reason having it twice makes it show? No idea why.
__________________
Taste Digital Marketing
-----------------------------------------------------------------------------------------------
X6: [/COLOR][/B]oldshippub.co.uk
Taste is offline  
Old 19th July 2013, 07:18 AM   #9
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,771
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Responsive Background + Overlay

Quote:
Originally Posted by FlackUK View Post
Hi Joe,

I've tried 4 times tonight to try and get this working, and I just cannot get it right.

I have downloaded the Fluid X background.
Would like to have the CSS background with a repeating header.

I just cannot seem to do it

Do you have an example .wpp on this that I could see.

Thanks, Charlie
Hi Charlie, What are you trying to achieve?

1. A fluid background with a fluid overlay, or

2. A fluid background with a fluid header. The header containing a repeating image.

Joe
Clitheroe Kid is offline  
Old 19th July 2013, 09:30 AM   #10
FlackUK
Regular Member
 
FlackUK's Avatar
 
Join Date: May 2011
Location: Leicestershire, UK
Posts: 312
FlackUK is on a distinguished road
Default Re: Responsive Background + Overlay

Quote:
Originally Posted by Clitheroe Kid View Post
Hi Charlie, What are you trying to achieve?

1. A fluid background with a fluid overlay, or

2. A fluid background with a fluid header. The header containing a repeating image.

Joe
Hi Joe,
Thanks for getting back to me.

I would like a fluid background. Which will remain when screen is sized.

But then I would like a strip across the top for the navigations.

A good example would be Neil's site here: http://serifaddons.com/

Thanks, Charlie
__________________
JOIN the Fully Pixel Forum for all your Serif Software Questions and Community Forum
===============================================
Unlimited Online PC Backup: www.clickbackup.co.uk
Fully Creative | East Midlands UK Website Design: www.fullycreative.co.uk
FlackUK is offline  
Old 19th July 2013, 09:31 AM   #11
FlackUK
Regular Member
 
FlackUK's Avatar
 
Join Date: May 2011
Location: Leicestershire, UK
Posts: 312
FlackUK is on a distinguished road
Default Re: Responsive Background + Overlay

Quote:
Originally Posted by Taste View Post
Hi Charlie. I found a way to get an overlay on top of the backstretch background. Firstly get backstretch to work and then add the overlay or whatever other background the normal way from web page properties but you will notice this wont show! Do it twice and for some reason having it twice makes it show? No idea why.
Hi Taste,

This maybe the solution I was looking for!
I will try this when I get home tonight!

Thank you, Charlie
__________________
JOIN the Fully Pixel Forum for all your Serif Software Questions and Community Forum
===============================================
Unlimited Online PC Backup: www.clickbackup.co.uk
Fully Creative | East Midlands UK Website Design: www.fullycreative.co.uk
FlackUK is offline  
Old 19th July 2013, 10:50 AM   #12
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,771
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Responsive Background + Overlay

Quote:
Originally Posted by FlackUK View Post
Hi Joe,
Thanks for getting back to me.

But then I would like a strip across the top for the navigations.

A good example would be Neil's site here: http://serifaddons.com/

Thanks, Charlie
Charlie,

You could use a fixed panel for the navbar strip. See Panels for headers/footers in my sig below.

If that doesn't suit, we put a div and a little css in. Let me know.

Joe
Clitheroe Kid is offline  
Old 21st July 2013, 12:08 AM   #13
Taste
Regular Member
 
Taste's Avatar
 
Join Date: Feb 2013
Location: UK
Posts: 92
Taste is on a distinguished road
Default Re: Responsive Background + Overlay

Quote:
Originally Posted by FlackUK View Post
Hi Taste,

This maybe the solution I was looking for!
I will try this when I get home tonight!

Thank you, Charlie
Hi Charlie.

Did you ever get this to work?
__________________
Taste Digital Marketing
-----------------------------------------------------------------------------------------------
X6: [/COLOR][/B]oldshippub.co.uk
Taste 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 X6: Responsive Web Sites Catavina WebPlus 3 14th November 2012 01:39 AM
WebPlus X5: Navbars as anchors not responsive R3BORN WebPlus 4 4th June 2012 11:19 AM
WebPlus X5: Pattern Overlay On Background Image dancurtis21 WebPlus 2 15th April 2012 12:17 PM


All times are GMT +1. The time now is 06:17 AM.