convert the following html inline style attributes to css

Question

I designed a web page using bootstrap studio and all the style attributes are inline. I want to change this and add these to a separate css file. I have trouble doing that, because when i add the image as 'background-image:url('img/pic.jpg'); it doesn't show up. And i don't know how to convert all the following attributes . The following is the code.

<div class="intro-body" style="background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(&quot;assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137&quot;) right / contain repeat-x;filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);">

for example what I want is , if html code is <div class="intro" style="width:500px;height:400px;"> the code for the separate css should be

.intro
{
width:500px;
height:400px;
}

question from:https://stackoverflow.com/questions/65932615/convert-the-following-html-inline-style-attributes-to-css

Answer 1

You can write it in your css file as you did in your question

.intro
{
width:500px;
height:400px;
}

But note to use the right class name in your example it would be

<div class="intro-body"> // and not "intro"

.intro-body {
  background: linear-gradient(90deg, rgb(8, 1, 36) 40%, transparent 49%), url("assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;
  filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}

<div class="intro-body">"</div>