Full width image with mask

Question

I have a responsive website with an imageheader (full-width). On top of that image I have a SVG mask, I have this so I have a painted-like look on the bottom of the header. The problem is, my image isn't scaling to fit the width. I would like it to be 100% wide and 700px high (or something like cover it's parent, just like you would do normally: background-size: cover).

This is what I would like:

And this is what I have achieved so far (the image is different but that doesn't matter:

This is why I need the brush:

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 I want: - The width of the image must be 100%, the mask must cover the full image width, the brush cannot be an image on top of: I want to see the content of the site behind the header, like you see in the second picture.

Dimensions of the image: 1920x1256 Dimensions of brush: 1422x721

Answer 1

With many thanks to Paul LeBeau and this overflow answer, I found out that both my brush as my image need to have the same dimensions. Combining that with the viewBox dimensions set correctly, I managed to fix the problem!

The code:

<svg width="100%" height="100%" baseProfile="" version="1.2" preserveAspectRatio="xMinYMax slice" viewBox="0 0 1920 1256">
            <defs>
                <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
                    <image width="100%" height="100%" xlink:href="/images/brush-header3.png" /> 
                </mask>
            </defs>
            <image id="the-mask" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="<?= $s_Background ?>" />
        </svg>

Answer 2

If you want your SVG to scale to fit its container (cover), you need to tell the browser how big the SVG's contents are. It can't scale the SVG if it has no idea how big it is.

You do that using the viewBox attribute.

You haven't given any info on how big your image is. But assuming, for the sake of this example, it is 1024x768. Then change your SVG root tag to:

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

You may also want to change the preserveAspectRatio attribute also so that it is positioned at the top of the container:

<svg width="100%" viewBox="0 0 1024 768" preserveAspectRatio="xMidYMin meet">

Update

Here's an example witha 400x200 image scaled to fit the 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>

Answer 3

place this in your css styling

 #the-mask {
      position: fixed; 
      top: 0; 
      left: 0; 

      /* Preserve aspet ratio */
      min-width: 100%;
      min-height: 100%;
    }

or

you can use this to apply it full screen background Image

html { 
  background: url(/images/header-image.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}