The second entry is not being styled by CSS, is there an issue with the code in this section?

I am facing a challenge while trying to set the same background image for two div elements:

.abc { background: url('images/autogen.png') no-repeat 0px -133px; width: 256px; height: 256px; };

.def { background: url('images/autogen.png') no-repeat 0px -0px; width: 128px; height: 128px; };

Here is my HTML:

<html><head><meta charset="utf8"><link href='main.css' rel='stylesheet' type='text/css'' media='all' /></head><body>
<div class="def">def</div>
<div class="abc">abc</div></body></html>

However, only one of the div elements is displaying the background image. If I switch the order of the .def and .abc definitions in the CSS file, then .def gets displayed with the background and .abc does not.

htmlcss

Answer №1

Make sure not to use ; unnecessarily in your CSS

Replace with 

.abc { 
background: url('images/autogen.png') no-repeat 0px -133px; 
width: 256px;
height: 256px;
}

.def { 
background: url('images/autogen.png') no-repeat 0px -0px; 
width: 128px;
height: 128px;
}

Ensure correct format like this:

.abc { 
background: url('images/autogen.png') no-repeat 0px -133px; 
width: 256px; 
height: 256px; }

.def { 
background: url('images/autogen.png') no-repeat 0px -0px; 
width: 128px; 
height: 128px; }

For more information, visit

Answer №2

It appears that there is a mistake with the ';' placement in the code

.abc { background: url('images/autogen.png') no-repeat 0px -133px; width: 256px; height: 256px; }

.def { background: url('images/autogen.png') no-repeat 0px -0px; width: 128px; height: 128px; }

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

Problem with Bootstrap 5 rendering on smartphones (certain sections of the design becoming unresponsive, getting cut off, or sticking to the edge of the

Everything works flawlessly on a computer, but here's what happens on a mobile device: Initial appearance: https://i.sstatic.net/r0YA0.png https://i.sstatic.net/fLOIy.png Expected appearance: https://i.sstatic.net/j8KJf.png https://i.sstatic.net/o ...

htmlbootstrap-5html-rendering

Troubleshooting Issues with Bootstrap Carousel Functionality

I'm facing some difficulties with the Bootstrap carousel on my website. I have followed all the instructions carefully and researched for solutions, but unfortunately, my carousel is not functioning properly. It seems like everything is set up correct ...

jqueryhtmlcarousel

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

Is it possible to implement a dropdown menu on my sample-page using javascript/jquery in order to switch between a custom layout and a bootstrap layout? ...

javascriptjqueryhtmlcss

Switch the style sheets after the content

How can I create a toggle effect on the :after property, switching between + and - each time the link is clicked? I've attempted to achieve this using JavaScript, CSS, and HTML, but the code only changes + to - and doesn't switch back when the l ...

javascriptcss

Determining whether a mouse click occurred in the left or right side of a DIV element

Is there a way to determine whether a mouse click occurred on the left or right side of a div element? I'm curious about calculating this: $("div").click(function(e){ // code to calculate left or right half }); <div>Content that can change&l ...

javascriptjqueryhtml

Retrieving webpage information in XML structure with CURL

My goal is to retrieve data in both XML and HTML formats using the curl command. curl --data "<xml>" --header "Content-Type: xml" http://example.com curl --data "<html>" --header "Content-Type: html" http://example.com In both cases, I r ...

htmlxmlhttpcurlweb

Vertical centering not functioning as expected due to issues with margin-top and margin-bottom

I'm having trouble centering my red block in the middle of the webpage, with the footer block at the bottom and the white block between them. Oddly enough, margin-top doesn't seem to be working for me, but left and right are functioning fine. Al ...

jqueryhtmlcss

Can a custom CSS be linked directly to the angular-cli.json file?

I'm trying to incorporate custom CSS into my angular-cli.json file, but I haven't been able to find a successful method. I attempted to use the following code: "styles": [ "styles.css", "http://site.test/mycss.css" ], However, it does ...

cssjsonangular

Updating the background image of a React app according to each component

After researching extensively and attempting various solutions, I am still struggling to make my app function correctly. My goal is to display a different background image depending on which component is being rendered on the screen. The app is built using ...

cssreactjsmaterial-uibackground-image

Trouble arises when trying to link IE7 with jQuery

I am currently testing a website with jQuery. There is a plugin that, when hovered over, slides down to reveal another banner, subsequently sliding the banner below it down as well. I have added a link on the bottom banner using z-index, and although it wo ...

jqueryhtmlajaxcss

When the text starts to overlap the column completely at approximately 700 pixels wide

Previously, everything was working fine until it suddenly broke. The column system switches to a 100% width single column at 1500px, but for some reason, the text overflows off the screen around 700px and I can't figure out why. The text at the bottom ...

htmlcss

The text is not rendering properly, with some characters being replaced by different ones

RESOLUTION: To fix the issue, eliminate font-family, font-size, and color properties from the parent div. UPDATE: The problem only occurs when I press CTRL + F5. UPDATE 2: After investigating, I found that the culprit is .site-footer with a position:abso ...

htmlcsswordpresstextvisual-glitch

Issue encountered while attempting to include a background image in React JS

I encountered an issue when attempting to include a background image in react js. ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css) Unable to locate module: An attem ...

javascripthtmlcssnode.jsreactjs

Is the table scrollable within the tbody tag?

Is it possible to create a table with a scrollbar on the right side using only CSS and without any plugins like jQuery? Additionally, I want the table header to remain fixed in place. What steps do I need to take to achieve this functionality? ...

htmlcssscroll

Angular list with a repeating group of radio buttons

I have a set of 'options', which consists of the following: {Id: 1, Label: "option 1"}, {Id: 2, Label: "option 2"} Additionally, I have a list of 'products' structured as follows: {Id: 1, Name: "Name 1", Recommend: options[0]}, {Id: ...

javascriptangularjshtmlangularjs-ng-repeat

The webpage functions properly when viewed locally, but only displays the background color when accessed online

My friend created a website using Microsoft Publisher a while back, and upon revisiting it recently, discovered that it doesn't load properly on the latest versions of Chrome and Firefox. When viewed locally, everything appears to work fine, but onlin ...

html

Identify when a click occurs outside specific elements

I've been searching for solutions to address this issue, but so far nothing has worked. Here is the JavaScript code I am using: var specifiedElement = document.getElementById('a'); document.addEventListener('click', function(eve ...

javascripthtmlcss

HTML form submitting with a symbol illustration

I am currently facing an issue with my website. I would like to create a search button using the symbol from fontawesome (<i class="fas fa-search"></i>), but I am unsure how to replace the form submission button with this symbol in order to sub ...

htmlcssforms

Understanding the Relationship Between CSS Width and Overlapping Elements

Is there a way to make my suggestion div inherit the width of the input field while overlapping the other elements? My current CSS code achieves the overlap effect, but fails to inherit the width of the input field accurately. I have attempted setting the ...

htmlcsswidthoverlapinput-field

Is there a way to modify the browser's user agent using JavaScript or HTML?

I currently have an application that is running on IE7. However, an analytics tool I rely on has recently been updated and now requires a minimum of IE8. Is there a way to modify the User Agent in IE7 using JavaScript or HTML to trick it into being recogni ...

javascripthtmlinternet-explorerinternet-explorer-7user-agent