Describe the appearance of an element using CSS, rather than HTML

Currently encountering an issue, but unsure of the cause.

My HTML page has image links like this:

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

I attempted to remove all image URLs from the HTML code and place them in the CSS. Here's what I did:

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

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

However, my HTML span now appears blank and I'm unable to identify the issue.

This seems like a simple mistake that I can't seem to pinpoint.

htmlcssbackground-image

Answer №1

When using the "background-image:" property, remember that the "no-repeat" value cannot be used within it. To achieve the desired effect, include these two lines in your CSS Style:

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

If you prefer a one-liner approach, utilize the "background:" property:

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

For more information, check out:
https://www.w3schools.com/cssref/pr_background-image.asp
https://www.w3schools.com/cssref/css3_pr_background.asp

Answer №2

If you're looking for a recommendation, I suggest using 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>

For more information, check out this link on CodePen.

Answer №3

Storing the image source in CSS is a convenient practice, especially when the link URL or button code is included on the webpage as well.

Here's a recommended method:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Nested Divs in CSS

I'm really struggling to get a div to display under another div in the way they usually do. Currently, I am using MaterializeCSS for my layout setup: <div class="container valign-wrapper"> <div class="customClass"></div> &l ...

cssmaterial-designflexboxmaterialize

What can be used instead of the html5 output tag?

After creating a webpage with a form that includes several "number" input fields, I utilized the html output tag to showcase the results. However, when viewed in MSIE, although the calculations were successfully done, the output tag failed to display the ...

html

What is the best way to include {text} (without using quotation marks) in a PHP array for the Google Chart API?

Based on the guidance from Uberfuzzy, I made some updates: $a = '{"role": "tooltip","p": {"html": true}}'; $aa = json_decode($a,true); $data[0] = array_merge(array(product),$info,array($aa)); Have a look at this link for details on customizi ...

javascriptphpjqueryhtmlgoogle-visualization

HTML5 audio recording

I have been exploring different methods to record audio using HTML5, but so far I have not found a solution. I attempted to utilize this particular example without success. It seems that the statement about lack of support from any browser may be true. ...

htmlaudio-recording

Conceal picture when clicked

My goal is to hide an image upon clicking and then show it again by clicking a specific tag. I've attempted various codes, but none have been successful. Every time I click, the image continues to add to the page. <body> <a href="#" class= ...

jqueryhtml

"Track the progress of a form submission with a loading indicator using Sweet

I am looking to incorporate a waiting time animation when submitting a form, and I prefer using SweetAlert over a traditional loading image. Here is the basic code snippet: $("form").submit(function (e) { e.preventDefault(); // prevents def ...

javascripthtmlsweetalert2

Retrieve the names of all classes listed in the internal stylesheet

Is there a way to extract the names of all classes defined in an internal stylesheet using jQuery? For example, if I have the following internal stylesheet: <style id="custstyle" type="text/css"> .column{ font-size:13px; ...

jquerycss

Encountering a problem with Selenium when dealing with tabular data displayed in a DIV format on a website, where each row is encapsulated within its own DIV element

While creating Selenium automation tests for a website with multiple rows contained within a main DIV element, each row represented by a separate DIV. For example, if there are 5 dynamically generated rows, the HTML code structure would look like this: < ...

javascriptjavahtmlcssselenium

Creating dynamic SVG animations through CSS instead of relying on the <animateMotion> tag offer greater flexibility and control

I am attempting to position an arrow at the midpoint of a bezier curve. The method outlined in this StackOverflow question, which involves using <animateMotion> to move a <path> representing the arrow and freezing it at the center of the curve, ...

cssanimationsvg

Unusual problem arises with styling and element measurement (scrollWidth / scrollWidth) in Gatsby framework

Currently, I am working on a component that splits lines based on the parent container's width without overflowing. Despite successfully implementing this in a sandbox or pure react application (even with custom fonts), I encountered issues when using ...

javascriptcssreactjsgatsby

Can you explain the significance of the "--" within CSS selectors?

My CSS skills are not the greatest and I stumbled upon a snippet of code that is puzzling to me. .grid-product__title.grid-product__title--body:hover { text-decoration: underline; } I checked MDN and it usually defines a reusable property, like a vari ...

htmlcsscss-selectors

It appears that Internet Explorer is still animating/processing my loading.gif despite being set to display:none

It seems that the issue I'm encountering is related to the inconsistent starting position of the loading.gif animation when performing an ajax request. In Internet Explorer, the animation appears to start from a random point, while in Firefox it alway ...

htmlcss

Issues retrieving information from MySQL through an AJAX request

I am encountering an issue while attempting to fetch data from a database. The code seems to only retrieve the initial row of data and not any subsequent rows. Although the data is correct, it remains the same regardless of the input provided in the HTML f ...

phpjqueryhtmlmysqlajax

Tips for incorporating material-ui icons into the column component of a data-grid component

I am currently working with the material-ui data-grid and I would like to display Edit icons from material-ui next to each row. Unfortunately, the data-grid does not provide any props specifically for this purpose. Below is the code snippet: import React ...

javascripthtmlreactjsdatagridmaterial-ui

Tips on automating clicking the cookie button using Selenium?

Currently, I am attempting to extract data from the following website. I need to access various subpages, but some of them are hidden behind a "load more" button. I decided to use Selenium to click the button, but I am encountering difficulty with getting ...

pythonhtmlselenium-webdriverweb-scraping

Issues with the alignment of ion-grid in Ionic/Angular application

I am facing an issue in my ionic/angular project where I am attempting to create two columns within a row using ion-grid, ion-row, and ion-col. However, the content of the second column is unexpectedly appearing below the first column instead of beside it. ...

cssangularionic-framework

Basic inquiries concerning Vue.js and JavaScript

Hey there, I recently developed a small app to practice my Vue skills. However, there are a few features that I would like to implement but I'm not sure how to do it just yet. <div class="container" id="app"> <div class="row"> <d ...

javascripthtmlvue.jsvuejs2

Exploring the contrast in importing CSS between the HTML header, JS file, and Vue Component

Exploring the world of Vue with webpack, I find myself curious about the various ways to import CSS. It appears that there are three methods for importing CSS: Adding style sheets directly to HTML headers: <link type="text/css" rel="stylesheet" ... &g ...

javascripthtmlcssvue.js

What is the best way to choose a specific item in a table with Python Selenium?

I'm currently exploring how to utilize Python Selenium for entering a custom value into an input box on a specific website. Upon examining the HTML structure, I noticed that this particular element is nested within a table. Both the HTML snippet and ...

pythonhtmlseleniumelementsendkeys

Creating a Contact Form with Email Submission using Html and Php

Establishing Database Connection $server = 'localhost:8080'; $username = 'root'; $password = ''; $database = 'resort'; $connect = mysqli_connect($server, $username, $password ) or die(mysqli_error.&apos ...

phpjqueryhtml