Geek asks and answers

Does background-image not appear if <div> is empty?

I created the <div>first thing in <body>to draw the top line at the top of the page:

<body>
    <div class="bordertop"></div>
    .....
</body>

and style:

body {
    font-family: Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    margin:0;
}
.bordertop {
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;    
}

However, it top_border imagedoes not appear if I do not write the text inside <div>, but I do not want it. How can i fix this?

+5
source share
6 answers

Since the div is empty, there is no content to “open”, leaving the div at 0px. Set explicit dimensions in the div and you will see a background image.

.bordertop 
{
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;    
    height: 100px;
    width: 100%; /* may not be necessary */
}
+10
source

You may need to set css widthand heightyour item <div>to whatever size you want

.bordertop {
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;
    width: 200px;
    height: 100px;
}
+2
source

div a height:1px. . div 0px , , .

padding-top:1px

, , - background-image body CSS. , body.

.

+1

, , ^^ ', , , , / css bordertop, . , , , / - .

, , , , , , , - .:) , .

0

, , - : :

width:100%;
height:0;
padding-top:[ratio]%;

:

width:[ratio]%;
height:0;
padding-top:100%;

You need to determine which side is larger and take this size as 100% then calculate [ratio] - the percentage of the shorter dimension relative to 100% of the longer dimension. Then use one of the above solutions.

0
source

I had the same problem for some time, my solution gave style lines: min-height. This opens the div to height if there are no elements inside. Height may increase with more elements inside, but no less.

Code example:

.fixed-bg {

    /* The background image */
    background-image: url("img_tree.gif");
    /* Set a specified height, or the minimum height for the background image */
    min-height: 500px;
    /* Set background image to fixed (don't scroll along with the page) */
    background-attachment: fixed;
    /* Center the background image */
    background-position: center;
    /* Set the background image to no repeat */
    background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
    background-size: cover;
}

The code is obtained from https://www.w3schools.com/cssref/pr_background-attachment.asp

0
source

More articles:


All Articles