What to do when the image-sprite is too large for the container and needs to be resized to fit within a smaller

Is there a way to resize the sprite image to fit the container without using the tag?

The sprite image dimensions are 562px (x5) width x 562px height

main-desktop.png

.container_outer{
  height:200px;
  width:100%;
}
.chrome-part, .ie-part, .firefox-part, .opera-part, .safari-part{
  background-image:url("main-desktop.png");
  background-repeat:no-repeat;
  height:562px;
  width:562px;
  float:left;
}
.container_outer > .chrome-part{
  background-position: 0px 0px;
  border:solid 1px red;
}
.container_outer > .ie-part{
  background-position: -562px 0px;
}
.container_outer > .firefox-part{
  background-position: -1124px 0px;
}
.container_outer > .opera-part{
  background-position: -1686px 0px;
}
.container_outer > .safari-part{
  background-position: -2248px 0px;
}
<div class="container_outer">
  <div class="ie-part"></div>
  <div class="firefox-part"></div>
  <div class="opera-part"></div>
  <div class="safari-part"></div>
  <div class="chrome-part"></div>
</div>

htmlcssbackground-imagecss-sprites

Answer №1

To achieve the desired effect, use the background-size property with a value of cover. This will scale the sprite to fit the container at its maximum size. Below is an example using 200px square containers.

.container_outer{
  height:200px; /* assuming a square container 200px */
  width:100%;
}
.chrome-part, .ie-part, .firefox-part, .opera-part, .safari-part{
  background-image:url("https://i.sstatic.net/2VKyZ.png");
  background-repeat:no-repeat;
  background-size: cover;  /*  as large as possible */
  height:100%;
  width:200px;  /* assuming a square container 200px */
  float:left;
}
.container_outer > .chrome-part{
  background-position: 0px 0px;
  border:solid 1px red;
}
.container_outer > .ie-part{
  background-position: -200px 0px;
}
.container_outer > .firefox-part{
  background-position: -400px 0px;
}
.container_outer > .opera-part{
  background-position: -600px 0px;
}
.container_outer > .safari-part{
  background-position: -800px 0px;
}
<div class="container_outer">
  <div class="ie-part"></div>
  <div class="firefox-part"></div>
  <div class="opera-part"></div>
  <div class="safari-part"></div>
  <div class="chrome-part"></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

Incorporate a glyphicon into a webpage design that wasn't originally built with bootstrap while maintaining the original layout

Looking to jazz up my vintage website with some cool glyphicons on a specific page. Don't want to mess up the entire look of my site by installing bootstrap. Is there a way to add just the "glyphicons functionality" without changing everything else? ...

csstwitter-bootstrapglyphicons

The keyboard automatically disappeared upon clicking the select2 input

Whenever I select the select2 input, the keyboard automatically closes $('select').on('select2:open', function(e) { $('.select2-search input').prop('focus',false); }); Feel free to watch this video for more i ...

javascripthtmlcssjquery-select2

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack. The grid is currently displaying like this: image: https://i.sstatic.net/RPKvH.png const path = require("path"); var webp ...

cssreactjswebpackag-gridag-grid-react

Having trouble getting the show/hide div feature to work in a fixed position on the

Trying to show/hide a div using jQuery isn't working when the div is wrapped in a position:fixed element. However, changing it to position:relative makes the show/hide function work again. You can see an example of the working version with position:r ...

jquerycss

Populating a div with letter-spacing

I'm facing a challenge in populating a div with text using letter-spacing. The issue at hand is that I am unsure of the width of the div. Initially, my thoughts leaned towards using text-align= justify, however, I found myself lost in the maze withou ...

javascriptcsshtmlletter-spacing

Revamping HTML Label 'for' with JavaScript: Unveiling Effective Techniques

I'm facing an issue with changing the target of a label that is associated with a checkbox using JavaScript. Here's the code I have: <input type="checkbox" id="greatId" name="greatId"> <label id="checkLabel" for="greatId">Check Box&l ...

javascripthtmllabel

Tips for aligning a radio button and label on the same line without breaking the layout in HTML and CSS

