CSS background-image SVG capped on edges - html

I'm trying to use the dashed border generator but in the resulting SVG I noticed the edges are capped, any ideas how to avoid this?
.block {
width: 400px;
height: 400px;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%25' ry='100%25' stroke='%238B98A6' stroke-width='9' stroke-dasharray='2%2c 8' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
}
<div class="block">
</div>


Can you try adding border-radius property ?.
.block {
width: 400px;
height: 400px;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%25' ry='100%25' stroke='%238B98A6' stroke-width='9' stroke-dasharray='2%2c 8' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
border-radius: 100%;
}
<div class="block">
</div>

Related

Why is there no picture showing in the background?

<div id="Image">
<!-- <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
</div>
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-repeat: repeat;
}
I've made this code and/but I don't see any image. Why is that?

add dimensions / content to the div. it has no size so the image can't be seen. ( eg. width: 200px; height: 800px)
You may also want to have a look at background-size, here.
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-size: contain;
width: 800px;
height: 200px;
background-repeat: repeat;
background-color: gray;
}
<div id="Image">
<!-- <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
</div>

Here is two solutions:
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-repeat: repeat;
width:100;
height:100;
background-size: contain;
}
img {
width:100;
height:100;
}
<div id="Image">
First solution - This is not a good solution because the img could not be zoomed even using scale:0.11;
</div>
<img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes">
<!--Second solution:Using img and this is good-->

Struggling to make image heights match css and html

