Two stack images, make responsive?

HTML & CSS
1

Hi guys,

I have two images.
One is the background.
The second image is the arrow head.
You can see it below,

How to make the arrow head image stays on the bottom right corner of the background image?,
When applying the responsive feature of CSS3?
When I minimize the Internet Browser…?

Any advice?
Thanks in advance.

2

You could place it absolutely within the container that holds the background image. The question is a bit theoretical until we see your code.

3

Hi, Warren.

When you say “one is the background”, are you talking about a CSS background-image or are you referring to a foreground image that is in back of the arrow?

How much area is covered by the “background” image? Does it cover the full page or is it within a container somewhere on the page?.. do you have several of these images and you want an arrow in the bottom right corner of each one?

What determines the height of the “background” image on the page? Foreground images are relatively easy; background-images have no substance… they are like a background-color. We need to know how the size of that image’s container needs to be defined.

In other words, we need more information to understand what you want.

The picture is good, but it doesn’t include the edges of the browser so we can’t tell how much of the page it fills.

Code would help a lot. :slight_smile:

4

@ronpat ;
Thanks for your reply dude,
It is here,
http://myonlinesmallgroup.com/warren/

Anyway I’m currently experimenting it on http://jsfiddle.net/

The image is foreground <img>
The image has width=200px and height=200px

5

A couple of things there …

  • you have the LI set to width 216px, but the image to 200px, leaving a bit of an unsightly gap around the boxes. Better to keep the LI width to 200px and use margins if you want spacing.

  • to set the arrow image to the bottom right corner, just do this:

.img-arrow {position:absolute; right: 0; bottom: 0;}

Its position will look right when you’ve done the previous step.

6

This is my experiment looks like so far.

@ralph_m ;
Thanks dude for Li advice.

7

It looks a little fine on Google Chrome,
But not on MSIE.

8

Which version(s) of IE?
and what does not look right about it?

9

@ronpat ;

I’m using MSIE ver. 10
The arrow image positioning is not right on MSIE.
I tried these codes below, but it won’t take effect.


		<!--[if IE]>
			<style>
			.img-arrow {
				position: absolute; 
				right: 40px; 
				bottom: 8px; 
				height: 27px; 
				width: 17px;
				cursor: pointer;
			}
			</style>
		<![endif]-->
10

Conditional tags do not work in IE-10.

11

@ronpat ;
So what is the solution?

MSIE is a very, very, very, very, very, very, very, very, very, sick internet browser…

12

Warren, I’m looking at your jsfiddle in IE10 and it looks the same to me as it does in Firefox and Chrome.

13

From IE9 onward it’s a pretty reliable browser in terms of CSS … unless you are trying to do something overly fancy, perhaps. This shouldn’t be something IE would have a problem with.

14

Warren, because I cannot seem to understand the problem, I want you to try this simplified code and tell me if it works.
Copy this code to a file without changing anything, open it in your browsers and let us know what you see in IE10 and whatever else you have.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>solidcodes</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1176078-Two-stack-images-make-responsive
Thread: Two stack images, make responsive?
2013.11.03 22:12
solidcodes
-->
    <style type="text/css">

img {
    display:block;
}
ul {
    padding:0;
    margin:0;
}
.captionli {
    display:inline-block;
    vertical-align:top;
    position:relative;
}
.caption {
    background-color:rgba(255,255,255,0.7);
    position:absolute;
    left:0;
    right:0;
    bottom:3px;
    min-height:60px;
    color:#fff;
}
.img-arrow {
    width:25px;
    height:25px;
    position:absolute;
    right:1px;
    bottom:1px;
    cursor:pointer;
    z-index:1;
}

    </style>
</head>
<body>

<ul>
    <li class="captionli">
        <img class="bgimage" src="http://myonlinesmallgroup.com/warren/images/skyblue.jpg" alt="" height="200" width="200"/>
        <div class="caption">
            <img class="img-arrow" src="http://myonlinesmallgroup.com/warren/images/arrow1.jpg" alt="" height="25" width="25"/>
        </div>
    </li>
</ul>

</body>
</html>
15

Yes, it should work as others have said unless you are tripping quirks mode in IE10 (no doctype, compatibility mode, X-UA- meta tag etc.)

16

@ronpat ;
Thanks dude, I have no problem with the jsfiddle version.
It is the actual/live site I’m having problem with the arrow head.
This is what I see in my MSIE ver. 10.

As you can see the arrowhead overlapped.
I don’t know why, it works fine on Google Chrome.

17

Are you guys also using MSIE ver. 10?

http://myonlinesmallgroup.com/warren/

Do you see the same arrowhead overlapping?

18

Hi,

Firefox is the same as your drawing and its because you are scaling the image with max-width but the parent of the image is an inline-block which has no real width so doesn’t get applied in some browsers. I would guess that Chrome is the wrong one here.

Set the anchor to display:block and the max-width should take effect.


.img-arrow a{
display:block;
}