1

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.

7
  • please enter full code? Commented Dec 16, 2015 at 6:56
  • Thats my full code. the image wont show up on my page Commented Dec 16, 2015 at 6:57
  • C:\Users\muna\Desktop\DomWebsite\DomPic thats my path. But I'm pretty sure I inputted the right path. Commented Dec 16, 2015 at 7:00
  • background-image: url('DomPic/photo1.jpg'); Commented Dec 16, 2015 at 7:01
  • Add any text or something in the div. Commented Dec 16, 2015 at 7:02

7 Answers 7

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;
}
Sign up to request clarification or add additional context in comments.

3 Comments

he didn't explain his problem in detail and neither he provided the details
It is said in the stackoverflow that "Provide details. Share your research." Providing details in comments is not a good idea
He should have edited the question to provide more details..so others reading the question can understand his problem..
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.

Comments

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

Comments

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

added position:absolute; to existing code

2 Comments

I have this and it works but my image is still zoomed out to much.
You can add: background-size:contain;
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>

Comments

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

Comments

0

Rather was the wrong way Image. Please check again.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.