背景图片无法正确显示

Question

i was working on this site itsquad.us .I need to add my toll free number under the banner with a background image .the code is

 <div class="call"><p>1-855-566-6006</p></div></div>

css

.call
{
color: #FD7800;
font-weight: bold;
font-size: 23px;
background:url('http://itsquad.us/wp-content/uploads/2014/06/tollfree1.png') no-repeat;
}

But the image is displaying at the left of the div .I have no idea what is happening. I have tried giving margin,postion,padding etc in css which didn't help .I want it in the center just over the homepage banner.please help me.thanks!!

Answer 1

Try this:

CSS

.call { 
     background: url("http://itsquad.us/wp-content/uploads/2014/06/tollfree1.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
     color: #FD7800; 
     font-size: 23px; 
     font-weight: bold; 
     height: 90px; 
     padding-left: 70px; 
     width: 150px; 
}

.call p { 
     margin: 0; 
     position: relative; 
     top: 22px; 
}

HTML

<div class="call"><p>1-855-566-6006</p></div>

Answer 2

I hope my example will help Codepen demo

HTML

<div class="call"><p>1-855-566-6006</p></div>

CSS

body {
  background: #ececec;
}
.call
{
color: #FD7800;
font-weight: bold;
font-size: 23px;
background:url('http://itsquad.us/wp-content/uploads/2014/06/tollfree1.png') no-repeat;
background-size:contain;
width: 500px;
height: 160px;
display:block;
}
.call p {
  padding-top:50px;
  text-align:center;
}

Answer 3

In the background URL, try to upload image in an uploading website (and paste the URL). Don't forget to make the height and width.

.yourCLASS{ 
 width: ?;
 height: ?;   
background: url(....);}