The arrangement of CSS code is crucial for it to work properly; any deviation from the correct order

I am facing a problem where I am trying to display a circular div using CSS, but it only works if the background image property is set first.

Typically, this wouldn't be an issue if the image wasn't being dynamically inserted using PHP code.

I have created 3 jsfiddles to showcase my issue:

https://jsfiddle.net/2wr2wajw/

No problem when setting background first

https://jsfiddle.net/zvq3r0pd/

Problem: background does not resize properly

Link to third jsfiddle: jsfiddle.net/x8g05uph/

Encountering the same issue as above. Expected style code to execute first.

So, what could be causing this issue and how can it be resolved? Thank you.

EDIT

I discovered that adding extra styles in the HTML code resolves the issue, but it's not ideal as it requires rewriting CSS for each tag unnecessarily.

Isn't that what class selectors are for?

Link to fourth jsfiddle: jsfiddle.net/q7sdwbfk/

Not an elegant solution
css

Answer №1

The issue with the code not displaying correctly in all scenarios stems from the use of the background shorthand property, which ends up overriding previously defined values.

Take example 2 for instance, where the background-size is set before the background shorthand. This results in the background-size property being overwritten by the shorthand.

To prevent this from happening and ensure properties are not overridden, it's best to avoid using the shorthand background. Instead, opt for setting individual properties like background-image, background-repeat, etc. This way each property is defined separately and won't be overwritten unless specifically called again.

You can view the updated fiddle for example 2, utilizing separate properties instead of shorthand, by clicking on this link.

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

Using dynamic jquery to target specific elements. How can we apply jquery to selected elements only?

Hello everyone! I have been working on a simple hover color change effect using jQuery, but I noticed that I am repeating the code for different buttons and service icons. Is there a way to achieve the same result so that when a button is hovered, the co ...

javascripthtmljquerycsshover

What is causing the content to overflow outside of the navbar on smaller screens or mobile devices?

/* *{ font-family: sans-serif; box-sizing: border-box; margin: 0; padding: 0; overflow-x: hidden; } */ .main { min-height: calc(100vh - 10rem); display: grid; place-items: center; } p { font-size: 4rem; line-height: 1.6; } nav ...

htmljquerycssbootstrap-4

Use either Jquery or CSS3 to hide a div if one of its inner divs is empty

I have multiple data sets to display in divs with the same class name. Each div contains two inner divs. <div class="div1"> <div class="div2">Abc</div> <div class="div3"><?php echo $row['SOME VALUE']; ?>< ...

javascriptphpjqueryhtmlcss

Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

As a novice in HTML and jQuery, I am currently working on creating a portfolio site for a school project. One of the challenges I have encountered is designing a graphic that includes a text box within a resizable div element. My goal is to prevent excessi ...

htmlcsscss-position

Eliminate perfect-scrollbar functionality on mobile devices

I have applied the perfect-scrollbar class with 'height: auto' on mobile screens, expecting it to work properly. It's functioning well in responsive mode on the web. However, it does not scroll on mobile devices. @media (max-width: 992px) { ...

cssangular

insert a div element at a static position with a height of 100%

Adding two divs on top and bottom of a fixed div is what I need to do. To achieve this, I created a panel with a fixed position on the left side. I added the first div with the h-100 class which sets its height to 100%. However, when I try to add the secon ...

htmlcsstwitter-bootstrapbootstrap-5

Ways to customize the border of the ListItemButton when it's in a selected state using Material UI?

I'm currently working on a feature that involves highlighting a ListItemButton with a specific background color when selected. However, I now want to take it a step further and add an outline or border color around the ListItemButton when it is select ...

cssreactjsbuttonmaterial-uilistitem

Issue with CSS: Dropdown menu is hidden behind carousel while hovering

I'm struggling with adjusting the position of my dropdown list. It keeps hiding behind the carousel (slider). When I set the position of the carousel section to absolute, it causes the navbar to become transparent and the images from the carousel show ...

javascripthtmlcssdropdown

When the screen size decreases, display the title on two lines

Currently, I am in the process of developing a react web application with the assistance of redux. My main objective is to ensure that the page is highly responsive. At this point, there is a title positioned at the top displaying: Actions to do: Past due ...

htmlcssreactjs

Ways to align a DIV in the center of another DIV?

I am currently working on building a footer. My goal is to center the 4 divs in the footer, similar to the first paragraph or the 5 icons that are not rendering correctly. What would be the most effective approach to achieve this? Demo: http://jsfiddle.n ...

htmlcssfooter960.gs

Tips for Implementing CSS Styles on Ruby on Rails HTML Pages

Just starting out with RoR and trying to customize my form with CSS classes. Here's what I have so far: <%= form_tag :action => 'create' do %> <p><label for = "name">Name</label>: <%= text_field ...

htmlcssruby-on-railsruby

Control the transparency of the initial parent div that includes an *ngFor loop

I want to add opacity only to the first div which contains an icon and a heading in another nested div. The second div should remain fully visible (opacity: 1). Here is the HTML structure: <div class="row clearfix"> <div class="col-lg-3 col- ...

htmlcssangulartypescript

Is there a way to automatically determine the text direction based on the language in the input text?

When posting in Google Plus (and other platforms), I noticed that when I type in Persian, which is a right-to-left language, the text direction changes automatically to rtl and text-alignment:right. However, when I switch to English, the direction switches ...

javascripthtmlcssbidi

CSS designs that adapt with the screen: Triangles in

I'm currently working on creating a responsive triangle using CSS. I want both the height and width of the triangle to adjust as the window size changes. Below is my static code: #triangle { z-index: 2; width: 0; height: 0; position:absolute ...

htmlcss

Tips for determining the full width of a webpage, not solely the width of the window

While we can easily determine the width of the window using $(window).width(); This only gives us the width of the window itself, not accounting for any overflowing content. When I refer to overflowing, I mean elements that extend beyond the visible view ...

javascriptjqueryhtmlcss

Ensure that the background div extends all the way to the bottom of the page

Is there a clever CSS technique that allows a div to extend all the way to the bottom of the screen without displaying any visible content inside? Or am I better off using JavaScript for this purpose? Thank you, Richard ...

csshtmlheight

"Top navigation element and anchors now have a permanent fix in place

Having some trouble with the CSS here - anchor links are getting hidden behind the navigation bar. Any ideas on how to fix this? Do you have a suggestion for making sure the anchor link text is visible just below the navigation bar? /* adjust the style a ...

htmlcss

The menu seems to be off-center

I'm struggling to center my menu/navigation bar horizontally. I can't seem to figure out what mistake I've made or what I've forgotten. Additionally, there is right padding after my last list item. How can I get rid of it? HTML <di ...

csshtml

What is the best way to eliminate vertical spacing among li elements in CSS

I am facing a challenge with my HTML code and styling, which is just an example: <div id="mn" style="margin-top:200px;"> <div class="first">1</div> <div class="second">2</div> & ...

cssmarginspacing

Customize your Google Translate experience by choosing your own option values

Is there a way to trigger the same JavaScript calls by clicking on an option value in an HTML select element as with text-based links in the Google Translate widget? Check out this jsfiddle for more information <html> <body> <select i ...

javascriptjqueryhtmlcss