How can i make a layout like this using background-image? using css
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.
I’ve updated the pen to show how you might position text.
Well … here is one method.
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);
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…
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?
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).
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.
looks nice, but not working in firefox 50.0.2
Like I said in a message above, support for this feature is hidden behind a configuration flag. You need to turn it on.
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
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>
background: url(images/bg.jpg) no-repeat center center fixed;