Full Screen Background with Pattern

[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.

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!

[[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]

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]

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]

@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?

[r3za]

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.

[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.

[[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]

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?

[r3za]

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

[r3za]

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.

[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;
}

[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.

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;
}

[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!

[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!

@re3a: Did you read this? Could you please amend the extension?

[r3za]

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

[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.

[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.

[r3za]

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

[presto]

Everything is fine now. Thank you very much.

[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

[r3za]

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.

[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

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.