"Efficiently incorporating a responsive sprite background image on your website -

Hey there! I am dealing with a situation where I have two columns of content in a container. The first column contains text, and the second column is a span with a background sprite image. The issue arises when the screen resolution gets smaller - I want the background sprite image to scale along with the H5 element by using a percentage width. Is there a solution for this problem?

h5{
    float:left;
    display:block;
    width:800px;
}

.sprite{
    background-image: url("assets/img/website_sprite_a.png");
    background-position: -60px -60px;
    float:left;
    display:block;
    width:64px;
}

<div class="container">
 <h5>Title
 </h5>
 <span class="sprite">
 </span>
</div>
csshtml

Answer №1

If you're in a situation like yours, I would suggest using a single background-image. However, if you have numerous images or are adamant about doing so, the background-size property can come in handy.

According to resources on MDN:

The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.

.sprite{
    background-image: url("assets/img/website_sprite_a.png");
    background-position: -30% -30%; //use % instead pixels
    float:left;
    display:block;
    width:64px;
    background-size: 100%; //play with this
}

It's also essential to check out:

In my exploration, I experimented with this concept on JSFIddle. Resize your browser window to witness the effect.

Answer №2

After much searching, I finally discovered a solution to a problem that had been bothering me for nearly a year. Despite the lack of direct answers available, I decided to experiment on my own. While I have not yet tested this technique on IE8, I have given up on trying to make it work on IE6/7.

The key is to utilize background-position (with percentages based on the sprite image), padding-top (also in percentages of the total width of the sprite image), and background-size: cover.

You can try it out yourself at this jsfiddle link.

#wrapper {
    position: relative;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('http://upload.wikimedia.org/wikipedia/en/2/2e/Sprite_logo.jpg');
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: cover;
    padding: 50% 0 0 0;
    width: 40%;
}

<div id="wrapper">
    <div class="div"></div>
</div>

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

List of prices with a dotted line separating the price and product, adjusting its width based on

I am attempting to create a price list with a dotted underline between the price and product that adjusts dynamically in width. Here is my code snippet: https://jsfiddle.net/romariokbn/2gm27rv6/ <ul class="how-can-i-do"> <li> <span ...

htmlcss

Scrolling to an id within dynamically loaded content using jQuery after an ajax request

