How can i make a layout like this using background-image?

1

How can i make a layout like this using background-image? using css

image-transparet.png880Ɨ562 576 KB

2

http://bennettfeely.com/clippy/

Of course youā€™ll have to play with the CSS shape on clippy to get what you want, but this is how you can do it.

2 Likes
3

Iā€™ve updated the pen to show how you might position text.

4

Well ā€¦ here is one method.

Probably a bit more involved than necessary (it requires several elements and some Javascript).

You could do without the Javascript if you fixed/pre-calculated some of the values.

This is by no means perfect, but the method that @MARKJ78 posted isnā€™t widely supported yet (clip paths are hidden behind a flag in Firefox, for example);

~Micheal

5

Hi @michealhall,

Op wanted a pic like ā€˜thisā€™, with CSS. As cool as it is, your solution isnā€™t the same. (donā€™t mean to be petty, but it isnā€™t!)

clip path is the only way as far as I know (Iā€™m pretty much a noob tho)- as unsupported as it is. Although I suppose you could get crazy with positioning oblongsā€¦

6

I tested your solution in some browsers.
Works in Google Chrome 54.x
Not working in Firefox 50.x
Not working in IE 11
What could be done?

7

http://caniuse.com/#search=Clip-path

Should have mentioned it as Michael did. In terms of what to doā€¦ Iā€™d probably use clip-path (i think you could probably test for it with modernizr) and as a fall back either go with some JavaScript or try and position some oblongs over background image div to make the hollow centre. I think that might give some responsivity issues though.

8

No worries. I didnā€™t look at how the initial effect was done - I simply looked at the result and considered how it might be done. With clip-paths not widely supported, the only way I could think of at the time is to use two images and then position them so that they occupy the same positions compared to the viewport, but insert one in a container so that you could size/position that and use overflow:hidden to create the ā€œclip-pathā€ type effect.

I added some additional styling to make it more visible, but figured the OP could always strip that out.

Without those style flourishes though, essentially the effect is the same.

Iā€™ve updated the pen to remove the styles ā€¦ and make it draggable, just for the fun of it (Iā€™m practicing my vanilla JS - Iā€™ve used jQuery for years for lots of things like drag and drop and positioning and this has been a good excuse to practice going without).

9

Codepen seems broke for me at the momentā€¦ really want to see how you made something draggable in js though, i was aware it could be done with jquery.ui but i assumed it would be pages of javascript underneath!

10

Yeah, it seems codepen is having load issues ā€¦

But itā€™s actually not extremely difficult to do drag and drop (at least, not for my purposes). I didnā€™t use the native implementation because that seems to be geared more toward moving elements from one container to another (drag from here then drop to there).

What I wanted was more of a move this element around when I click, hold the mouse button down and move it around. The same things as the .draggable() functionality in jQueryUI.

So, itā€™s built around mousedown, movemove and mouseup.

Ah! Looks like codepen is working again ā€¦ for now.

11

looks nice, but not working in firefox 50.0.2

12

Like I said in a message above, support for this feature is hidden behind a configuration flag. You need to turn it on.

14

With CSS only:

I favour the last two. Of course clip-path is 10 times more straightforward, and you can do much more if you leverage svg filters (10 times more effort though). Also some things will be easier once there is support for backdrop-filter.

1 Like
15

Hello everyone here, i have a big problem and i cannot solve it since the last yearā€¦iā€™ve tried to put a video inside a clip pathā€¦ this is work fine with chrome and safariā€¦but the problem that it doesnā€™t work fine with firefoxā€¦ the page being slowlyā€¦ can anyone help me plzā€¦ the code is :

				<div class="container-fluid">
				<svg class="clip-svg">
					<clipPath id="clipPolygon77" clipPathUnits="objectBoundingBox">
						<polygon points="1 0.15, 0.75 0.15, 0.53 0, 0.30 0.12, 0 0.20, 0 1, 1 1"></polygon>
					</clipPath>
				</svg>
					<div class="row">
						<div class="video-background">
							<div class="video-foreground ">
								<div id="player"></div>
							</div>
						</div>

				        <div class="just-txt">
				        	<h3>We would love to hear from you</h3>
				        	<p>be the first who watch and love this video as much as we do</p>
				        </div>
				    </div>
				</div>
			</div>
		</div>
	</div>
16

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