background image not displaying correctly

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!!

• Suresh Ponnukalai: Default is left only. where you want to display in the div??
• Nick R: Top left is the default position for a background image, you can change - after the no-repeat, add right center for example.
• Melvin: thanks that worked . now i wanted it to display jus over the header banner.Can u help me please

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;
}

• Rodik: You copied his erroneous HTML, and kept it in your answer. you even used it in your codepen example.

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(....);}