CODEWITHSUNDEEP
javascriptjqueryhtml
Mounir Federere
Mounir Federere

Reputation: 135

Jquery change div background picture

I have this attribute 

<div class="idfake" style="  background-image: url('images/ad.jpg')";>

I want to get the value of "style" which is images/ad.jpg

Using JQuery I tried this 

$('.idfake').attr('style', e.target.result);

Doesn't work. I'm doing this so I can change background picture of the div...this is my code

<script>
        //change card background pic
        function readURLx(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('.idfake').attr('style', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
          $("#logopic12").change(function(){
            readURLx(this);
        });
</script>

<input   accept="image/*" id="logopic12"  class="changebg" type="file" name="logo">

Upvotes: 0

Views: 71

Answers (2)

MTroy
MTroy

Reputation: 897

Or this alternative with an img background

<img src="blank.png" id="idfake" style="width:100%;height:100%;position:absolute;z-index:-1;">

  $(document).on("ready", function()
  {
    $("#logopic12").change(function()
    {
        console.log($(this)[0].files[0]);
        $("#idfake").attr('src', window.URL.createObjectURL($(this)[0].files[0]));
    });
  })

Upvotes: 0

Domain
Domain

Reputation: 11808

try this

<script>
        //change card background pic
        function readURLx(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('.idfake').css('background-image', 'url(' + e.target.result + ')');
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
          $("#logopic12").change(function(){
            readURLx(this);
        });
</script>

<input   accept="image/*" id="logopic12"  class="changebg" type="file" name="logo">

Upvotes: 2

Related Questions