I am using a template and editing it. I am trying to make the image on the left match the height and width of the image on the right at any viewport size, but I can't work out how to do it
The image on the right is a before/after slider.
I am unable to use percentage for the height of the image on the left and I'm not sure why.
I googled and it seems I need a container element with a height of 100% to use percentage height.
I tried that but it seemed to break things further
As you can see in the image, this container element has pushed the image down and i can't figure out why.
The section that i have highlighted in red is the container i added, as you can see there is no gap between the image and the top of this
if i look at the container above that, you can see that there is a gap between the top and the image
But the padding is zero, and the margin is zero.
So i can't figure out why there is the gap
Now looking at it maybe it's because of the rest of the image that stretches out of the image element behind? but why would that happen?
Below is the code without the extra container element that pushed the image down.
This is the html for the slider:
<div class="col-6 col-12-narrower">
<!-- My html edit 001 -->
<span id="testbox">
<div class="containerBA4">
<div class="image-container4">
<img
class="image-before4 slider-image4"
src="/images/conservatoryBefore.jpg"
alt="before"
/>
<img
class="image-after4 slider-image4"
src="/images/conservatoryAfter.jpg"
alt="after"
/>
</div>
<!-- step="10" -->
<input
id = 'input1'
type="range"
min="0"
max="100"
value="50"
aria-label="Percentage of before photo shown"
class="slider4"
/>
<div class="slider-line4" aria-hidden="true"></div>
<div class="slider-button4" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
viewBox="0 0 256 256"
>
<rect width="256" height="256" fill="none"></rect>
<line
x1="128"
y1="40"
x2="128"
y2="216"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<line
x1="96"
y1="128"
x2="16"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<polyline
points="48 160 16 128 48 96"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></polyline>
<line
x1="160"
y1="128"
x2="240"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<polyline
points="208 96 240 128 208 160"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></polyline>
</svg>
</div>
</div>
</span>
<section class="box special">
<h3>Accumsan integer</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
<ul class="actions special">
<li>Learn More</li>
</ul>
</section>
</div>
This is the CSS for the slider:
.containerBA4 {
display: grid;
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
--position: 50%;
}
.image-container4 {
max-width: 800px;
max-height: 90vh;
/* aspect-ratio: 1/1; */
}
.slider-image4 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.image-before4 {
position: absolute;
inset: 0;
width: var(--position);
/* filter: grayscale(100%) */
}
.slider4 {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
/* for Firefox */
width: 100%;
height: 100%;
}
.slider4:focus-visible ~ .slider-button4 {
outline: 5px solid black;
outline-offset: 3px;
}
.slider-line4 {
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
/* z-index: 10; */
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button4 {
position: absolute;
background-color: #fff;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
/* z-index: 100; */
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
This is the html for the image including the original container element:
<div id="lockWrapWrapWrap" class="col-6 col-12-narrower">
<!-- My html edit 004 - add slider 3 -->
<section id="lockWrapWrap" class="box special">
<!-- <section id="lockWrap"> -->
<span id="lockImage" class="image featured"><img src="images/lock_handle.jpg" alt="" /></span>
And for the CSS im not sure what to include because the template is quite large and with all the classes its not so clear what relates to what and what is relevant.
This was some of the CSS i tried to add in order to get it working:
#lockImage {
display: block;
/* max-width: 100%; */
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
/* max-width: 800px; */
max-height: 50%;
}
Thanks for any help and if there is any way i could ask this question clearer or more concisely please let me know.

Problem making an svg button fully clickable due to other objects nearby

First of, i have made a nearly identical question before, and the problem was fixed (at the time).
I'm making a buttons panel using multiple in-line svgs. All of them work perfectly and have been position just where i want them, but this has render my central (home) button parcially ineffective.
Basically, the top half works great and the bottom one is NOT clickable (i'd like to solve this).
The bounding box of another button runs through that area, though it is not visible. This is the same problem i fix before, by appliying a circle clip path to the home button, but for some reason this doesn't work anymore.
Below i leave a piece of html with the svgs and relevant divs. You'll also find my css data, which shows how was all positioned and what kind of clip paths are active.
PS: Sorry for long code, i'm new and don't know how much info you need.
#brand{
position: absolute;
clip-path: circle(50%);
}
#reserve{position: absolute;}
#services{margin: auto;}
#faq{margin: auto;}
#login{margin: auto;}
#destinies{margin: auto;}
#media screen and (min-width: 751px){
#wide-interface{
overflow: hidden;
white-space: nowrap;
letter-spacing: 5px;
text-align: center;
}
#brand{
width: 9.5%;
overflow: hidden;
top: 2.6%;
left: 0;
right: 0;
}
#reserve{
width: 83%;
overflow: hidden;
margin-right: auto;
margin-left: auto;
top: 12%;
left: 0;
right: 0;
}
#faq{
width: 20%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
margin-right: 1%
}
#header{padding-bottom: 5%;}
#login{
width: 20%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
#services{
width: 28%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
margin-right: -3%;
}
#destinies{
width: 28%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
margin-left: -3%;
}
<div id="wide-interface">
<div id="top-buttons">
<div id="services">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 291.47 59.96"><defs>
<style>.cls-3{fill:#ffffff;}</style>
</defs><a xlink:href="services.html"><path class="cls-3" d="M0,0V42.09A17.81,17.81,0,0,0,17.81,59.91L258,60c1.27-23.16,12.07-42.66,33.48-59.9ZM76.15,37.75a7.42,7.42,0,0,1-3.22,2.5,13.09,13.09,0,0,1-5.22.94,19.78,19.78,0,0,1-5.06-.65,12.32,12.32,0,0,1-4-1.72l2-4.48A12.76,12.76,0,0,0,64,35.88a13,13,0,0,0,3.74.58c2.33,0,3.5-.58,3.5-1.75a1.46,1.46,0,0,0-1-1.37,18.22,18.22,0,0,0-3.2-.93A30.42,30.42,0,0,1,63,31.29a6.83,6.83,0,0,1-2.8-1.92A5.17,5.17,0,0,1,59,25.81a6.16,6.16,0,0,1,1.07-3.55,7.3,7.3,0,0,1,3.21-2.5,13.24,13.24,0,0,1,5.23-.92,18.27,18.27,0,0,1,4.17.48,13.13,13.13,0,0,1,3.63,1.39l-1.88,4.52a12.43,12.43,0,0,0-5.95-1.66,5,5,0,0,0-2.64.54A1.6,1.6,0,0,0,65,25.5a1.4,1.4,0,0,0,1,1.29,17.91,17.91,0,0,0,3.16.89,29.55,29.55,0,0,1,4.07,1.12A6.92,6.92,0,0,1,76,30.7a5.1,5.1,0,0,1,1.19,3.55A6,6,0,0,1,76.15,37.75Zm21.12,3H80V19.27H96.87V24H86v3.62h9.55v4.54H86v3.93H97.27Zm16.66,0L110,35.05h-3.31v5.71h-6.08V19.27h9.82a12.2,12.2,0,0,1,5.07,1A7.47,7.47,0,0,1,118.84,23,7.55,7.55,0,0,1,120,27.22a7.55,7.55,0,0,1-1.09,4.07A7.4,7.4,0,0,1,115.8,34l4.64,6.76Zm22,0h-6l-9.18-21.49h6.57l5.83,14,6-14h6Zm16.54,0H146.4V19.27h6.08Zm10.11-7.54a5.31,5.31,0,0,0,2.12,2.16,6.16,6.16,0,0,0,3.11.77,6.37,6.37,0,0,0,5.07-2.52l3.86,3.5a10.11,10.11,0,0,1-3.93,3,12.89,12.89,0,0,1-5.3,1,12.74,12.74,0,0,1-6.07-1.43,10.71,10.71,0,0,1-4.22-4A11,11,0,0,1,155.7,30a11,11,0,0,1,1.53-5.77,10.76,10.76,0,0,1,4.22-4,12.74,12.74,0,0,1,6.07-1.43,12.89,12.89,0,0,1,5.3,1.05,10.08,10.08,0,0,1,3.93,3l-3.86,3.5a6.36,6.36,0,0,0-5.07-2.51,6.26,6.26,0,0,0-3.11.76,5.34,5.34,0,0,0-2.12,2.17,7.22,7.22,0,0,0,0,6.41Zm34.11,7.54H179.45V19.27H196.3V24H185.47v3.62H195v4.54h-9.54v3.93H196.7Zm19.37-3a7.42,7.42,0,0,1-3.22,2.5,13.16,13.16,0,0,1-5.22.94,19.91,19.91,0,0,1-5.07-.65,12.51,12.51,0,0,1-4-1.72l2-4.48a12.84,12.84,0,0,0,3.34,1.54,13.06,13.06,0,0,0,3.75.58c2.33,0,3.5-.58,3.5-1.75a1.47,1.47,0,0,0-1-1.37,18.39,18.39,0,0,0-3.21-.93,31.31,31.31,0,0,1-4-1.12,6.87,6.87,0,0,1-2.79-1.92,5.18,5.18,0,0,1-1.17-3.56A6.17,6.17,0,0,1,200,22.26a7.21,7.21,0,0,1,3.2-2.5,13.32,13.32,0,0,1,5.24-.92,18.27,18.27,0,0,1,4.17.48,12.94,12.94,0,0,1,3.62,1.39l-1.87,4.52a12.46,12.46,0,0,0-5.95-1.66,5,5,0,0,0-2.64.54A1.58,1.58,0,0,0,205,25.5a1.38,1.38,0,0,0,1,1.29,17.65,17.65,0,0,0,3.16.89,30,30,0,0,1,4.07,1.12A7.06,7.06,0,0,1,216,30.7a5.09,5.09,0,0,1,1.18,3.55A6.1,6.1,0,0,1,216.07,37.75Z"/><path class="cls-3" d="M110.09,24.06h-3.37v6.29h3.37a4.28,4.28,0,0,0,2.83-.81,2.9,2.9,0,0,0,1-2.32,2.94,2.94,0,0,0-1-2.33A4.23,4.23,0,0,0,110.09,24.06Z"/></a></svg>
</div>
<div id="faq">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.09 59.79"><defs><style>.cls-4{fill:#ffffff;}</style></defs><path class="cls-4" d="M124.63,27.62a6.49,6.49,0,0,0-.75-3.15,5.36,5.36,0,0,0-2-2.12,5.92,5.92,0,0,0-5.77,0,5.36,5.36,0,0,0-2,2.12,6.49,6.49,0,0,0-.75,3.15,6.42,6.42,0,0,0,.75,3.14,5.3,5.3,0,0,0,2,2.12,5.86,5.86,0,0,0,5.77,0,5.3,5.3,0,0,0,2-2.12A6.42,6.42,0,0,0,124.63,27.62Z"/><polygon class="cls-4" points="82.78 29.66 88.19 29.66 85.48 22.92 82.78 29.66"/><path class="cls-4" d="M35.82,0C14.44,17.22,1.3,36.68,0,59.79l155.46.11A63.86,63.86,0,0,1,209.09.8V0ZM63.88,21.69H53.32v4.63h9.3v4.61h-9.3v7.22h-6V17.09H63.88ZM71,37.46a3.59,3.59,0,0,1-4.89,0,3.5,3.5,0,0,1,0-4.88,3.72,3.72,0,0,1,4.92,0,3.57,3.57,0,0,1,0,4.88Zm20.62.69-1.65-4.09H81l-1.65,4.09H73.3l9.3-21.06h5.86l9.33,21.06ZM105,37.46a3.59,3.59,0,0,1-4.89,0,3.53,3.53,0,0,1,0-4.88,3.44,3.44,0,0,1,2.46-.93,3.39,3.39,0,0,1,2.46.93A3.24,3.24,0,0,1,106,35,3.29,3.29,0,0,1,105,37.46Zm24.16,5.1a8.08,8.08,0,0,1-3.32.68,9.62,9.62,0,0,1-6-1.94,25.31,25.31,0,0,1-3.2-2.91,11.68,11.68,0,0,1-4.88-2,10.55,10.55,0,0,1-3.32-3.8,10.75,10.75,0,0,1,4.51-14.56,13.49,13.49,0,0,1,12,0,10.54,10.54,0,0,1,5.7,9.54,10.57,10.57,0,0,1-7.16,10.17,3.84,3.84,0,0,0,1.19.93A3,3,0,0,0,126,39a4.35,4.35,0,0,0,3.19-1.47l2.58,3.07A6.9,6.9,0,0,1,129.16,42.56Z"/></svg>
</div>
<div id="login">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.09 59.79"><defs><style>.cls-5{fill:#ffffff;}</style></defs><path class="cls-5" d="M97.83,24.58a6,6,0,0,0-5.89,0,5.57,5.57,0,0,0-2.09,2.16,7.16,7.16,0,0,0,0,6.42,5.57,5.57,0,0,0,2.09,2.16,6,6,0,0,0,5.89,0,5.5,5.5,0,0,0,2.09-2.16,7.08,7.08,0,0,0,0-6.42A5.5,5.5,0,0,0,97.83,24.58Z"/><path class="cls-5" d="M173.27,0H0V.8A63.85,63.85,0,0,1,53.63,59.9l155.46-.11C207.8,36.68,194.65,17.22,173.27,0ZM82,40.69H65.67V19.21h6.08V35.87H82Zm23.28-5a10.87,10.87,0,0,1-4.27,4,13.75,13.75,0,0,1-12.25,0A10.76,10.76,0,0,1,83,30a10.76,10.76,0,0,1,5.81-9.73,13.75,13.75,0,0,1,12.25,0,11.16,11.16,0,0,1,4.27,15.47Zm10.54-2.56A5.56,5.56,0,0,0,118,35.31a6.3,6.3,0,0,0,3.16.78,7.77,7.77,0,0,0,3.28-.71V29.49h5.37v8.9a13.94,13.94,0,0,1-4.23,2,16.88,16.88,0,0,1-4.79.7,12.72,12.72,0,0,1-6.08-1.43,10.58,10.58,0,0,1-4.23-4A11,11,0,0,1,108.91,30a11,11,0,0,1,1.54-5.77,10.54,10.54,0,0,1,4.26-4,13.14,13.14,0,0,1,6.17-1.43,13.79,13.79,0,0,1,5.4,1,10.4,10.4,0,0,1,4,2.92l-3.86,3.5a6.82,6.82,0,0,0-5.22-2.4A5.79,5.79,0,0,0,115.05,30,6.51,6.51,0,0,0,115.82,33.13Zm32.84,7.56h-6.08V19.21h6.08Zm24.76,0h-5l-9.48-11.44V40.69h-6V19.21h5l9.48,11.45V19.21h5.95Z"/></svg>
</div>
<div id="destinies">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.47 59.84"><defs><style>.cls-6{fill:#ffffff;}</style></defs><path class="cls-6" d="M79.37,24H75.53V35.78h3.84a6.2,6.2,0,0,0,4.43-1.57,5.63,5.63,0,0,0,1.67-4.32,5.66,5.66,0,0,0-1.67-4.33A6.24,6.24,0,0,0,79.37,24Z"/><path class="cls-6" d="M0,0C21.41,17.25,32.22,36.75,33.49,59.9l240.17-.11A17.83,17.83,0,0,0,291.47,42V-.13ZM90.11,35.57a10,10,0,0,1-4.24,3.74,14.22,14.22,0,0,1-6.26,1.32H69.45V19.15H79.61a14.22,14.22,0,0,1,6.26,1.32,10,10,0,0,1,4.24,3.74,10.58,10.58,0,0,1,1.5,5.68A10.58,10.58,0,0,1,90.11,35.57Zm21.94,5.06H94.8V19.15h16.85v4.69H100.82v3.62h9.54V32h-9.54v3.92h11.23Zm19.37-3a7.25,7.25,0,0,1-3.23,2.5,12.9,12.9,0,0,1-5.21.94,19.91,19.91,0,0,1-5.07-.65,12.74,12.74,0,0,1-4-1.71l2-4.49A13.46,13.46,0,0,0,123,36.33c2.33,0,3.5-.58,3.5-1.75a1.45,1.45,0,0,0-1-1.36,18.49,18.49,0,0,0-3.21-.94,30.42,30.42,0,0,1-4-1.12,6.8,6.8,0,0,1-2.79-1.92,5.16,5.16,0,0,1-1.17-3.56,6.12,6.12,0,0,1,1.08-3.54,7.07,7.07,0,0,1,3.2-2.5,13.09,13.09,0,0,1,5.23-.92,18.29,18.29,0,0,1,4.18.47,12.65,12.65,0,0,1,3.62,1.4l-1.87,4.51a12.47,12.47,0,0,0-6-1.66,5,5,0,0,0-2.64.54,1.61,1.61,0,0,0-.82,1.4,1.38,1.38,0,0,0,1,1.29,17.82,17.82,0,0,0,3.16.88,29.81,29.81,0,0,1,4.07,1.13,7,7,0,0,1,2.79,1.9,5.06,5.06,0,0,1,1.18,3.54A6.08,6.08,0,0,1,131.42,37.62ZM152.19,24h-6.56V40.63h-6.08V24H133V19.15h19.24Zm8.35,16.67h-6.08V19.15h6.08Zm24.77,0h-5l-9.48-11.45V40.63h-5.95V19.15h5l9.48,11.44V19.15h6Zm10.37,0H189.6V19.15h6.08Zm21.58,0H200V19.15h16.85v4.69H206v3.62h9.55V32H206v3.92h11.24Zm19.36-3a7.22,7.22,0,0,1-3.22,2.5,12.92,12.92,0,0,1-5.22.94,19.83,19.83,0,0,1-5.06-.65,12.54,12.54,0,0,1-4-1.71l2-4.49a13.53,13.53,0,0,0,7.09,2.12c2.34,0,3.5-.58,3.5-1.75a1.44,1.44,0,0,0-1-1.36,18,18,0,0,0-3.2-.94,30.42,30.42,0,0,1-4-1.12,6.83,6.83,0,0,1-2.8-1.92,5.21,5.21,0,0,1-1.16-3.56,6.11,6.11,0,0,1,1.07-3.54,7.16,7.16,0,0,1,3.21-2.5,13.06,13.06,0,0,1,5.23-.92,18.26,18.26,0,0,1,4.17.47,12.71,12.71,0,0,1,3.63,1.4l-1.88,4.51a12.43,12.43,0,0,0-6-1.66,5,5,0,0,0-2.64.54,1.62,1.62,0,0,0-.83,1.4,1.4,1.4,0,0,0,1,1.29,18,18,0,0,0,3.17.88,29.63,29.63,0,0,1,4.06,1.13,6.82,6.82,0,0,1,2.79,1.9,5.07,5.07,0,0,1,1.19,3.54A6,6,0,0,1,236.62,37.62Z"/></svg>
</div>
</div>
<div id="brand">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 106 106"><defs>
<style>.cls-1{fill:#ffffff;}</style>
</defs><a xlink:href="index.html"><path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/><path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/></a></svg>
</div>
<div id="reserve">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 944.38 115.07">
<defs><style>.cls-2{fill:#ff7800;}</style></defs>
<a xlink:href="reserve.html"><path class="cls-2" d="M494.41,80.8h-3.78v7h3.78a4.7,4.7,0,0,0,3.15-.91,3.23,3.23,0,0,0,1.07-2.59,3.27,3.27,0,0,0-1.07-2.61A4.65,4.65,0,0,0,494.41,80.8Z"/><path class="cls-2" d="M400.62,80.8h-3.77v7h3.77a4.73,4.73,0,0,0,3.16-.91,3.23,3.23,0,0,0,1.07-2.59,3.27,3.27,0,0,0-1.07-2.61A4.68,4.68,0,0,0,400.62,80.8Z"/><path class="cls-2" d="M940.67,10a55.59,55.59,0,0,0,3.71-10H535.66A63.67,63.67,0,0,1,474,59.85h-3.54A63.67,63.67,0,0,1,408.72,0H0A55.59,55.59,0,0,0,3.71,10H364.28V20H9.42a68.63,68.63,0,0,0,8.32,10H364.28V40H30.75C40.78,45.88,53.9,50,71,50H364.29V98.82a16.24,16.24,0,0,0,16.25,16.25h183.3A16.25,16.25,0,0,0,580.1,98.82V50H873.4c17.08,0,30.2-4.12,40.23-10H580.1V30H926.64A68.52,68.52,0,0,0,935,20H580.1V10ZM404.92,99.48l-4.36-6.39h-3.71v6.39h-6.8v-24h11a13.71,13.71,0,0,1,5.66,1.08,8.75,8.75,0,0,1,3.8,12.37,8.38,8.38,0,0,1-3.49,3l5.19,7.55Zm29.84,0h-19.3v-24h18.85V80.7H422.19v4h10.68v5.08H422.19v4.4h12.57Zm21.67-3.36a8.25,8.25,0,0,1-3.61,2.79,14.55,14.55,0,0,1-5.84,1,22.23,22.23,0,0,1-5.66-.72,14,14,0,0,1-4.47-1.92l2.23-5A14.38,14.38,0,0,0,442.83,94a14.06,14.06,0,0,0,4.19.65c2.61,0,3.91-.65,3.91-2a1.62,1.62,0,0,0-1.11-1.53,21.14,21.14,0,0,0-3.59-1,35.84,35.84,0,0,1-4.54-1.25,7.63,7.63,0,0,1-3.12-2.15,5.79,5.79,0,0,1-1.31-4,6.84,6.84,0,0,1,1.21-4,8,8,0,0,1,3.59-2.8,14.69,14.69,0,0,1,5.85-1,20.9,20.9,0,0,1,4.67.53,14.31,14.31,0,0,1,4.05,1.57l-2.09,5a14.06,14.06,0,0,0-6.66-1.85,5.63,5.63,0,0,0-3,.6,1.79,1.79,0,0,0-.92,1.56,1.55,1.55,0,0,0,1.09,1.45,20.1,20.1,0,0,0,3.54,1,34.24,34.24,0,0,1,4.55,1.25,8,8,0,0,1,3.13,2.13,5.72,5.72,0,0,1,1.32,4A6.8,6.8,0,0,1,456.43,96.12Zm23.62,3.36h-19.3v-24h18.86V80.7H467.48v4h10.68v5.08H467.48v4.4h12.57Zm18.65,0-4.36-6.39h-3.71v6.39h-6.8v-24h11a13.71,13.71,0,0,1,5.66,1.08,8.42,8.42,0,0,1,3.71,3.09,8.5,8.5,0,0,1,1.31,4.73,8.41,8.41,0,0,1-1.22,4.55,8.32,8.32,0,0,1-3.49,3L506,99.48Zm24.62,0h-6.7l-10.26-24h7.34l6.53,15.66,6.66-15.66h6.73Zm31,0H535v-24h18.85V80.7H541.76v4h10.68v5.08H541.76v4.4h12.57Z"/></a></svg>
</div>
</div>

CSS :hover issue displaying elements and background images

I'm having an issue getting the hover to work on my project. I used this code in a different project and worked fine (although I did not use the background image in that project). Ive tried modifying the hover to access ID and Class on separate blocks, no luck. Thanks for taking a look!
Here's my HTML:
<div class="divTableRow">
<a href="#">
<div class="divTableCell in-news">
<h3>In the News</h3>
<div class="hvr">
<p>Read about the buzz viveve is creating</p>
</div>
</div>
</a>
<a href="#">
<div class="divTableCell" id="investor">
<h3>Investor News</h3><div class="hvr">
<p>Read about Viveve's financials</p>
</div>
</div>
</a>
</div>
Here's my CSS:
.in-news {
background-color: #C4D600;
}
.in-news:hover {
background-color: none;
background-image: url(Images\InTheNews.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: top 20px center;
}
#investor {
background-color: #8999BA;
}
#investor:hover {
background-color: none;
background-image: url(images\InvestorNews.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: top 20px center;
}
.divTableCell {
display: table-cell;
width: 280px;
height: 280px;
float: left;
position: relative;
margin: 3px;
}
.hvr {
display: none;
}
.hvr:hover {
display:inline;
}
Thanks again.

Looks like you are missing quotes around the images URL. So it should be:
background-image: url("images\InvestorNews.png");
instead of:
background-image: url(images\InvestorNews.png);
Here's a working example: https://codepen.io/wedgess/pen/YOpBoq

Svg clipPath to clip a div doesn't work in Safari when i duplicate it

I have created a clip path that I reuse on multiple divs in the page. I use the property clipPathUnits="objectBoundingBox" to make it apply to each div based on its position.
It works great in Chrome and Firefox. When I tried it in safari it only works based on the first div. Meaning that it works well the first time than when i call it again the boudingbox is still based on the first Div. I realized this when i gave a negative margin to the second div until it overlaped with the first one partial then I could see it.
Here is an example of the issue:
.bar {
height: 100px;
width: 100px;
}
.block {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: white;
z-index: 100;
display: block;
clip-path: url(#clipping);
-webkit-clip-path: url(#clipping);
}
<svg style="background: blue; height: 0px; overflow: hidden;">
<defs>
<clipPath id="clipping" clipPathUnits="objectBoundingBox">
<path fill="#FFFFFF" d="M0.501,0.971c-0.014,0-0.027-0.003-0.04-0.011l-0.34-0.194c-0.024-0.014-0.04-0.041-0.04-0.069L0.081,0.306
c0-0.028,0.015-0.055,0.04-0.069L0.458,0.04c0.013-0.007,0.026-0.011,0.04-0.011s0.027,0.003,0.04,0.011l0.339,0.194
c0.025,0.014,0.041,0.041,0.041,0.069l0.001,0.391c0,0.028-0.015,0.055-0.04,0.069L0.542,0.96C0.529,0.968,0.515,0.971,0.501,0.971z
" />
</clipPath>
</defs>
</svg>
<div class="bar" style="background: blue;">
<div class="block">
</div>
</div>
<div class="bar" style="background: green;">
<div class="block">
</div>
</div>
http://codepen.io/appteamio/pen/WbdRgx
I'm I doing something wrong or is it a Safari issue.If sois there any work aroung.
thanks