Load image in html code

Question

I found this html code which I want to modify to load image into html code:

<section class="bg-img well-top">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-offset-2 col-sm-8">
                <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8">
                    <label class="search-form_label">
                        <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/>
                        <span class="search-form_liveout"></span>
                    </label>
                    <button class="search-form_submit fa-search" type="submit"></button>
                </form>
            </div>
        </div>
    </div>
</section>

CSS code:

.bg-img {
  background: no-repeat url(../images/bg-img.jpg);
  background-size: cover;
  padding-top: 90px;
  padding-bottom: 133px;
  text-align: center; }
  @media (max-width: 767px) {
    .bg-img {
      padding-top: 70px;
      padding-bottom: 80px; } }

I would like to load the image file into the html code.

You can load images into html5 by using canvas and javascript. Example shown [here](http://stackoverflow.com/questions/10906734/how-to-upload-image-into-html5-canvas) — Murillio4, Oct 02 '16 at 21:43
I want to get the same visual result but using html code to load the image. — Peter Penzov, Oct 02 '16 at 21:44
Visual result like what? You are showing code that is basically a form, and ask us how to - yeah, what exactly? What does a form have to do with an image? — CBroe, Oct 02 '16 at 21:46
If I understand it right.. You want some html code to replace your css code? — Murillio4, Oct 02 '16 at 21:51
You may use inline css attribute to specify style inside html element, then use the DataURI to store image data encoded as base64 string inside the background-url field — A. STEFANI, Oct 12 '16 at 17:07

score 3 · Answer 1 · answered Oct 07 '16 at 16:11

There's a relatively new css property that can do what you want, object-fit. It has pretty good support (except for Microsoft - pollyfill).

Putting your image into html is fairly easy, just absolutely position an img within your container, .bg-img, to take up the same space and apply object-fit: cover. Just make sure that you adjust the image's z-index (so it doesn't cover your form) and that .bg-img (which technically is no longer a very good class name) has position: relative so that your image uses it for positioning.

img {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}

.bg-img {
    position: relative;
    padding-top: 90px;
    padding-bottom: 133px;
    text-align: center; 
    overflow: hidden;
}

@media (max-width: 767px) {
    .bg-img {
        padding-top: 70px;
        padding-bottom: 80px; 
    }
}

<section class="bg-img well-top">
    <img src="https://placebear.com/1200/300" alt="place bear" />
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-offset-2 col-sm-8">
                <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8">
                    <label class="search-form_label">
                        <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/>
                        <span class="search-form_liveout"></span>
                    </label>
                    <button class="search-form_submit fa-search" type="submit"></button>
                </form>
            </div>
        </div>
    </div>
</section>

I don't know what the rest of your styles are to know if it looks exactly the same as what you want, but if I understand your question right, it should be close.

score 1 · Answer 2 · answered Oct 06 '16 at 20:20

First question I have is why? Are you only looking to load the image code in the HTML and are planning on leaving the rest of the CSS intact or are you looking to replace/get rid of all the CSS code?

If you are looking to replace all CSS code and have an HTML only solution, it's going to be difficult to obtain the same visual result as the code you found as there is a lot of styling going on in that CSS.

The simplest answer is to move the background image into your HTML file using the style attribute:

<section class="bg-img well-top" style="background-image: url(../images/bg-img.jpg);">
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-offset-2 col-sm-8">
            <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8">
                <label class="search-form_label">
                    <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/>
                    <span class="search-form_liveout"></span>
                </label>
                <button class="search-form_submit fa-search" type="submit"></button>
            </form>
        </div>
    </div>
</div>

And updating your CSS to remove the image reference:

.bg-img {
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 90px;
  padding-bottom: 133px;
  text-align: center; 
}
@media (max-width: 767px) {
  .bg-img {
     padding-top: 70px;
     padding-bottom: 80px; 
  } 
}

score 1 · Answer 3 · answered Oct 12 '16 at 17:04

Did you try this ?

<section class="bg-img well-top" style="background: no-repeat url(../images/bg-img.jpg); background-size: cover;">
(...)

Using DataURI you may store your image as base64 encoded string inside html code. But URIs will add around 30% to the size of your image.

Base64 image content inside the background: url attribute example:

<section class="bg-img well-top" style="background: no-repeat url(data:image/jpeg;base64,/9j/4AAQSk....base64.img.content...//2Q==); background-size: cover;">
(...)

score -2 · Answer 4 · edited Oct 03 '16 at 01:31

Please specify your view so that i can arrange a perfect solution for that, Ok we have two ways:

Background images using css with any class or id or a specific element you can do it by background image like:

.image-class, #image-id{
background:url(some_url);
height: it depends on container content otherwise write it here in px
}

Another method with img tag and a specific id or class using js like:

document.getElementbyID("image-id").innerHTML="<img src="image-url">";

there are certain other methods in jquery you can use if innerHTML cause a problem with you, like append, etc.

If you have any other question please let me know

score -2 · Answer 5 · answered Oct 03 '16 at 09:11

Use img src="filename.png" width="900" height="1200" style="border-radius: 20px;" etc. Also you can set width, height and style as per you wish. Prior to this, set the image to be loaded in png or jpg format. To centre your image use the command <centre> </centre>

Load image in html code

5 Answers5