CSS：响应式背景图片问题

Question

I can't get the image to appear, which is bizarre as the div box is there when I highlight elements on the page. Also no issues with validation/inspection.

html:

<div class="mainImage"></div>

css:

.mainImage {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url(Images\top.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 400px;
}

Attempted:

• Forward slash filepath
• Quotes ' and "
• Both background declarations in the same statement

The link is correct, tested.

Thank you.

Answer 1

.mainImage {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url('Images/top.jpg');
    background-repeat: no-repeat;
    width: 100%;
    height: 400px;
}

this works for me

Answer 2

你可以试试看

background-image: url("Images/top.jpg");

Answer 3

Where does the Image folder exist? Is it in the same path your HTML file is? and did you "connect" the css to the html file? the only attribute that does not work is the image? Did you check that the image is JPG? Maybe try to set some fixed width, maybe give some background color (background-color: red;), then we can find where the problem is...

Answer 4

.mainImage {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-image: url('../Images/top.jpg');
background-repeat: no-repeat;
width: 100%;
height: 400px;
}

Put ../ before the path.