CODEWITHSUNDEEP
htmlcssimage
QuestForMastery
QuestForMastery

Reputation: 111

background-image not working with local images?

I tried everything to make background image display with my local images. I know that I have the correct image location. because if I use content:url(); it works.

Background-image also works with a url image location from the internet. But it will not render with my local image. I have tried every possible location and it will not render.

This is the path to css:

<link rel="stylesheet" href="stylesheets/myCSS.css" type="text/css" media="screen">

my images folder is in the same path as my css folder.

The following is the HTML code:

  <div class="col-md-2">
    <p>start here</p>
   <a href="#" class="angelhack"></a>
  </div>

and now the CSS:enter code here

  .col-md-2 .angelhack {
  height: 65px;
  width: 188px;
  display: block;
  background-image: url(myPicture.jpg) no-repeat 0px 0px;
  z-index: 1;
  }

 .col-md-2 .angelhack:hover {
  background-image: url('http://4.bp.blogspot.com/-SWLJdR2_YzE/TWB-
EvvBWpI/AAAAAAAAA6U/MVtkwJXED88/s320/donkey.png');
  }

Before anyone labels this a repeat question, I have searched all the answers to this question on StackOverFlow and have followed all the suggestions and I still cannot get the picture to render. I know the picture is in the correct location because with Chrome and content:url(); the image works. Any suggestions?

Upvotes: 5

Views: 8791

Answers (5)

Hash
Hash

Reputation: 8020

Your missing your "" quotes

background-image: url(myPicture.jpg);

With 

background-image: url("myPicture.jpg");

try,

background: url("myPicture.jpg");

Also,

  • Is the image in the same directory as the file referencing it?
  • Is the image in a directory below?
  • Is the image in a directory above?

By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example: enter image description here

Here is all you need to know about relative file paths:

  • Starting with "/" returns to the root directory and starts there
  • Starting with "../" moves one directory backwards and starts there
  • Starting with "../../" moves two directories backwards and starts there (and so on...)
  • To move forward, just start with the first subdirectory and keep moving forward

Upvotes: 5

Ovidiu Unguru
Ovidiu Unguru

Reputation: 756

Your only problem was the way you wrote the background-image

Instead of writing it like this

background-image: url('mypicture.jpg') no-repeat 50px 50px; //the size isn't good there

Do it like this

background-image: url('mypicture.jpg') no-repeat;
background-size: 50px 50px;

It will appear like this

Upvotes: 0

S4NDM4N
S4NDM4N

Reputation: 924

Try this and see if it works.

.col-md-2 .angelhack {
    background: url("../images/bg.jpg") no-repeat;
//Set your path in the double quote's 
  }

Upvotes: 0

Jeff P.
Jeff P.

Reputation: 3004

EDIT: Overlooked that the file path for the url wasn't in double quotes.

Change:

 background-image: url("myPicture.jpg") no-repeat 0px 0px;

To:

 background-image: url("myPicture.jpg");
 background-repeat: no-repeat;

Upvotes: 0

Rakib
Rakib

Reputation: 643

I have used background instead of background-image and it's working fine. and it assumes that pic is in the same folder as your html.

.col-md-2 .angelhack {
  height: 65px;
  width: 188px;
  display: block;
  background: url("myPicture.jpg") no-repeat 0px 0px;
  z-index: 1;
  }

Upvotes: 1

Related Questions