Develop Reference

Trapezoid shaped div with background image that animates towards a rectangle when scrolling

I know what I am asking is somewhat weird so I will illustrate with images what I am aiming for:
First I want to have a trapezoid shaped div as below, instead of being blue I want it to have a bg image:
Then I want the trapezoid to animate towards this shape (rectangle) so it acts as a navbar, while keeping it's bg image (It doesn't have to resize or anything, but if there's a way to also blur the image it would be really nice).
Is this possible at all? Any idea on how could I achieve this? I know JS so using JS to animate it would be no problem at all, the main problem I'm having is doing that trapezoid shape and being able to resize it to the rectangle while having a background image.

clip-path can easily do this:
.box {
height:100px;
background:url(https://picsum.photos/id/1015/800/800) top center/cover;
clip-path:polygon(0 0,100% 0,100% 100%,0 70%);
transition:1s;
}
html:hover .box {
clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
height:70px;
}
<div class="box"></div>

Animate multiple background image in one div

I need a smart/tough guy to help me with my issue right now.. please check div that set css multiple background image ... in that image I set the background of a div in a gradient color while I called other background images that looks polygonal, and the css is something like this:
.at{
height: 650px;
padding-top: 130px;
background-image: url(../../../img/2nd_element.png),
url(../../../img/1st_element.png),
url(../../../img/3rd_element.png),
url(../../../img/4th_element.png),
linear-gradient(to bottom, #017a92 0%,#91d2c1 100%);
background-position: 3em 60px, left bottom, 70% -90px, right top, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat;
}
I needed to animate these different background images with offset(and it depends on the scrolling page that if this content is centered).
for example: bg-image1 = will appear after 3s, bg-image2 = will appear after 4s, bg-image3 = will appear after 5s.. then etc etc... until the polygonal background images completed.
I'm not sure if this can be done by jQuery or javascript or css3 animation or svg animation but I think you get my point sir! thanks for helping! looking forward to donate who can help me with this! thank you!

Top-left pixel outside 100% width of the browser window

Is it possible to load my webpage so that top-left pixel isn't the first one but rather somewhere else?
This is my current webpage layout and I'd like my webpage to be loaded so that top-left pixel is right where red arrow lands

I think I understand your request: it sounds like your goal is to have a single-column page and then exclusively in the about section with the right/left blocks you'd like to be able to scroll left/right.
If that's correct, I would restructure your page to have just the middle column, and then use css positioning on your #about section like this:
#about {position: relative;}
#left {position:absolute; left:-100%; width:100%; min-height:100%;}
#right {position:absolute; left:100%; width:100%; min-height:100%;}
You might need to do something with your body overflow, too:
body {overflow-x:hidden;}
Then to actually create the functionality you want, you could use javascript/jQuery to animate the sections left/right when you click on the anchors in the #about section.
Or you could use this js plugin, which works extremely well and is designed for just this type of layout: http://alvarotrigo.com/fullPage/

For whole container or body tag apply this css
position: absolute;
top:0;
left:0;

Create gradient overlay on background image with dynamic height

I want to create black gradient overlay on background image. But I have a problem. Background image always random and responsive ready (width:100%; height:100%; background-size:100%;). So I can`t just put gradient to bottom with fixed height. Is it possible to do that with css or jquery? Thanks!
My HTML:
http://jsfiddle.net/aobnuox7/
<div style="background:url(http://images.nintendolife.com/reviews/2011/02/panda_craze_dsiware/large.jpg) #000 no-repeat top center; width:100%; height:100%; background-size:100%; position: absolute; top: 0; left:0; z-index:1; ">
</div>
http://pbrd.co/1v1cavd - screenshot of what I need to do

If you want a shadow that fades from the bottom to around the middle why not use box-shadow: inset? You can find some useful generators online to get yourself started and then modify them as you need them to be. I'd suggest putting the box-shadow in an after pseudo class also.

Position and Slider (see image)

Hi Stackoverflow,
I have some questions.
1) The image behind the black circle will be a full-width responsive slider. How can I put this image behind all the elements, in a way that Internet Explorer doesn't bug everything?
I know I can use position: absolute with z-index, but since I always had problems with IE and positions, I don't know (really), a better solution.
2) The background image of the black circle is also from the slider. Each BG it's directly linked with a image. Example: this colourful image will be linked to this black circle bg. Next slider will be another image with another bg.
How can I do this? :/

Try this:
As you said, set the position and z-index to the black image and append the same to body of the html page. Then change the slider images as earlier.
I hope it will work.

put the background image as a DIV and the next DIV "contents" will have all the contents
eg:
----contents ----
</div>
CSS
#bg-image {
background: url('http://t2.gstatic.com/images?q=tbn:ANd9GcSsYV2xklhQlwOFsqPY8OrL69n2F_naug6eShy67xcKm6QRFWmqXw');
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
}
#contents {
background: none;
width: 100%;
height: 100%;
position: absolute;
}

-- Take a look here Background image swap full
-- Other option is, Make a large size image and place it on background.
-- This is with css. Check this link perfect full page background image

Since the black circle doesn't change, what I did was: putting the black circle and the background image in a same image. And I just had to "control" the position of the text. It was a dumb solution, but it solved.