Automatically change div background image based on window resizing

.step-1-4 {
  background:url('../images/gadget-4-sprite.png') 
  no-repeat; width:950px; 
  height:70px;
  margin-left: 15px;
}

The code above sets the CSS for a div containing a background image. The dimensions of the div match that of the image, but when the window is resized smaller than the image width, it gets cropped.

Is there a way to style the CSS so the div resizes with the image inside? I attempted setting the width of the div to 100% which worked for resizing the div correctly, however the image did not resize along with it. If this approach isn't ideal, how can this be done using an <img> tag instead?

htmlcss

Answer №1

ensure to utilize either background-size:cover; or background-size:100% 100%;

here is how your css should look like ::

.step-1-4 {
  background:url('../images/gadget-4-sprite.png') no-repeat;
  background-size:100% 100%; /*..or  cover ...*/
  width:950px; 
  height:70px;
  margin-left: 15px;
}

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

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

I have a collection of links: <p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br> 4 Bedrooms x 2.5 Bathrooms</p> <p><a href="#" class="floorplan" data-id="wood">< ...

javascriptjqueryhtmlcss

Tips on positioning an image at the center of an HTML page

When designing a website, I encountered an issue where only a portion of the image was displaying in the slider due to the fixed height of the div being set to 500. I want the full image to be displayed centered within the same height. <div id="myCar ...

htmlcsstwitter-bootstrap

A guide on activating Effect in Div using just css

I have tried all the questions and answers related to this topic. Additionally, I attempted to solve related questions but was not successful. Please read my question thoroughly. What I Want: When I click on the click me Div, the second hiddendiv Div i ...

htmlcsstoggle

"Troubleshooting: Why Won't My Entire Div Display on the

Struggling with a website rebuild due to my limited knowledge of HTML/CSS. For some reason, this whole div section isn't showing up as it should. Here is the problematic div: <div class="container clearfix"> <div class="border-shade sli ...

htmlcss

Arrange list items in a circular pattern

Is there a way to achieve the desired appearance for my navbar like this link? I have tried rotating the text, but the vertical text ends up too far from the horizontal. Any suggestions? .vertical { float:right; writing-mode:tb-rl;/*IE*/ w ...

htmlcssnavbar

What are the guidelines for incorporating tag names in CSS selectors?

I created a button that when clicked, displays a table containing actors. I have named them as follows: <button class="actors">Show actors</button> <table class="actors">...</div> Next, I want to style and access them in my CSS (a ...

htmlcsscss-selectors

Mediawiki needs to be able to respond effectively to constantly changing and evolving content

My extension generates content dynamically for certain pages. For example, I create headlines using <html> <h1>, <h2> and <h3> tags. I want my mediawiki to respond to these headlines and generate a directory dynamically. I attempte ...

phphtmlmediawiki

CSS: Creating a block that stretches the entire width of its parent block

I've been facing the same issue multiple times. Whenever I use the float property to display one block, the next block ends up overlapping with the first one. For example: Consider the following block of code: .row_item{ width: 30%; display: block; ...

htmlcsscss-float

Loading 3D models in Three.js from the cache

Every time my page reloads, the loader loads objects from the URL instead of cache. Is there a way to check if the resource is in cache and load it directly? Appreciate your help! ...

javascripthtmlthree.js

Trigger .gif on hover using ng-repeat in AngularJS

Many solutions to this problem involve using jQuery, such as the following examples: Stop a gif animation onload, on mouseover start the activation and Animating a gif on hover. However, I'm interested in achieving the same functionality using Angular ...

javascripthtmlangularjsanimationgif

Accessing content from a different HTML document

I'm currently working on a project using node.js where I need to take input from a text box in an HTML file and store it in an array. However, I'm struggling with how to achieve this. My ultimate aim is to create a chat application, and I believe ...

javascriptjqueryhtmlnode.jsget

Issue with text-nowrap not functioning as intended within Bootstrap 4.5 table cells

Is there a way to eliminate the space between two columns in my layout? I want to get rid of the highlighted space below. I attempted using text-nowrap, but it didn't achieve the desired result. <link href="https://stackpath.bootstrapcdn.co ...

csstwitter-bootstrapbootstrap-4html-tablenowrap

Repairing the Left-sided Popup Leaflet

Can someone help me with fixing the positioning of the Popup to the left of the map? Currently, it does not stay aligned to the left edge when moving the map. I tried using position: fixed in my styling, and while everything looks good when zooming, it br ...

javascriptcssreactjsleaflet

AngularJS feature that enables resizing modal popup dimensions through a modal service

Currently working on an AngularJS application and in need of opening a specific modal popup with larger dimensions. Are there any AngularJS libraries available that cater to customizing modal popups? Explored AngularStrap (http://mgcrea.github.io/angular-s ...

cssangularjstwitter-bootstrapangular-uiangular-ui-bootstrap

Vuetify: how to disable the color transition for v-icon

My menu includes both icon and text items, with hover color styled using the following CSS: .v-list-item:hover { background: #0091DA; } .v-list-item:hover .v-list-item__title, .v-list-item:hover .v-icon { color: white; } The problem is that the ...

cssvue.jsvuejs2css-transitionsvuetify.js

What is preventing the Selenium WebDriver from clicking on elements, despite their presence and focus?

Once again, I am facing a Selenium issue. Last week everything was running smoothly, but today when I attempted to write some new tests, I encountered a strange problem. Every time I try to click on something, Selenium seems to ignore the click. Even wit ...

javahtmlselenium

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Having a data-filled table, I am looking to implement smooth transitions when adding or deleting an item. This is a ReactJS project utilizing Material-UI. The desired effect is similar to the one demonstrated in their example. While they use a List compon ...

cssreactjshtml-tablematerial-ui

Applying binary information to an image

Let's say I have an <img/>. The img is initially set with src='http://somelocation/getmypic'. Later on, there might be a need to change the content of the image based on some ajax call that returns binary data. However, this decision c ...

javascripthtmlajaxasp.net-mvcimage

Can certain parts of an MP4 file be accessed remotely through a network connection?

With modern MP4 players, you have the ability to skip to any part of a video without needing to download the entire file. Take a look at this example video: You can navigate to any point in the video before it finishes downloading. I am curious if there ...

pythonhtmlvideo

Adjusting canvas size to match content dimensions

I posed a similar inquiry and it was categorized as a duplicate even though the suggested duplicate did not provide an answer to my question. Edit: The purported duplicate was [stackoverflow.com/questions/17211920/make-canvas-height-auto][1] I am utilizi ...

javascriptjqueryhtmlcanvas