Define image in CSS, not in HTML

Question

I'm having an issue, and I'm not actually sure what is going wrong.

I have an HTML page, and my images are currently linked in as such.

<span class="tribar" onclick="openNav()"><img src="url_here"></span>

I was trying to eliminate all image urls from the HTML source code, and have them in the css. This is what I have tried.

<span class="tribar" onclick="openNav()"></span> // HTML

.tribar {
display: inline-block;
background-image: url("image_url") no-repeat top left;
width: 220px;
height: 220px;
}

But my HTML span is coming up blank, and I can't seem to figure it out.

This should be a simple mistake.

My bad, twas a typo on SO, my code does not reflect that. Still having the same issue. — Ronald LaPlante
– Ronald LaPlante, Commented Nov 14, 2018 at 11:23
Don't do this. You want something that people can click on to do something. That's a <button>, not a <span>. Buttons are interactive controls (they show up as such in screen readers, you can tab to them if you can't use a mouse, etc). You also want something to tell people what clicking on the button will do. That is Content, not Presentation. The right place to put content is HTML not CSS. Use an <img> and give it an alt attribute. — Quentin
– Quentin, Commented Nov 14, 2018 at 11:25
See my comment above, my code does have no=repeat. no=repeat was a typo on here. — Ronald LaPlante
– Ronald LaPlante, Commented Nov 14, 2018 at 11:25

Roko · Accepted Answer · 2018-11-14 11:39:26Z

3

You can't use "no-repeat" value inside of the "background-image:" property. You should add these two lines in your CSS Style instead:

background-position: top left;
background-repeat: no-repeat;

If you want to do it in one line, you should use "background:" property:

background: url("image_url") no-repeat top left;

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

answered Nov 14, 2018 at 11:39

Roko

12712 bronze badges

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

Comments

Dániel Kis-Nagy · Accepted Answer · 2018-11-14 11:32:46Z

1

I'd recommend doing it with a <button>:

function opennav() {
  alert("Hello!");
}

.nav-button {
  border: none;
  background: none;
  font-size: 0; /*hide alt text*/
}

.nav-button:before {
  display: inline-block;
  content: url(http://placekitten.com/220/220);
  width: 220px;
  height: 220px;
  cursor: pointer;
}

<button class="nav-button" onclick="opennav()">Alt text for screen readers</button>

Comments

DreamTeK · Accepted Answer · 2018-11-14 11:39:38Z

1

It's fine to hold the image source in css as long as the url for the link or the code for the button is held on the page.

I recommend this way:

a {
  display: block;
  width: 220px;
  height: 220px;
}

.tribar {
  display: block;
  background-image: url("https://jobadder.com/wp-content/uploads/stackoverflow.com-300.jpg");
  background-size: contain;
  width: 100%;
  height: 100%;
}

<a href="#"><span class="tribar" /></a>

answered Nov 14, 2018 at 11:39

DreamTeK

34.6k30 gold badges127 silver badges180 bronze badges

Collectives™ on Stack Overflow

Define image in CSS, not in HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related