Search code examples
cssbootstrap-4background-image

How do I specify my background-image in markup instead

I have some code that I did not write that currently has a background-image. I want to keep the exact look but instead of setting the image in CSS, I want to set it in my markup but I don't know how.

This is how the image is currently set in CSS

.clean-topbar{
    background-image:url(http://www.elpasodeventa.com/mls_content/gep/photos/818802/20191118214112529586000000-o.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    position: relative;
    height:200px;
}

Here is the part of the markup where the image is displayed:

<div class="clean-topbar">
...

Please help me specify the image in my HTML markup instead of the CSS. Here is a fiddle:

https://jsfiddle.net/carolinebeltran/vmgq1ena/13/

Solution

  • Expanding phoenixstudio's answer, what you can do is specify the inline background-image style like this

    <div class="clean-topbar" style="background-image:url()">

</div>

    And then in your CSS control the way the background is displayed:

    .clean-topbar {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover; // or contain whichever serves you
}

    A good option for you would be to use Vanilla Lazyload to reduce loading times and improve page speed.