adding background image using css, not working?

Question

I've included code from the index.html and style.css pages are linked correctly as other elements are all working fine.

.fullbox {
  border: 1px solid orange;
  background-image: url(background-image:url(/images/topmain.jpg) no-repeat;
}

<div class="row">
  <div class="col-12">
    <div class="fullbox">
      <h2>plumbing</h2>
    </div>
  </div>
</div>

Are you getting any error messages in Developer tools? Are you sure the URL to the image is correct? — Adi Bradfield
– Adi Bradfield, Commented Jul 7, 2018 at 12:33

vaishali kapadia · Accepted Answer · 2018-07-08 11:18:09Z

1

You have mistaken CSS here

background-image: url(background-image:url(/images/topmain.jpg) no-repeat;

It should be

background-image: url('images/topmain.jpg');
background-repeat: no-repeat;

OR

background: url(/images/topmain.jpg) no-repeat;

Update in your snippet

.fullbox {
  border: 1px solid orange;
  background-image: url('images/topmain.jpg');
  background-repeat: no-repeat;
}

<div class="row">
  <div class="col-12">
    <div class="fullbox">
      <h2>plumbing</h2>
    </div>
  </div>
</div>

Another live example

.fullbox {
  border: 1px solid orange;
  background-image: url('https://cdn.dribbble.com/users/1928643/avatars/small/b3f1a5ea4d68ff539b8f808ff3c4b8a5.jpg');
  background-repeat: no-repeat;
}

<div class="row">
  <div class="col-12">
    <div class="fullbox">
      <h2>plumbing</h2>
    </div>
  </div>
</div>

To learn more about background-image property and path

https://www.w3schools.com/cssref/pr_background-image.asp

edited Jul 8, 2018 at 11:18

answered Jul 7, 2018 at 12:32

vaishali kapadia

94411 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bazla Over a year ago

Embarrassing Mistake.

Iniobong Dickson Junior · Accepted Answer · 2018-07-07 12:25:12Z

0

background: url(/images/topmain.jpg) no-repeat; }

answered Jul 7, 2018 at 12:25

Iniobong Dickson Junior

235 bronze badges

Comments

omid ashrafi · Accepted Answer · 2018-07-07 12:29:54Z

0

background: url(source/...) center center/cover no-repeat fixed;1)you can not use no-repeat in background-image , instead you should use JUST background syntax. e.g 2) after url no need to write background-image again, you can just go ahead and give your relative address , e.g background-image: url(source/...) hope it helps :)

answered Jul 7, 2018 at 12:29

omid ashrafi

1

1 Comment

Bazla Over a year ago

Thanks for your reply. It's was helpful.

Collectives™ on Stack Overflow

adding background image using css, not working?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related