/    Sign up×
Community /Pin to ProfileBookmark

Background change on user submittion?

Copy linkTweet thisAlerts:
Aug 17.2014

Ello all,

I was wondering a way around this,

so, say i have (‘/images/background.png’), i want to let my users submit a image that overrides the default background and displays it in the background. My guess is i need to have it dropped into a database if i want it to be saved for the user to see perminately, im also curious can i have it set up to run with this css

[CODE]
body{
background: url(‘../images/background.png’) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
[/CODE]

Any help would be apreciated ?

to post a comment
PHP

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@ginerjmAug 17.2014 — Help with your English or your PHP?

You probably don't want to put it into a db, but merely store it in a designated folder accessible in the web tree. Then you could easily set a cookie for a user that gives you the filename and before sending the page from your script, altering the css to use the cookie value as the url. Of course you will have first had to provide the user an opportunity to upload this image - with appropriate checks as to its type and size and all that.
Copy linkTweet thisAlerts:
@GravyAug 17.2014 — Steps:

(1) They upload the image

(2) You make sure the image is an image and nothing creepy going on in there

(3) You rename the file and put it somewhere you want. Like "images/backgrounds/users/<?=$user->id;?>.jpg". Or PNG or whatever. Don't let the user name the file.

(4) You store the image file name in the database in the user table. "1234.jpg"

(5) When loading the page...
[code=php]
<?php
if ($user->backgroundImage) {
echo "<style>background: url('images/backgrounds/users/{$user->backgroundImage}') no-repeat center fixed;</style>";
}
?>
</head>
[/code]

In this case I'm keeping this bit of CSS outside the CSS file so that there needs to be no PHP run in the CSS file.

There may be better implementations, but this is the one that quickly comes off the top of my head.
Copy linkTweet thisAlerts:
@rootAug 17.2014 — If your user has a login then you could have a table of users prefs and the item you store is a URL to the chosen image, this could be one uploaded by them and each time they load a page, your server queries the database and delivers the correct credentials.

If you want to do this client side then you would need to have a cookie set on the users system and have JavaScript swap out the URL and point to the chosen image.

In either case your image would need to be on you server and that involves uploading an image.
×

Success!

Help @jammy74 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 5.19,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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