CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
Chimini
Chimini

Reputation: 57

background image not showing on my page

I have the image in the correct folder but I want to add a text box on top of an image and I was told the best way to do it is make the image a background image, but when I followed a tutorial it never appeared? anyway here is my html

<div class="module">
                    <h2>blah blah</h2>
                            </div>

and my CSS

    .module {
  margin: 10px;
  width: 1530px;
  height: 717px;
  display:block;
  background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
  background-size: cover;
  position: relative;
}

h2 {
  position: absolute;
  bottom: 100px;
  left: 100px;
  background: rgba(0, 0, 0, 0.75);
  padding: 4px 8px;
  color: white;
  margin: 0;
  font: 14px PTSans;
}

the image is full width of the screen so I am using container-fluid in bootstrap and the text box will be in the middle of the image.

Upvotes: 0

Views: 70

Answers (4)

beatrice
beatrice

Reputation: 4411

Your path is wrong try this: url('images/shop.png') - if your css is in champions

Upvotes: 0

Manny Alvarado
Manny Alvarado

Reputation: 1233

Change the backlashes. From this...

background: url('C:\Users\Jason\Desktop\champions\images\shop.png');

To this

 background: url('C:/Users/Jason/Desktop/champions/images/shop.png');

Cheers.

Upvotes: 1

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

You may call the local file as background like this:

background: url("file://PATH-TO/file.jpg");

Keep in mind that the string inside parentheses should provide a URL to the file.

Also, you have the option to put a path in it.

background: url("PATH-TO/file.jpg");

Upvotes: 1

Alex Poon
Alex Poon

Reputation: 101

It looks fine of your css. Try to use firefox or chrome debugger to check if the background image can be loaded or not. Try to change the value of the background-size. Sometimes the background image is too large that you can only see part of it (which may be completely white) on the screen.

Upvotes: 0

Related Questions