/    Sign up×
Community /Pin to ProfileBookmark

How to make a dynamic full screen background image?

Hey guys,

Quick question in real fast, How to I make a full screen background that resizes as the browser window resizes. I’ll be using HTML5 to make this page.

Example:

[URL=”http://574s.com/”]http://574s.com/[/URL]

Thanks for all the help!

John

to post a comment
HTML

4 Comments(s)

Copy linkTweet thisAlerts:
@cbVisionDec 06.2013 — It looks like it's already doing it. You're using a stretch plugin it seems.
Copy linkTweet thisAlerts:
@cbVisionDec 06.2013 — Sorry, just realized that's just an example. Try this plugin:

http://srobbin.com/jquery-plugins/backstretch/
Copy linkTweet thisAlerts:
@johnyct9760authorDec 07.2013 — Hey cb thank you for the help,

The plot thickens, my client has asked me to do a site that loads a random background image each time on load, I'm thinking that I'm going to get that taken care of before I move on to the full screen part, let me know your thoughts on that plan of action.

Any way I'm having a bit of a hard time so far here is my development site, as you can see there are no background images showing up at this point, let alone random:

http://www.workspace.johncliffordtaylor.com/hand-written/web/000.html

Now let me share the source materal that I'm using to get to this point so far, I I'm using tread from StackOverFlow to help me with the JS and so on:

http://stackoverflow.com/questions/15231812/random-background-images-css3

Like I said none of my background images are showing up and I'm a bit stumped at present on whats not working for me. Any additional assistance would be VERY appreciated!

One love,

John
Copy linkTweet thisAlerts:
@cbVisionDec 09.2013 — Your first link doesn't seem to be working. As for displaying a background image randomly, it's very simple using some JavaScript or even a server side language such as PHP.
×

Success!

Help @johnyct9760 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...