CODEWITHSUNDEEP
css
downrep_nation
downrep_nation

Reputation: 452

CSS Code only works in certain order,style tag breaks order

i have an issue where im using css to make a div appear circular on screen but it only works if the background image property is set first

normally that wouldnt be an issue if the image wouldnt need to be dynamicly inserted using PHP code

i created 3 jsfiddles to document my problem

https://jsfiddle.net/2wr2wajw/

No issue, background set first

https://jsfiddle.net/zvq3r0pd/

Issue,background doesnt get resized properly

link3 jsfiddle.net/x8g05uph/

Same issue as above, i would have expected the style code to be executed first

SO, whats the issue and whats the solution? thank you

EDIT

Found out adding the additional styles in the html code works, but thats not very nice and unnecessary to rewrite css code for everyone tag

thats what class selectors are for right?

link4 jsfiddle.net/q7sdwbfk/

not nice

Upvotes: 0

Views: 46

Answers (1)

RhapX
RhapX

Reputation: 1683

The reason your code is not showing up properly in each scenario is because you are using the background shorthand property, which in turn is overwriting previously set values.

For instance, in example 2, you are setting the background-size prior to setting the background shorthand. By setting the background shorthand, you are overwriting the background-size property.

If you don't want to load them in order so that they don't get overwritten, don't make use of the shorthand background. Instead, utilize background-image, background-repeat, etc. This sets each property individually and will not cause anything to be overwritten, unless the property is called explicitly again.

Here is the updated fiddle for your example 2, utilizing individual properties instead of shorthand.

Upvotes: 1

Related Questions