发表新帖
发表新帖

how to show this background image

后端 未结
关注
6 2052
别跟我提以往
别跟我提以往 2021-01-16 19:18

you can open it using browser, but I cannot display the background image in these code. what problem it is?
相关标签:
6条回答
  • 梦毁少年i
    2021-01-16 19:56

    There two things you need to do:

    1. Enclose the URL in quotes.
    2. Add some dimensions to the div.

    In the updated example below I have added a 500x500 dimension to the div

    <!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  <div style="background-image:url('https://www.marsha.com.hk/libs/img/Massage-landing 1906x810_R1-03.jpg');  
           width:100%;
           background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          position: relative; width: 500px; height: 500px" class="item2" data-aos="fade-up">
  </div>
</body>

</html>

    0 讨论(0)
  • 耶瑟儿～
    2021-01-16 19:58

    You'll need to set a height for the <div> with the background image.

    Edit: Sorry, did not notice the space in the url. Also make sure that when there is a space in the URL path to the image to enclose the url with quotes.

    In this case, since the styling is inlined with double quotes ", wrap the url in single quotes '.

    You could try:

      <div style="background-image:url('https://www.marsha.com.hk/libs/img/Massage-landing 1906x810_R1-03.jpg');  
          width:100%;
          height: 100vh;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          position: relative" class="item2" data-aos="fade-up">
    0 讨论(0)
  • 清歌不尽
    2021-01-16 20:01

    In the above, you didn't close the double quotes and also assign some height to the div and check and remove the space provided in the URL link which you have given

    <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="background-image:url(https://www.marsha.com.hk/libs/img/Massage-landing%201906x810_R1-03.jpg);
width:100vw;
        height:100vh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative"
  class="item2" data-aos="fade-up">;
</div>

    0 讨论(0)
  • 慢半拍i
    2021-01-16 20:03

    You need to replace the space with %20 and set the height of the div

    <div style="background-image:url(https://www.marsha.com.hk/libs/img/Massage-landing%201906x810_R1-03.jpg);  
           width:100%;
           height: 300px;
           background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          position: relative" class="item2" data-aos="fade-up">

    0 讨论(0)
  • -上瘾入骨i
    2021-01-16 20:03
    • You need to replace the space in your image url to %20 (for more info see this)
    • % values do not work for width and height because there is no other parent div width for it to be assigned to (think as: 100% of what?). So we assign our own (non-percentage) width and height properties to it:

    <div style="background-image:url(https://www.marsha.com.hk/libs/img/Massage-landing%201906x810_R1-03.jpg);  
            width:100vw;
            height:100vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            position: relative"
      class="item2" data-aos="fade-up">
</div>

    0 讨论(0)
  • 半阙折子戏
    2021-01-16 20:06

    try this

    <div style="background-image:url('https://www.marsha.com.hk/libs/img/Massage-landing 1906x810_R1-03.jpg');  
       width:100%;
       background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      position: relative" class="item2" data-aos="fade-up">
    0 讨论(0)
 看不清?
提交回复
热议问题