Full Screen Background with Pattern

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
Post Reply
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Full Screen Background with Pattern

Post by r3za »

Hello Everyone!

Here is an extension for everyone to display a full screen background with below specifications:
  • - A very light and responsive CSS full screen background
    - Ability to add pattern to the full screen background
    - A very simple interface to upload your background and pattern
    - Works with all browsers and devices.
Image

Demo Link:
http://virtualdesigners.co.uk/projects/ ... g-pattern/

Download Link:
WB v8.2
http://virtualdesigners.co.uk/projects/ ... rn-8.2.zip

WB v8.5
http://virtualdesigners.co.uk/projects/ ... rn-8.5.zip

As you can see its quite simple and I doubt if anyone needs a manual for it. The only note and suggestion is when added this extension to your project, right click on it and "Move To Back".

Enjoy!
Last edited by r3za on Mon Oct 08, 2012 9:14 pm, edited 3 times in total.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Full Screen Background with Pattern

Post by [RZ] »

technically speaking, what you are saying is not so true.
the code may be simple and light, but you are forcing the use of the jquery, so, it it not so simple nor light at all. i mean for this projects that don't need jquery... so this missing info may be vital for some development environments.

in the other hand, you have a severe issue -means a conflict- with the use of sticky layers.
resize your browser, until a vertical and/or horizontal scrollbars appear, you won't be able to read the screen because it scrolls partially and in some cases totally to the top of the screen... to it results to an unusable resource for small screens like mobiles.

regards.
presto
 
 
Posts: 138
Joined: Tue Aug 24, 2010 5:19 pm
Contact:

Re: Full Screen Background with Pattern

Post by presto »

Thanks for the idea of this extension using css 3, though it does not work for me. There might be a missing comma in this line of the "FullScreen.css":

background-position: center center;

Am I right or why does the extension only show blank (white) background?
gp2727
 
 
Posts: 130
Joined: Fri Nov 04, 2005 12:40 pm
Location: USA

Re: Full Screen Background with Pattern

Post by gp2727 »

presto wrote:Thanks for the idea of this extension using css 3, though it does not work for me. There might be a missing comma in this line of the "FullScreen.css":

background-position: center center;
@presto
A comma is not needed in the background-position property. This link will explain - http://www.w3schools.com/cssref/playit. ... d-position
presto
 
 
Posts: 138
Joined: Tue Aug 24, 2010 5:19 pm
Contact:

Re: Full Screen Background with Pattern

Post by presto »

@gp2727: Thanks a lot, you are totally right and I most probably had a kind of black-out since I actually know that center center is in regard of the x and y axis and not in regard of the two background pictures.

But the extension still does not work for me. Does it work for others?
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za »

[RZ] wrote:technically speaking, what you are saying is not so true.
the code may be simple and light, but you are forcing the use of the jquery, so, it it not so simple nor light at all. i mean for this projects that don't need jquery... so this missing info may be vital for some development environments.

in the other hand, you have a severe issue -means a conflict- with the use of sticky layers.
resize your browser, until a vertical and/or horizontal scrollbars appear, you won't be able to read the screen because it scrolls partially and in some cases totally to the top of the screen... to it results to an unusable resource for small screens like mobiles.

regards.

Thanks rz for the feedback. Basically the the css code is about 10 lines and nothing to do with jquery. I have updated the page.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za »

Hello Presto and gb2727. thanks for the feedback and digging into the code. basically there was a slight type which I have edited and it does validate on w3. Please re-download and test and let me know if this you have still an issues.
The only note and suggestion is when added this extension to your project, right click on it and "Move To Back".

I have tested with IE, Firefox, chrome, ipad, ipos and blackberry and all positive. but I am glad if i hear any feedback to improve it.


Image
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Full Screen Background with Pattern

Post by [RZ] »

Thanks rz for the feedback. Basically the the css code is about 10 lines and nothing to do with jquery. I have updated the page.
please don't take me wrong.
your previous sample did use jquery. you just removed the resize functions that use jquery, in a way it is correct, but the css technique requires ie9 or later, or any other updated browser, it is a "limitation" that you didn't explain.
again, don't take me wrong, but you mentioned others members made the same, but it is not the "same" because these other extensions are a more backward compatible... (i just gave you feedback because i'm one of these "other members".)
regards.
presto
 
 
Posts: 138
Joined: Tue Aug 24, 2010 5:19 pm
Contact:

Re: Full Screen Background with Pattern

Post by presto »

I have re-downloaded the extension. It still does not work for me. It seems to me as if there was an issue with the path for picture, pattern and/or the reset.css file.
Does the extension work for others than the extension developer?
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za »

