Full Screen Background with Pattern

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.

There are already more than 250 extensions available!
User avatar
r3za
 
 
Posts: 93
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Full Screen Background with Pattern

Post by r3za » Sat Oct 06, 2012 10:52 pm

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: 2118
Joined: Tue Nov 04, 2008 12:08 pm

Re: Full Screen Background with Pattern

Post by [RZ] » Sat Oct 06, 2012 11:32 pm

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: 136
Joined: Tue Aug 24, 2010 5:19 pm

Re: Full Screen Background with Pattern

Post by presto » Sun Oct 07, 2012 12:30 pm

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: 134
Joined: Fri Nov 04, 2005 12:40 pm
Location: USA

Re: Full Screen Background with Pattern

Post by gp2727 » Sun Oct 07, 2012 12:49 pm

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: 136
Joined: Tue Aug 24, 2010 5:19 pm

Re: Full Screen Background with Pattern

Post by presto » Sun Oct 07, 2012 1:24 pm

@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: 93
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za » Sun Oct 07, 2012 2:03 pm

[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: 93
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za » Sun Oct 07, 2012 2:07 pm

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: 2118
Joined: Tue Nov 04, 2008 12:08 pm

Re: Full Screen Background with Pattern

Post by [RZ] » Sun Oct 07, 2012 2:32 pm

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: 136
Joined: Tue Aug 24, 2010 5:19 pm

Re: Full Screen Background with Pattern

Post by presto » Sun Oct 07, 2012 3:55 pm

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: 93
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za » Sun Oct 07, 2012 6:19 pm

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: 93
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za » Sun Oct 07, 2012 6:25 pm

[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: 136
Joined: Tue Aug 24, 2010 5:19 pm

Re: Full Screen Background with Pattern

Post by presto » Sun Oct 07, 2012 9:14 pm

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: 93
Joined: Wed Aug 17, 2011 11:52 am
Location: London Bridge
Contact:

Re: Full Screen Background with Pattern

Post by r3za » Sun Oct 07, 2012 9:58 pm

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: 136
Joined: Tue Aug 24, 2010 5:19 pm

Re: Full Screen Background with Pattern

Post by presto » Sun Oct 07, 2012 11:00 pm

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: 136
Joined: Tue Aug 24, 2010 5:19 pm

Re: Full Screen Background with Pattern

Post by presto » Mon Oct 08, 2012 10:49 am

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?

Post Reply