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

Customize the bootstrap carousel to show multiple slides at the same time

I am looking to customize the bootstrap 3 carousel in order to show multiple slides at once. I understand that I could place several thumbnails in a single slide (div .item), but the issue is that the carousel will progress through them all at once, moving ...

jquerycsstwitter-bootstraptwitter-bootstrap-3carousel

Angular allows for the creation of a unique webpage layout featuring 6 divs

I am working on a project where I have an image of a car and I need to overlay 6 divs onto the image which can be selected with a mouse click. When a user clicks on one of the divs, it should change color. I've attempted using z-index, but it doesn&ap ...

htmlangular

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Displayed below is a layout with two nested divs, both featuring automatic vertical scrolling. Is there a CSS technique available to show the inner scrollbar while maintaining the inner div at 100% width? https://i.stack.imgur.com/HSKHH.png div { ba ...

htmlcss

The combination of two colors in a hard background fails to create an appealing aesthetic

Seeking assistance with an issue I encountered while trying to create a two-color background. Below is the code snippet: body, html { height: 100%; width: 100%; background: #0000ff; background: linear-gradient(180deg, #ff0000 50%, #0000f ...

htmlcsslinear-gradients

What is the best way to show toast notifications for various selections in a dropdown menu?

I have a dropdown menu labeled "FavoriteFoods" that includes options such as "Pizza," "Sushi," "Burgers," and "Biryani." When one of these food choices is selected from the dropdown, I would like a toast pop-up to appear with the message "Great choice!" ...

javascriptjqueryhtmltoast

Tips for creating a responsive CSS "drawing"

I've created an "aquarium" using HTML and CSS, Now, I want to make the entire page responsive so that the elements shrink and grow based on the browser resolution. The first step is determining how the container should be structured. Is it acceptabl ...

htmlcssresponsive-designresponsive

Text area featuring unique border design, with border color change upon focus?

Currently, I have a text area with borders that are designed in a unique way. However, I am looking to change the border color when the user focuses on the text area. Do you have any suggestions on how I can achieve this effect without affecting the curre ...

javascriptjqueryhtmlcssfrontend

Creating client side scripts for an ajax call to generate a Json object is simple once you understand the basics

Typically, when I make ajax calls, I request pure HTML. However, for various reasons, I require guidance on constructing a table (let's say of individuals and their information) when receiving a Json object. While I am capable of creating a table in J ...

javascripthtmlajaxjsonmodel-view-controller

How come jQuery is retaining the original DOM element classes even after I have modified them using jQuery?

Here is the code snippet I am working on: $(".drop-down-arrow-open i").click(function(){ console.log("The click function for .drop-down-arrow-open is triggered even when it is closed"); let thisParent = $(this).closest(".projects-container").find(".need ...

javascriptjqueryhtml

Modify the class of the dropdown and heading 2 elements if they meet specific conditions using Animate.css

Is it possible to add a class using jQuery when two specific conditions are met? 1) If the dropdown selection is either "acting" or "backstage" 2) If the membership status is set to "Non-member" If both of these requirements are fulfilled, I would like ...

javascriptjqueryhtmlcssanimate.css

Creating background color animations with Jquery hover

<div class="post_each"> <h1 class="post_title">Single Room Apartments</h1> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb last" ...

javascriptjqueryhtmlcss

Extract the HTML content from a file stored on the computer

Currently, I am utilizing Google App Engine alongside Python. My goal is to retrieve the tree structure of an HTML file located within the same project as my Python script. Despite attempting numerous approaches, such as using absolute URLs (for example ht ...

pythonhtmlgoogle-app-enginelxml

Changing the value of a previous TD element using Javascript

My page features a button that, when clicked, triggers a function to change the value in the previous TD element from "No" to "Yes". Here is the HTML snippet: <tr class="odd"> <td class="">13.00</td> <td class="">DDR</td> ...

javascriptjqueryhtmlhtml-table

The elements within the flexbox are being truncated when viewed on smaller devices

I have encountered an issue with my code where the .content element, which has flex properties, appears cut off on small screens. I want to avoid setting a fixed size because the text within it may vary in size. The goal is for the background image to fi ...

htmlcssflexbox

Passing the value in a td element to a JavaScript function using Thymeleaf onClick

Trying to utilize "Thymeleaf" for the first time, I am attempting to pass a value to JavaScript with the following code: onclick="getPropId('${properties.id}')" The corresponding function is as follows: getPropId(inputID){alert(inputId);} Unf ...

javascriptjavajqueryhtmlthymeleaf

What is the reason for the disappearance of unordered list bullets when using padding: 0?

Updating an older website that contains numerous unordered lists has presented a challenge. When the padding is set to 0, the display markers on the unordered list disappear. The root cause of this issue was traced back to the CSS setting *{padding: 0; ma ...

htmlcsshtml-lists

Is there a way to determine if a parent of my HTML element possesses a CSS class?

Looking at this HTML code snippet - <div id="parent" class="foo"> <div id="child"> </div> </div> Is there a way to create a test to verify if the child element is utilizing the foo class? I attempted: element .children("#chi ...

javascriptcssangularjsjasminecss-selectors

When trying to click the button in Navbar.jsx, I encounter an error when attempting to invoke the setShowCart(true) function

I've encountered an issue while trying to call the setShowCart(true) function in Navbar.jsx. I'm unsure of how to fix this. import React from 'react' import Link from 'next/link'; import {AiOutlineShopping} from 'react-ic ...

htmlreactjstypescriptnext.jsreact-hooks

Saving data values for utilization in jQuery

Recently, I've come across a series of links structured like this: <a class="colorBox" href="#" title="#0676B3"></a> <a ... <a ... these links all have color values in the title attribute <a ... What I'm trying to do is uti ...

jqueryhtml

Is there a way to use Selenium to perform testing on a web UI that generates XML content instead of HTML?

Utilizing Selenium for testing my Perl cgi script has been successful overall, but I've encountered a unique issue in one particular test case. In this scenario, the cgi script returns XML content to the web browser instead of the expected HTML conten ...

htmlxmlperlunit-testingselenium