presto wrote:I have re-downloaded the extension. It still does not work for me. It seems to me as if there was an issue with the path for picture, pattern and/or the reset.css file.
Does the extension work for others than the extension developer?
Presto, can you please upload somewhere so I can check. thanks
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za »

[RZ] wrote:
Thanks rz for the feedback. Basically the the css code is about 10 lines and nothing to do with jquery. I have updated the page.
please don't take me wrong.
your previous sample did use jquery. you just removed the resize functions that use jquery, in a way it is correct, but the css technique requires ie9 or later, or any other updated browser, it is a "limitation" that you didn't explain.
again, don't take me wrong, but you mentioned others members made the same, but it is not the "same" because these other extensions are a more backward compatible... (i just gave you feedback because i'm one of these "other members".)
regards.
I understand rz. depend on need and how complicated pages are and purpose these extensions are built. I have been using your full screen but customer was asking for a pattern so I did the his website with this. I did not mean any disrespect to you or anyone who has build such an extension. I hope you are not offended with my wording and if I have, I appologize.

for info the resize or other jqueries in the previous link were for the layers that I added to display word "welcome" as a sticky layer.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
presto
 
 
Posts: 138
Joined: Tue Aug 24, 2010 5:19 pm
Contact:

Re: Full Screen Background with Pattern

Post by presto »

Here are the HTML code and the css file:

1. HTML

<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Unbenannte Seite</title>
<meta name="author" content="yandido crossmedia marketing GmbH">
<meta name="generator" content="WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com">
<style type="text/css">
body
{
font-size: 8px;
line-height: 1.1875;
background-color: transparent;
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #0000FF;
}
a:hover
{
color: #800080;
text-decoration: underline;
}
</style>
<link rel="stylesheet" type="text/css" href="./css/FullScreen.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="./css/styleIE.css">
<![endif]-->

</head>
<body>

</body>
</html>

2. FullScreen.css:

@import url('reset.css');
/* General FullScreen Style */
body{
background-image: url(.images/11-08-2011 23-41-16_transparent.png), url(.images/blindfolded-man.jpg);
background-color: transparent;
background-repeat: repeat, no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;
}
.clr{
clear: both;
}
Last edited by presto on Mon Oct 08, 2012 10:51 am, edited 1 time in total.
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za »

It seems the image that you have chosen as pattern is causing the issues and my guess is because of naming or the pattern you are using. Name of image is 11-08-2011 23-41-16_transparent.png which is not the best to have for website. A friendly suggestion is to rename your images always to something short and avoid images or items with space. :-)
e.g. if it is pattern you can name pattern-light.jpg

Please use of one of the built in pattern and let me know if still is an issue.

presto wrote:Here are the HTML code and the css file:

1. HTML

<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Unbenannte Seite</title>
<meta name="author" content="yandido crossmedia marketing GmbH">
<meta name="generator" content="WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com">
<style type="text/css">
body
{
font-size: 8px;
line-height: 1.1875;
background-color: transparent;
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #0000FF;
}
a:hover
{
color: #800080;
text-decoration: underline;
}
</style>
<link rel="stylesheet" type="text/css" href="./css/FullScreen.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="./css/styleIE.css">
<![endif]-->

</head>
<body>

</body>
</html>

2. FullScreen.css:

@import url('reset.css');
/* General FullScreen Style */
body{
background-image: url(.images/11-08-2011 23-41-16_transparent.png), url(.images/blindfolded-man.jpg);
background-color: transparent;
background-repeat: repeat, no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;
}
.clr{
clear: both;
}
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
presto
 
 
Posts: 138
Joined: Tue Aug 24, 2010 5:19 pm
Contact:

Re: Full Screen Background with Pattern

Post by presto »

It was pure coincidence that I had choosen this specific picture and I agree with you regarding proper file names. But in this case it is definitely not the cause of the issue. I also have tested different files. But have a look at the line in the css with the path to the files:

background-image: url(.images/11-08-2011_23-41-16_transparent.png), url(.images/blindfolded-man.jpg);

I think there is a point and slash missing after the "." and before "images", isn't it? It should be:

background-image: url(../images/11-08-2011_23-41-16_transparent.png), url(../images/blindfolded-man.jpg);

Please make the correction in your extension and uplaod it again. Thank you!
Last edited by presto on Mon Oct 08, 2012 10:46 am, edited 1 time in total.
presto
 
 
Posts: 138
Joined: Tue Aug 24, 2010 5:19 pm
Contact:

Re: Full Screen Background with Pattern

Post by presto »

presto wrote:It was pure coincidence that I had choosen this specific picture and I agree with you regarding proper file names. But in this case it is definitely not the cause of the issue. I also have tested different files. But have a look at the line in the css with the path to the files:

background-image: url(.images/11-08-2011_23-41-16_transparent.png), url(.images/blindfolded-man.jpg);

I think there is a point and slash missing after the "." and before "images", isn't it? It should be:

background-image: url(../images/11-08-2011_23-41-16_transparent.png), url(../images/blindfolded-man.jpg);

Please make the correction in your extension and uplaod it again. Thank you!
@re3a: Did you read this? Could you please amend the extension?
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za »

presto wrote:It was pure coincidence that I had choosen this specific picture and I agree with you regarding proper file names. But in this case it is definitely not the cause of the issue. I also have tested different files. But have a look at the line in the css with the path to the files:

background-image: url(.images/11-08-2011_23-41-16_transparent.png), url(.images/blindfolded-man.jpg);

I think there is a point and slash missing after the "." and before "images", isn't it? It should be:

background-image: url(../images/11-08-2011_23-41-16_transparent.png), url(../images/blindfolded-man.jpg);

Please make the correction in your extension and uplaod it again. Thank you!

Hello Presto,
thanks for pointing this out. can I ask what version of Web Builder you use. I think the WB it does change the directory. Please let me know your version and I test with that. thanks mate
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za »

Hello again Presto. I am sure you using 8.5. I have the same problem now after trying this version. I will look into it and see why is causing it.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
presto
 
 
Posts: 138
Joined: Tue Aug 24, 2010 5:19 pm
Contact:

Re: Full Screen Background with Pattern

Post by presto »

Hi r3za,
you are right, I use WWB 8.5. Did you use Extensionbuilder 4.1 or an previous version? May be you can make two versions of the extension, since EB 4.1 only works for WWB 8.5, but not downwards.
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za »

presto wrote:Hi r3za,
you are right, I use WWB 8.5. Did you use Extensionbuilder 4.1 or an previous version? May be you can make two versions of the extension, since EB 4.1 only works for WWB 8.5, but not downwards.
Hello Presto,
Please check the original post. I have added version 8.5 and you need to download and re-install. All problem was the version of extension builder. Thanks again for the feedback!

Regards,
Reza
Last edited by r3za on Mon Oct 08, 2012 10:35 pm, edited 1 time in total.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
presto
 
 
Posts: 138
Joined: Tue Aug 24, 2010 5:19 pm
Contact:

Re: Full Screen Background with Pattern

Post by presto »

Everything is fine now. Thank you very much.
User avatar
milux
 
 
Posts: 9
Joined: Thu Mar 08, 2012 5:16 pm
Location: Italy
Contact:

Re: Full Screen Background with Pattern

Post by milux »

Hello , I have WB8.5.6 and I have installed this nice extension but I ask if it's possibile to use it with differents page background, because I have made a test and the html page has a reference for a unique FullScreen.css for all pages. Yes I know that I can postedit html and css reference but will be nice if this extension can make this feature.

Michele
User avatar
r3za
 
 
Posts: 90
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za »

milux wrote:Hello , I have WB8.5.6 and I have installed this nice extension but I ask if it's possibile to use it with differents page background, because I have made a test and the html page has a reference for a unique FullScreen.css for all pages. Yes I know that I can postedit html and css reference but will be nice if this extension can make this feature.

Michele
Hi Michele,
If your question is to use different background rather than the default one? Yes, you can and all you need to do is to browse to your image and pattern.
Reza
Web Design and Search Engine Optimisation

Http://www.SEO25.com
Free URL Rate & Site Value Tool - Free Search Engine Submission!
Image
User avatar
milux
 
 
Posts: 9
Joined: Thu Mar 08, 2012 5:16 pm
Location: Italy
Contact:

Re: Full Screen Background with Pattern

Post by milux »

r3za wrote:
milux wrote:Hello , I have WB8.5.6 and I have installed this nice extension but I ask if it's possibile to use it with differents page background, because I have made a test and the html page has a reference for a unique FullScreen.css for all pages. Yes I know that I can postedit html and css reference but will be nice if this extension can make this feature.

Michele
Hi Michele,
If your question is to use different background rather than the default one? Yes, you can and all you need to do is to browse to your image and pattern.
Thank you for your answer; I have done a simple test on a project with two different pages. I put a picture background with pattern on the index and another different picture background with pattern in a page1. The result is that the backgroun is the same for all pages; the generated code in html is :

Code: Select all

<link rel="stylesheet" type="text/css" href="./css/FullScreen.css">
for index.html and the same for the other page.

I have postedit the html of the pages and changed the reference to Fullscreen.css with a copy and renamed it.

index.html -->> Fullscreen.css
page1.html -->>Fullscreen1.css

In the Fullscreen1.css I have also changed the ref to the picture.

In this way everything works but you have to change the code manually and upload all the files manually.
Post Reply