Negative css line not scaling correctly with a 100% svg image

Question

Hope I can explain this correctly.

Please see the attached fiddle for an example: http://jsfiddle.net/Ldd70cnd/

Basically, I have an svg image that will be 100% width, I then want to add 2 coloured lines, 1 above and 1 below but I want the lines to be within the svg's boundary, see images.

Fist image The above example shows the lines on the very edge of the svg image.

Second image

The above example shows you where I want the lines, my jsfiddle has got the top line working fine, the bottom line doesn't stay in line if you resize the browser.

Can anyone help?

Here's the css i've used.

.logo-top-line { 
    height:2px; 
    width:100%; 
    background : rgb(88, 168, 144);
    margin-top:3%;
}
img {
    width: 100%;
    margin-top:-2.6%;
}
.logo-bottom-line { 
    height:2px; 
    width:100%; 
    background : rgb(88, 168, 144);
    margin-top:-1em;
}

@james Montagne I wanted to use the image again without the lines — , Mar 12 '15 at 17:28

score 0 · Answer 1 · answered Mar 12 '15 at 18:17

I believe this will give you what you want: http://jsfiddle.net/Ldd70cnd/1/

This uses a container with position: relative and all of the children get position: absolute. The top and bottom lines are then defined based on the relative position of the container's edges.

HTML:

<div id="wrapper">
    <div class="logo-top-line"></div>
    <img src="http://s22.postimg.org/skt2j3581/logo2.png" alt=""/>
    <div class="logo-bottom-line"></div>
</div>
<div class="contact text">Mobile: 000000000000</div>

CSS:

* {
    margin:0;
    padding:0;
}
#wrapper {
    position: relative;
}
.logo-top-line { 
    height:2px; 
    width:100%; 
    background : rgb(88, 168, 144);
    position: absolute;
    top: 12.5%;
}
img {
    width: 100%;
}
.logo-bottom-line { 
    height:2px; 
    width:100%; 
    background : rgb(88, 168, 144);
    position: absolute;
    bottom: 11.5%;
}
.contact {
    font-family : Helvetica;
    font-size : 15px;
    line-height : 26.04px;
    color : rgb(31, 80, 108);
}

Negative css line not scaling correctly with a 100% svg image

1 Answers1