CODEWITHSUNDEEP
htmlcss
Saumyojit Das
Saumyojit Das

Reputation: 131

BACKground image and back- color

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body style="background-color:lightblue;">

</body>
</html>

External css file:

body
  {


background-image:url("pass.jpeg"),url("skin.jfif");

  


    background-repeat: no-repeat,no-repeat;

    /* any background image will start from the top left corner of the element targeted*/

  background-size: 100% 50%, 100% 100%;

  /* setting the width and height of both the images */
  }

will the inline css over ride external css or external css will over ride ? but i know that inline css specificity is higher.

Specifity does it even come here as both properties are different and element is same i.e body.

OUTPUT

Why the output is like this? what is going on? How the whole process works? Is the html parser first injects background color light blue to the whole body then embeds two back images. Why the images are up there like a thin line

Upvotes: 0

Views: 212

Answers (2)

Luvexina
Luvexina

Reputation: 843

Inline styles (style="") override internal stylesheets (<style>) which override external stylesheets (<link>). This is the cascading effect of CSS, which stands for Cascading StyleSheets. You can use !important after a style rule to give it more priority:

body {
   background-image:url("pass.jpeg"),url("skin.jfif")!important;
   background-repeat: no-repeat,no-repeat;

    /* any background image will start from the top left corner of the element targeted*/

  background-size: 100% 50%, 100% 100%;

  /* setting the width and height of both the images */
}

Upvotes: 1

MtzJr
MtzJr

Reputation: 31

well, there is a hierarchy level on style, have always in mind that the closest style of the tag will be always the first to take effect then the others will always be in the back of it.

As i can see, the problem in your code that are making your images stretch is this line with: background-size: 100% 50%, 100% 100%; - The problem here is that you're using percentage as a metric, you should use other metric numbers as px, em, rem, vw like width: 50px height: 50px;

You was trying to set up the width and height of the images right? I don't think you can set up it individually but only the width and height of the background. If you can cut or re-size the img on paint, then use it again. If you still want to re-size the background, i advice you to create a inside your tag, and try to put the images as background of this div, then use background-size: 150px 100px; for example, the background-size on this div.

Upvotes: 1

Related Questions