Facebook Style Background Image Upload and Position Adjustment

By | September 4, 2015

728x90-popads_1

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.

csstrip

 

HTML Code
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.

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

JavaScript
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.
userUpdates.php
Simple PHP class contains three functions called userDetails, userBackgroundUpdate and userBackgourndPositionUpdate.

image_upload_ajax.php
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.

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

index.php
Displaying background image based login user session id

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

That’s all!

Demo and Download links are as:

live_demo_button.fw_b-download

 

 

728x90-popads_1