0

I want to add a background image into the submit button. I've added a picture but when i do no-repeat background image disappears! What should I do to avoid losing image ?

HTML

<div class="comtextarea">
  <textarea name="comment" class="comment" maxlength="200"  id="" rows="2" cols="50"></textarea>
  <input type="submit" value="" class="combut"/>
</div>

CSS

    .comtextarea {
      float:left;
      width:550px;
      height:auto;
    }
    .comment {
      width:550px;
      resize:none;
      outline:none;
      border:1px solid #abc7d0; 
    }
    .combut {
      float:right;
      margin-top:-36px;
      z-inde:3;
      position:relative; 
      outline:none;
      width:30px;
      height:30px;
      background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg) no-repeat;
      padding:0px 0 4px 0; border:none;
      text-indent:-10000em; 
}

This is DEMO page

Improve this question
1
  • background-image will only hold the image url. You can either include all background properties into background or keep your current setting and add background-repeat: no-repeat. Commented May 7, 2014 at 10:45

3 Answers 3

Reset to default
3

Its because your setting it against property background-image.

The background-image property is just for specifying the background image value, no other background related properties.

Change this to background instead.

Or have 2 seperate properties:

background-image: url(..URL HERE..);
background-repeat: no-repeat;

Personally I prefer 2 seperate properties. It's clearer to see the no-repeat value being applied, and is more manageable under source control changes.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Agreed with your suggestion for having separate properties! +1 :)
0

Your CSS is a bit wrong, change:

background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg) no-repeat;

to:

background:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg) no-repeat center center;

http://codepen.io/anon/pen/hqIxd

Improve this answer

Comments

-1

use to background if you used to all property in your css as like repeat position

if your used to background-image than define only image url as like this 

background-image: url('some.jpg');

---------------------

replace to this

background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg) no-repeat;

into this

background:url('https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg') no-repeat;

Demo

-----------------

or used to this 

background-image:url('https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg');
background-repeat:no-repeat;
Improve this answer

2 Comments

yest dear you are true but i am using background-image because of i want to add a background-color into my submit button. If i use your code for my submit button background:url(...); is not working on that time.
than used to background-image:url('YourImageUrl'); and background-repeat:no-repeat; used to this

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.