Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Bootstrap 3 image over an image

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #176730
    dev0x0
    Participant

    Hi,

    I’m new to Botstrap 3.But i could manage some of the things.Now i’m facing a small issue.I have a large background image.I made it to responsive by using “img-responsive” class.Now i want to put my small image top of the background image.So then both images should be responsive.I searched the internet before posting this here.I tried with some of those soulutions.But still no luck.One thing i was done is wrote a css class for background image and made it’s position to absolute.After that wrote another class for small image and made it’s position to relative.At that point i got the small image over the big image.But it’s left aligned.I want it to be right aligned.Although now small image has placed over the big one small image isn’t responsive although i have made it to responsive by using “img-responsive” class.Please help me…

    #176746
    Paulie_D
    Member

    We can’t do anything with just a description of the problem.

    I suggest you make a minimal example using either Codepen.io or Bootply.com and show us the problem.

    #176752
    dev0x0
    Participant

    Thanks for your comment.Here is the link for the code.

    http://codepen.io/anon/pen/kKGuJ

    But i dunno it’s not responsive on the above file hosting server.So sorry for that.Because i’m not familiar with Codepen.io.

    #176781
    Krish1980
    Participant

    Is there a reason why you’d want an icon image to be responsive? An icon is already quite small to begin with – defining it in percentages would make it almost microscopic as the page re sizes.

    A better way would be to use the appropriate sized icons, and only change its dimensions, using media queries at a break-point where it appears too large.

    In any case, applying an ‘img-responsive class’ won’t work if you define the width and height inline, as you’ve done for your icon.

    Here’s a codepen (I’ve used the same images that you’ve used, but ideally, I’d go for a smaller icon image or an svg)

    http://codepen.io/Krish1980/pen/AjIms

    But i dunno it’s not responsive on the above file hosting server

    There’s a flower shaped icon beside the word Css which, when clicked, reveals a dropdown where you can attach external files (I’ve mentioned Bootstrap’s CDN path)

    #176785
    Paulie_D
    Member

    There’s a flower shaped icon beside the word Css

    <chuckle>…it’s a ‘cog’

    #176798
    dev0x0
    Participant

    Thanks all for the comments.And please can explain me what is bootstrap “clearfix” css class exatcly does?

    #176804
    Paulie_D
    Member

    It clears floats.

    I’m sure you can google clearfix it’ll provide you with a whole range of explanations.

    #176854
    dev0x0
    Participant

    ok.thanks

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.