I'm encountering a problem with positioning an HTML radio button alongside its label. When the label text is too lengthy, it ends up wrapping below the radio button instead of staying on the same line. Here is the html: <div class="form-check ...

htmlcssfrontendbootstrap-5

Due to the feature in VISUAL STUDIO CODE that presents folders and subfolders at the same level

While working on my Angular project, I encountered an issue with creating a subfolder within a folder. Despite trying the same process in Windows Explorer, I faced the same problem of them appearing on the same level. What could be causing this discrepan ...

htmlcssangulartypescript

Navigating through pages: How can I retrieve the current page value for implementing next and previous functions in Angular 7?

Greetings, I am a new learner of Angular and currently working on custom pagination. However, I am facing difficulty in finding the current page for implementing the next and previous functions. Can anyone guide me on how to obtain the current page value? ...

htmltypescriptangular7

Accessing a JSON value in SCSS for localization

I have a JSON file containing all the values that I want to use for internalization in my app. On the HTML side, I am able to retrieve the values, but on the CSS side, I am using a "before" pseudo-element. In my HTML, I am using the class "menu-input" li ...

cssangular

Is there a way to automatically display the detailsPanel in Material-table upon loading?

I am currently working on creating a subtable for the main React Material-Table. So far, everything is functioning correctly as expected, with the details panel (subtable) appearing when the toggle icon is pressed. Is there a way to have it displayed by d ...

javascripthtmlreactjsmaterial-uimaterial-table

Issue with margin-bottom in flexbox causing layout problems

My design conundrum lies within a flexbox structure where I desire specific elements to have varying amounts of spacing, prompting me to experiment with margins. At the top of my box, there is a header that requires some distance between itself and the su ...

htmlcssflexboxmargin

Enhancing this testimonial slider with captivating animations

I have designed a testimonial slider with CSS3 and now I am looking to enhance it by adding some animation using Jquery. However, I am not sure how to integrate Jquery with this slider or which plugins would work best for this purpose. Can anyone provide g ...

javascriptjquerycss

Ways to target other links exclusively during hover effect on a single link

I've been attempting to shrink all other links when one link is hovered over, but I'm only able to make the links after the hovered one shrink. .navlink { width: 100px; display:inline-block; background-color: red; } .navlink:hover~.navl ...

css

New to the world of web design and seeking answers as to why my style is not being applied

After diligently following the courses on CodeAcademy (I know, kind of lame but it's a start), I finally feel confident in my ability to write my own HTML and CSS code. However, when I tried to do so using Sublime Text 3 and opened my HTML file, I not ...

htmlcss

challenges with website design on Internet Explorer 7

Welcome! This is my HTML code: <div style="width:220px;float:left;" id="radio_text"> <ul style="width:20px;float:left;display:block;"> <li style="list-style:none;line-height:13px;height:13px;float:left;"><input type="radio ...

htmlcssinternet-explorer-7html-lists

How to align a button vertically centered next to a matInput using Angular Material

Is there a way to vertically center a button next to matInput in Angular material? The submit button appears too low compared to the "First Name" input field, as shown in the images below: https://i.sstatic.net/PZGAg.png https://i.sstatic.net/ZuxHc.png ht ...

csssassflexboxmaterial-uiangular-material

Encountering a predicament when attempting to retrieve an image from an alternative

[index.jsp][5] style.css [problem][6] [folder hierarchy][7] Although everything runs smoothly when the file is located in the css directory, it fails to show any images if placed in the images folder. Kindly provide assistance. ...

htmlcssjsp

Viewing a Google Charts graph upon the loading of a web page

Utilizing the Google Charts library, I have incorporated a graphic on my web page that is dynamically added using AJAX into a <div> element. To display the graph when the page loads, I have written the following code: <script type="text/ ...

javascripthtmlajaxgoogle-visualization

The MySQL query is returning a blank result with only the column headings displaying

I have been working on improving my skills in PHP and AJAX by developing an application that enables users to search a database for real-time product stock information. Currently, I am facing an issue where the headings are displayed when a user types a le ...

phphtmlcssmysqlajax