html - Full width image with mask -

-

i have responsive website imageheader (full-width). on top of image have svg mask, have have painted-like on bottom of header. problem is, image isn't scaling fit width. 100% wide , 700px high (or cover it's parent, normally: background-size: cover).

this like:

header image designed

and have achieved far (the image different doesn't matter:

header far

this why need brush: enter image description here

the code i'm using:

<div class="cover">         <svg width="100%" height="100%" baseprofile="full" version="1.2">             <defs>                 <mask id="svgmask2" maskunits="objectboundingbox" maskcontentunits="objectboundingbox" transform="scale(1)">                     <image width="100%" height="100%" xlink:href="/images/brush-header.png" />                 </mask>             </defs>             <image id="the-mask" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="/images/header-image.png" />         </svg>     </div>

where cover has css:

.cover{   height: 700px;   width: 100%; }

what want: - width of image must 100%, mask must cover full image width, brush cannot image on top of: want see content of site behind header, see in second picture.

dimensions of image: 1920x1256 dimensions of brush: 1422x721

if want svg scale fit container (cover), need tell browser how big svg's contents are. can't scale svg if has no idea how big is.

you using viewbox attribute.

you haven't given info on how big image is. assuming, sake of example, 1024x768. change svg root tag to:

<svg width="100%" viewbox="0 0 1024 768">

you may want change preserveaspectratio attribute positioned @ top of container:

<svg width="100%" viewbox="0 0 1024 768" preserveaspectratio="xmidymin meet">

update

here's example witha 400x200 image scaled fit page.

body {    margin: 0;  }    .cover {    height: 700px;    width: 100%;  }
<div class="cover">      <svg width="100%" viewbox="0 0 400 200" preserveaspectratio="xmidymin meet">          <image id="the-mask" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="http://lorempixel.com/400/200/" />      </svg>  </div>


Comments

Post a Comment

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

-
i trying parse date 2014-12-03t10:05:59.5646+08:00 using these 2 formats: yyyy-mm-dd't'hh:mm:ss yyyy-mm-dd't'hh:mm:ssxxx when parse using yyyy-mm-dd't'hh:mm:ss works fine, when parse yyyy-mm-dd't'hh:mm:ssxxx parseexception thrown. which correct format parse date , difference between these 2 formats? note : cannot use joda :( those valid formats: yyyy-mm-dd't'hh:mm:ss.sssz >>> e.g.: 2001-07-04t12:08:56.235-0700 yyyy-mm-dd't'hh:mm:ss.sssxxx >>> e.g.: 2001-07-04t12:08:56.235-07:00 edit: btw, "x" refer (iso 8601 time zone)
Read more

c# - Get rid of xmlns attribute when adding node to existing xml -

-
i have xml-file: <ns2:root xmlns:ns2="namespace"> <ns2:a> <ns2:b>some content</b> <ns2:c>some content</c> <ns2:d>some content</d> </a> </root> i need add new node in specific place, code is: var doc = xdocument.load(file); xnamespace ns2 = "namespace"; doc.element(ns2 + "root").element(ns2 + "a").element(ns2 + "c").addafterself( new xelement(ns2+"new", new xelement("new1", new xelement("new2","some content"), new xelement("new3", "some content")))); the output is: <ns2:root xmlns:ns2="namespace"> <ns2:a> <ns2:b>some content</b> <ns2:c>some content</c> <ns2:new> <new1 xmlns=""> <new2>some content</new2> ...
Read more