After loading content via ajax, I am unable to scroll to the item, as the page remains at the top. Strangely, when I refresh the page dynamically with content caching enabled, the page scrolls to the desired target. var startPageLoader = function( pid, si ...

javascriptjqueryhtmlajaxscroll

The automatic selection process for IE document modes

It may seem simple, but I'm a little perplexed about how IE decides which browser mode to use. In IE9, there are options such as IE9 Compatibility Mode, IE9, IE8, and IE7. These modes are selected automatically depending on the webpage. Can someone e ...

htmlinternet-explorer

JS Difficulty with Applying Underline in Contenteditable

Recently, I encountered a glitch with document.execCommand that seems puzzling. Allow me to explain the situation at hand. $("#underline-btn").click(function() { document.execCommand("underline"); }); <script src="https://ajax.googleapis.com/ajax/l ...

javascriptjqueryhtmlcontenteditableexeccommand

Error! Uploading files with Danish characters in their file names causes a problem

Currently, I am utilizing a third party API called Podio to successfully upload files through its functions. The only issue I have encountered is when trying to upload a file named "Skærmbillede.jpg," I receive the following error: Fatal error: Uncaught ...

phphtml

What is the best way to enable CSS IntelliSense for a Nuxt project?

Currently, I am undertaking a project using Nuxt.js and have set up a Docker image to manage all aspects of it. Additionally, I am looking to integrate MDBVue as a CSS library into my project. After some research, I learned that in order to utilize this li ...

cssvue.jsvisual-studio-codeintellisensenuxt.js

Retrieve information from hyperlinks and organize it into a structured format in a chart

Is there a way to extract href data from a website page and input it into a table using jQuery? I often have clients who need me to transfer links from their old sites to my CMS. If we can put these links into a spreadsheet format, it would make importing ...

jqueryhtml

CSS - stacking containers vertically with scrollbars

I am in need of a vertical stack of blocks, which may include scrolls, contained within a fixed-sized container without scrolls. The number of visible blocks is dynamically managed by JavaScript code. Some blocks can be hidden or shown, and when a block is ...

htmlcss

What strategies can be implemented to enhance accessibility for custom table behavior?

Our team is currently working on a customized web application for a client's specific needs regarding data tables. The requested functionality includes the ability to sort table columns by clicking on the header, which has already been successfully im ...

htmlhtml-tableaccessibilitywcagwcag2.0

Can someone please explain the purpose of row-sm and row-cols-sm-n (where n<12)? I've come across the col-sm-n (where n<12) but I'm unsure about how row-sm is used

From my understanding, when using col-sm-n in Bootstrap, the columns in a row will stack on top of each other when the device screen width is less than the specified size for sm. But what about row-sm? Does it function similarly to col-sm? And what exactly ...

htmlcssbootstrap-4flexbox

Simple Method To Dynamically Align jQuery LightGallery Thumbnails On a Responsive CSS Website

Can anyone assist me quickly? I've implemented everything but am facing a slight issue with the centering of my ul code. I've tried various solutions without success. Here is my code, any advice would be greatly appreciated (I may sound stressed ...

jquerycssgallerythumbnailscenter

Adjust the clarity of the elements within my HTML document

I have been working on creating a login page that will appear in front of the main webpage. Through my online research, I discovered a technique to blur the main webpage background until the user logs in. Below is the code snippet: HTML: <div id="logi ...

javascriptjqueryhtmlcss

Struggling to break free from the confines of an overflow-hidden container in swiperjs due to

I have a slider that utilizes swiperjs and I want to incorporate a dropdown menu within each swiper-slide. However, I've encountered an issue where the dropdown menu is unable to escape the root container due to the positioning constraints. For a dem ...

cssescapingoverflowhiddenswiper.js

Troubles with the placement of the navbar icon in responsive design

After following a tutorial on responsive navigation bars (https://www.w3schools.com/howto/howto_js_topnav_responsive.asp), I successfully implemented the navbar on my website. However, I encountered an issue with the icon placement when clicked. Here is ho ...

htmlcss

When the size is adjusted, seamlessly swap out the current image for a new one without the need to refresh the page

I am currently in the process of developing a website. As part of this project, I am utilizing a bootstrap carousel to display images dynamically based on the screen orientation. Using JavaScript, I am capturing the width and height of the screen and sen ...

phphtmljsonajax

Require help with personalizing a jQuery horizontal menu

I recently downloaded this amazing menu for my first website project By clicking the download source link, you can access the code Now, I need your kind help with two issues: Issue 1: The menu seems to be getting hidden under other elements on the page ...

javascriptjqueryhtmlcssnavbar

jQuery Mobile - Struggling to hide a button with traditional jQuery techniques

Looking for help hiding a simple button? <input type="button" id="logoutBtn" value="logout" data-theme="d" data-inline="true" aria-disabled="false"> Attempted to hide it with this code but it didn't work: $('#logoutBtn').hid ...

javascriptjqueryhtmlcssjquery-mobile

Strategies for addressing frontend challenges in Bootstrap 4

Currently, I am enrolled in a program to enhance my knowledge of Angular and have encountered a challenge. My project is utilizing the most recent version of bootstrap, which is bootstrap 4. However, I am facing issues with the main page not functioning co ...

htmlcssbootstrap-4

The barely noticeable difference of 1 pixel in the link between Chrome and Firefox

Hello there, I need some advice on how to adjust a one-pixel difference between Chrome and Firefox. The menu links appear correctly in Chrome, but in Firefox, they are 1px smaller than they should be. Below is the CSS code: ul#menu { padding: 0 0 2px ...

htmlcssgoogle-chromefirefoxbrowser

Restore original scale ratio to 1:1 following zoom

I am looking for a way to revert the image back to its original zoom level when a button is clicked using the onclick() event. I require the specific code for the onclick() event function. This is the div element in my HTML: div id="zoom"> ...

javascripthtmljqueryzoomingpan