Tips on effectively utilizing CSS sprites without a border on images

I am currently working on optimizing my website by using sprite images.

The image I am using is in png format and looks like this:

https://i.sstatic.net/pFhPq.png

Here is a snippet of my CSS code:

.bg-upperbar_1 {
    width: 55px; height: 55px;
    background: url('../../assets/img/home/spritesheet.png') -10px -10px;
}

And this is the relevant part of my HTML code:

<a class="home-upperbar home-top" href="<?php echo site_url('products/collection_watches'); ?>">
<img class="bg-upperbar_1">
</a>

However, when I try to load the page, I encounter a border around the image, even though it is in png format, like this:

https://i.sstatic.net/FryxX.png

Can anyone help me troubleshoot and solve this issue?

csssprite

Answer №1

The reason for the border appearing is due to the missing src attribute on your <img> tag. To use a sprite sheet as a background image, you need to attach it to the <a> tag.

.bg-upperbar_1 {
    width: 43px;
    height: 45px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -47px -42px;
}

a{
display:block;
}
<a class="home-upperbar home-top bg-upperbar_1" href="<?php echo site_url('products/collection_watches'); ?>">
</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

Display a full-width card beneath each small card in every row using CSS

In a scenario where I have designed a layout consisting of 3 column/row cards across multiple rows. Each card displays basic information, and when a user clicks on any specific card, a full-width card below that row will display more detailed information. ...

htmlcsscss-positioncardview

Is there a way to center the text at 0% using text-align in Bootstrap?

My progress bar, designed with Bootstrap, currently displays the text in a way that is not centered as desired. The issue I am experiencing is that the "0/0" text shifts to the left and using text-align: center; does not seem to resolve this alignment pro ...

htmlcsstwitter-bootstrap

Tips for showcasing two cards side by side on mobile screens?

This is my glitch. I have a layout where I see 3 cards in a row for desktops, 2 cards per row on tablets, and 1 card for mobile devices. However, I would like the cards to resize and display 2 cards in a row on mobile. How can I achieve this? Here is the f ...

htmlcssresponsive-designresponsivemobile-website

Pictures displaying various shapes in contact with each other

I have a unique challenge involving an image that has been physically cut into puzzle-shaped pieces. Is there a way to align these individual puzzle pieces using only HTML and CSS to create the illusion of a single cohesive image once assembled? It' ...

htmlcss

Display a remote page on hover using Javascript, CSS, and HTML without providing any clickable link

How can I display a preview of another page within a div container without actually making the text clickable? I want the preview to show when the mouse hovers over specific text, but I need the original text to stay on the main page. I've experiment ...

javascriptjqueryhtmlcss

What could be causing the misalignment of these two divs?

I'm struggling to horizontally align these two divs using percentages for width. Even with padding and margin set to 0, they refuse to line up properly (the second one ends up below the first). This is the code I have been using: <div style="widt ...

htmlcssalignment

Seeking to have text spill over into a different container

Novice in CSS seeks advice. I've nailed the layout of the home page for my website with two divs</p> <p><div> <div> <pre class="snippet-code-css lang-css"><code>#desktop-navbar { text-transform: uppercase; ...

htmlcss

Display a series of numbers in a stylish Bootstrap button with uniform dimensions

I am trying to find a way to show the number of days in a specific month within a bootstrap button. However, the code I have been using does not evenly distribute the buttons in terms of height and width. I would like the display to look similar to the sc ...

javascripthtmlcssbootstrap-4

URL for CSS Background-Image

While working on CSS styling for the body, I ran into a problem and was curious to understand the distinction. Initially, I tried this body { background-image: url('img/bg.png'); } However, it did not produce the desired result. http://www ...

htmlcssurlbackground-image

Issues with IE9's CSS hover functionality are causing problems

This particular css style functions well on most browsers, but seems to have compatibility issues with Explorer 9 specifically when it comes to the :hover effect. There are instances where it works perfectly fine and other times when it doesn't work a ...

htmlcssinternet-explorer-9

What is the best way to update text in an element when hovering or activating it?

I am currently designing a website with a prominently placed "Hire me" button in the center of the page. The button was implemented using the following code: <div id="hire_me_button"> <a href="contact.html"><h4 id="hire_me" class="butto ...

javascriptjqueryhtmlcss

Customize the background color of a particular select element within an array of dynamically created select elements

I've been experimenting with jQuery to dynamically adjust the background color of a select element based on the chosen option. The select elements are being generated using the following code: while ($qrow = $qquery->fetch(PDO::FETCH_ASSOC)) { ...

phpjqueryhtmlcss

The class "Accordion" is not recognized by the local Bootstrap 5 installation

Currently, I am trying to implement a vertically collapsing Accordion using the Bootstrap 5 documentation found at https://getbootstrap.com/docs/5.0/components/accordion/ Even though I have installed the library with libman, Visual Studio 2019 is showing ...

cssvisual-studio-2019bootstrap-5libman

encountered net::ERR_EMPTY_RESPONSE while attempting to locate a CSS file within an AngularJS directive

Every time my webpage attempts to access the css file from a directive, I encounter a net::ERR_EMPTY_RESPONSE. I have implemented door3's on-demand css feature, which allows for lazy loading of css files only when necessary. This feature works flawle ...

javascriptjqueryhtmlcssangularjs

Material UI Card shadow effect getting cropped

Currently experiencing an uncommon issue while using Material UI's Card component - the box-shadow is cut off on the top and bottom sides. Any suggestions on how to resolve this problem? Check out my code below: import React, { Component } from & ...

javascriptcssmaterial-ui

Image tinting color picker tool (using HTML, CSS, and web technologies)

I'm currently exploring ways to apply a filter or tint on top of an image using CSS/HTML or some lightweight solution. For example, Ideally, my goal is to only have one image displayed on the page and overlay it with a transparent filter based on a ...

jqueryhtmlcsscolorspicker

Retain the contents of the shopping cart even when the page is refreshed

For a course project, I am recreating a grocery store website and need assistance on how to retain the shopping cart values even after refreshing the webpage. Please inform me if more information is required... <button type="button" id= ...

javascripthtmlcssajax

Using the section :export in the SCSS :root declaration

In the file test.module.scss, I store all my variables for colors, typography, and more. I want to be able to use these variables in my react components. However, the file starts with :root to define the variables: :root{ --color-white: #fff; --color-b ...

javascriptcsssassexporticss

I struggle to format a classic HTML form dropdown menu that is populated using JavaScript

Hey everyone, I'm having an issue with styling a drop down menu that is populated by JavaScript. I've tried different things but nothing seems to be working. Any suggestions on how I can style the elements in the drop down? <form action="" me ...

javascripthtmlcss

Styling: Ensuring my sidebar does not overlap with my main content on the webpage

Currently, I am working on arranging my sidebar and map so that they are displayed side by side instead of the sidebar appearing on top of the map (as shown in the image). I'm seeking advice on how to achieve this layout using CSS because I have been ...

htmlcssreactjs