CODEWITHSUNDEEP
htmlcss
CodePanda
CodePanda

Reputation: 49

HTML,CSS using background image

I've been trying to figure this out for awhile now. Trying to use css to add a background image. I'm also using bootstrap. Here is my code

css:

.container-fluid{
background-image: url('../DomPic/photo1.jpg');
height: 100%;
width: 100%;
}

html:

<div class="container-fluid"></div>

Problem: The image wont show up on my page.

Upvotes: 1

Views: 84

Answers (7)

user5681358
user5681358

Reputation:

Rather was the wrong way Image. Please check again.

background-image: url('folder/picture.jpg');

Upvotes: 0

Anubhav pun
Anubhav pun

Reputation: 1323

try to use in your style may help you 

.container-fluid
    {
    position:absolute;
    background-image: url('DomPic/photo1.jpg');
    height: 100%;
    width: 100%;
    background-size:contain;
    }

Upvotes: 0

Guille
Guille

Reputation: 652

It appears your path to the your picture is wrong.

You dont need to set you path as C:.... just

background-image: url('just ../assets/img.piture.png or ./picture.png or picture.png'); Depending where your pictures is place in your project. ex.

myproject/assets/images/picture.png.. etc.

the example below works. 

.container-fluid{
background-image: url('http://www.fillmurray.com/100/100');
height: 100px;
width: 100px;
}
  <div class="container-fluid"></div>

Upvotes: 0

yjs
yjs

Reputation: 692

.container-fluid{
position:absolute;
background-image: url('DomPic/photo1.jpg');
height: 100%;
width: 100%;
}

added position:absolute; to existing code

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

try this one:

 .container-fluid{
background-image: url('http://s13.postimg.org/51s3l0x3b/w3schools.png');
background-repeat: repeat-y;
height: 100%;
width: 100%;
}

DEMO HERE

Upvotes: 0

Ninoop p george
Ninoop p george

Reputation: 678

Add position:absolute; to the .container-fluid class.. Its simple as that..

Note:Adding something to the div makes the background to fit according to the content of the div.

Upvotes: 0

ketan
ketan

Reputation: 19341

It is because your div have nothing.

<div class="container-fluid">Something</div>

Either add something in div.

Or

Give fixed width and height. Or at least fixed height works.

.container-fluid{
background-image: url('../DomPic/photo1.jpg');
height: 100px;
width: 100px;
}

Upvotes: 1

Related Questions