Atif Atif - 3 months ago 14
HTML Question

use separate Images in Bootstrap and how to make responsive

I am trying to use 2 images separate in Bootstrap to make responsive. I am struggling how to fix in different media queries to set exact size of the image.When i am trying to use as a background the difficult to manage a text in the middle
Please see the attached fileResponsive image

Lee Lee
Answer

Okay, after a while of trying to figure out what you want I think you want this:

https://jsfiddle.net/leecollingsco/pbut5h2n/1/

This sets the welcome div as relative, so then we place the images INSIDE This div, and can control the absolute positioning relative to the container. For example, set the left image to be 25px away from the left of the container. This makes it much more easier to use for responsive ness.

I've added the class hidden-xs to the left image, but couldn't find the right image because of the huge code, so you'll need to add that.

Is that what you're after?

PS You need to provide ALT tags for your images

<div class="container">
    <div class="col-md-12 welcome">
        <div class="welcomebox">
            <h1>Heading</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting only five centuries</p>
        </div>
        <img class="footer_left_img hidden-xs" src="<?php echo get_template_directory_uri(); ?>/assets/img/footer_left.png" alt="YOU NEED AN ALT TAG" />
        <img class="footer_right_img hidden-xs" src="<?php echo get_template_directory_uri(); ?>/assets/img/footer_right.png" alt="YOU NEED AN ALT TAG" />
    </div>
</div>
Comments