CODEWITHSUNDEEP
htmlcss
Ch Sunrain
Ch Sunrain

Reputation: 21

how to show this background image

you can open it using browser, but I cannot display the background image in these code. what problem it is?

<!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" class="item2" data-aos="fade-up">
  </div>
</body>

</html>

Upvotes: 0

Views: 173

Answers (6)

kishoremani
kishoremani

Reputation: 1

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>

Upvotes: 0

deadweig-ht
deadweig-ht

Reputation: 95

  • 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>

Upvotes: 0

JHEUNG
JHEUNG

Reputation: 166

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">

Upvotes: 0

Thum Choon Tat
Thum Choon Tat

Reputation: 3090

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">

Upvotes: 0

Pablo
Pablo

Reputation: 6058

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>

Upvotes: 1

Samuel Smith
Samuel Smith

Reputation: 149

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">

Upvotes: 0

Related Questions