Facebook Style Background Image Upload and Position Adjustment

By | September 4, 2015


This Tutorial is on How to Facebook Style Background Image Upload and Position Adjustment . I have been published many tutorials about ajax image upload, this one is very interesting and it is a combination of many features, this post will explain you how to design timeline HTML frame, CSS techniques and database design for background image system.

Facebook Style Background Image Upload and Position Adjustment


Users Table
User table contains all the registered user details.

User database store like this.

Timeline profile background wire-frame.



Take a look at the live demo for more understanding.

CSS code
Just focus on highlighted CSS properties.

Styling an input type=”file” browse button
Default input type file works with browse button, replaced choose/browse button with camera icon.

Here actual input type=”file” in hidden more, applied background image for DIV.

Contains JavaScript code and drag option works with Jquery UI plugin. $(‘body’).on(‘change’,’#bgphotoimg’, function()- bgphotoimg is the ID name of INPUT FILE tag and $(‘#bgimageform’).ajaxForm() – imageform is the ID name of FORM. While changing INPUT it calls FORM submit without refreshing page using ajaxForm() method.

$(‘body’).on(‘click’,’.bgSave’, function()- bgSave is the class name of save button, using $(“#timelinBGload”).attr(“style”) calling the style value and split with top: string.
Simple PHP class contains three functions called userDetails, userBackgroundUpdate and userBackgourndPositionUpdate.

Uploading image file into uploads folder and inserting background image name into users table. Here upload image size restricted for 1 MB, if you want you can modify image size by changing 1024 value.

Inserting background position value into users table based on user session id.

Displaying background image based login user session id

Database connection you have to modify username, password and database values.

That’s all!

Demo and Download links are as: