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

Try using `background-size: cover;`, maybe that will fix it. — Thaillie, Sep 21 '15 at 12:13
The `width="100%"` will set the image's width to 100%. If the image is 200px wide, it will be 200px wide, and not fill out the whole browser-window. — razemauze, Sep 21 '15 at 12:14
And is there a way to make it fill the width? (just like background-size: cover would do if it would be a background without a mask ;)) — Bart Burg, Sep 21 '15 at 12:16
@BartBurg would [this](http://stackoverflow.com/questions/19269472/how-to-make-css-div-width-equal-to-browser-width-if-element-is-inside-wrapper-el) answer the question from your comment? — Bart van Nierop, Sep 21 '15 at 12:18

Paul LeBeau · Answer 1 · 2015-09-22T09:03:56.027

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>

Your answer seems logic, but could you give me a small example? Mine is still not scaling to cover its container. Thanks a lot! — Bart Burg, Sep 22 '15 at 07:05

score 1 · Accepted Answer · edited May 23 '17 at 10:33

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>

Rajan Kali · Answer 3 · 2015-09-21T12:29:45.953

0

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;
}

edited Sep 21 '15 at 12:29

answered Sep 21 '15 at 12:22

Rajan Kali

12,627
3
25
37

It does work if I just want a full width image without mask, but that mask is important. I want the brush-like finish on the bottom. – Bart Burg Sep 21 '15 at 12:36
1

Apply that brush to a div and place it in front using z-index and make it transparent . – Rajan Kali Sep 21 '15 at 12:38

Full width image with mask

3 Answers3

Update