HTML,CSS using background image

Question

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.

C:\Users\muna\Desktop\DomWebsite\DomPic thats my path. But I'm pretty sure I inputted the right path. — CodePanda
– CodePanda, Commented Dec 16, 2015 at 7:00

ketan · Accepted Answer · 2015-12-16 06:59:13Z

1

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

answered Dec 16, 2015 at 6:59

ketan

19.4k42 gold badges68 silver badges107 bronze badges

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

3 Comments

Ninoop p george Over a year ago

he didn't explain his problem in detail and neither he provided the details

Ninoop p george Over a year ago

It is said in the stackoverflow that "Provide details. Share your research." Providing details in comments is not a good idea

Ninoop p george Over a year ago

He should have edited the question to provide more details..so others reading the question can understand his problem..

Ninoop p george · Accepted Answer · 2015-12-16 07:01:24Z

0

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.

answered Dec 16, 2015 at 7:01

Ninoop p george

6785 silver badges23 bronze badges

Comments

Ivin Raj · Accepted Answer · 2015-12-16 07:05:07Z

0

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

answered Dec 16, 2015 at 7:05

Ivin Raj

3,4312 gold badges34 silver badges70 bronze badges

Comments

yjs · Accepted Answer · 2015-12-16 07:06:42Z

0

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

added position:absolute; to existing code

edited Dec 16, 2015 at 7:06

answered Dec 16, 2015 at 6:57

yjs

6923 silver badges11 bronze badges

2 Comments

CodePanda Over a year ago

I have this and it works but my image is still zoomed out to much.

yjs Over a year ago

You can add: background-size:contain;

Guille · Accepted Answer · 2015-12-16 07:12:32Z

0

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>

answered Dec 16, 2015 at 7:12

Guille

6521 gold badge5 silver badges20 bronze badges

Comments

Anubhav pun · Accepted Answer · 2015-12-16 07:17:09Z

0

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

answered Dec 16, 2015 at 7:17

Anubhav pun

1,3232 gold badges8 silver badges21 bronze badges

Comments

user5681358 · Accepted Answer · 2015-12-16 07:48:16Z

0

Rather was the wrong way Image. Please check again.

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

answered Dec 16, 2015 at 7:48

user5681358

Collectives™ on Stack Overflow

HTML,CSS using background image

7 Answers 7

3 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related