Auto adjust background image using css


I have the following code for uploading background image.

<input type='file' onchange="readURL(this);" />

The script I'm using is:

function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#myframe') .css({ background:'url('+e.target.result +') left top no-repeat', background-size:'400px 400px' }); }; reader.readAsDataURL(input.files[0]);//To display images uncomment this } }

There is a problem.Above code works if I remove background-size. I want to reduce the size and resolution of the image I'm uploading. Here$('#myframe') is div id of the the area, where I want to upload. Also, let me know how do I pass multiple properties to .css() function. I tried the following code for the same, but no effect:

.css(background:transparent url('+e.target.result +') left top no-repeat,background-size:200px 300px);


Your problem is that background is a super property and it reset background-size, place background-size after background.

So in your case you want:

$('#myframe') .css('background', 'transparent url('+e.target.result +') left top no-repeat') .css('background-size', '200px 300px');

See this post <a href="https://stackoverflow.com/questions/17329850/background-overwrites-background-size" rel="nofollow">background overwrites background-size</a>

And css to pass multiple properties you simply pass in an object. See documentation <a href="http://api.jquery.com/css/" rel="nofollow">http://api.jquery.com/css/</a>


I have created a jsfiddle <a href="http://jsfiddle.net/kHqLE/2/" rel="nofollow">http://jsfiddle.net/kHqLE/2/</a>

The output from e.target.result is not an image object, its a raw string.


  • Python Tkinter: addressing Label widget created by for loop
  • I want to handle a clickbutton event from another page
  • How to draw graph inside swing with GraphStream actually?
  • getNodeValue() returns null although response xml holder does not
  • How to layout nodes once in GraphStream?
  • Are Google Chrome Base64 methods capable of handling binary data from the File API?
  • How to insert variables to dat.Gui with an array?
  • Security risks from user-submitted HTML
  • How could I write a BsonDocument object into a file, and read it again, using Java
  • Opening a Modal Window “using” PHP
  • JavaScript Interface to a Browser not working in 4.2.2
  • Center align outputs in ipython notebook
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • Adjust width of select element according to selected option's width
  • HTTP/2 streams vs HTTP/1.1 connections
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Disable Enter in editText android
  • Change multiple background-images with jQuery
  • Syntax for setting draggablecursor property in google maps api
  • Algorithm for a smudge tool?
  • Can Jackson SerializationFeature be overridden per field or class?
  • Modifying destination and filename of gulp-svg-sprite
  • How to check if every primary key value is being referenced as foreign key in another table
  • Shallow update not allowed (git > 1.9)
  • jquery mobile loadPage not working
  • GridView Sorting works once only
  • Numpy divide by zero. Why?
  • php design question - will a Helper help here?
  • Circular dependency while pushing http interceptor
  • How to get icons for entities from eclipse?
  • Android Studio and gradle
  • How to include full .NET prerequisite for Wix Burn installer
  • AngularJs get employee from factory
  • python regex in pyparsing
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery
  • Qt: Run a script BEFORE make
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4