rotate two adjacent elements - html

I have two adjacent elements:
Hero Div, with a background image
A 60px high element beneath that
I gave the Hero Div a clip-path, to angle the bottom right corner of the image slightly up. I need the div below that to match the angle, so I gave it a transform: rotate(x) property. Only issue is that as the hero div scales with its percentages the transformed div doesn't scale with it, leaving white spaces to the left or right depending on the size.
I am sure this is an easy task for a lot, but I can't think of a way that is suitable for production.
div(id="front")
section(class="hero overlay")
main
h1 xxx
div(class="angled")
Imagine the bottom right corner of this gray box above as slanted upwards, so as to create the effect of the box being tilted.

I solved it this way:
.hero {
background-image: url(../images/hero.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 250px;
width: 100%;
}
.angled {
background-color: #fff;
border-top: 60px solid color('one');
padding-bottom: 40px;
margin-top: -40px;
transform: rotate(-2.5deg);
width: 110vw;
z-index: 99;
}
As a classical mobile first approach, the background hero image only gets 250px of a height. The angled div is where the money is at. The padding-bottom along with the z-index prevents the hero image from spilling out on the bottom (hides it). The negative margin-top value pulls the div upwards and aligns it with the bottom left corner of the hero image.
I had the hero image itself angled but decided to take it out so that I don't have to worry about two elements with the same responsive angles.
Hope others see this and take a similar mobile-first approach.

Related

Background svg image shifts laterally ~1px when page is zoomed

HTML:
<div>
<button class="my-btn"></button>
</div>
CSS:
.my-btn {
display: inline-block;
height: 19.6px;
width: 19.6px;
border: none;
border-radius: 5px;
background: url(https://www.svgrepo.com/show/21045/delete-button.svg) center no-repeat, #f99d1d;
background-size: 70%;
}
So, I set an svg as a button background. I want this image to be centered, but the problem is that when the page is zoomed, the background image sometimes shifts ~1px to the left or right. It's like on certain zoom levels browser engine can't make the image be surrounded by equal number of pixels from both sides, and instead of:
|----5.5px---- background-image ----5.5px (or 5.4px)----|
it outputs:
|----6px---- background-image ----5px----|
The same happens with vertical axis.
Why does it work like that and how can I make my background image be centered at any zoom level?
Codepen of the example: https://codepen.io/recursion1/pen/JjZPbxO
Screenshot of what I mean by lateral shifting

css background-image leak

This a WavyBar component that is made of a div with 3 background images. The photo and 1 wavy white image at the top and another at the bottom on the top of a photo. That creates the wavy effect.
silver line on the top and bottom of the page
As you can see on this image, there is a silver line on the top and bottom of this div, which is where the background photo is leaking outside of the div.
The css used is the following:
background-image: url(2de1e10e83bb3f12dc8bfeb1818ee536.png), url(eeb31e00f15749916d5fd9d3ab2b8f10.png), url(f03c768d84f5d17e39ba033692433d0f.png);
background-repeat: repeat-x, repeat-x, no-repeat;
background-position: left top, left bottom, center center;
background-size: auto, auto, cover;
adding these styles, kinda solved the problem, but created a white line on the top of the div
padding: 1px 0;
background-clip: content-box;
https://cloud.githubusercontent.com/assets/1951007/20140914/fe52e0c0-a674-11e6-944e-f16a6791659c.png
Already tried box-sizing: with all values
Got into similar issue. The background-color set for an image was leaking from top and bottom, even after playing around with margin, padding and box-sizing.
Finally below solution worked for me. You need to wrap the image in a Div element with height same(or lower than) as that of the image. And push the image slightly to the top.
.image{
position: relative;
top: -4px;
}
.parent{
height: 240px; // keep it fix or use css calc() function
}

Background that scrolls down css

I am wondering how can I something like this with CSS & HTML:
https://www.vatsim.net
You open the page and you get a backrgound that fits all the browser, but then you scroll down and you get a solid color as background and more info.
I tried with this, but is not what I am looking for, I want something like the link on the top,
https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/
Thank you very much!
You can get far by just adding a bit of CSS. In the snippet below, there are two divs. The first one is for the top area with the image. The second one is for the rest of the content.
The first div gets a height of 100vh, making it 100% of the screen height. The background image is centered and set to scale so it covers the entire div. And, well, that's basically all there is to it. No script needed.
* { /* Just get rid of some whitespace */
padding: 0;
margin: 0;
}
div.image {
height: 100vh; /* div is 100% of viewport height */
background-image: url(https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg);
background-size: cover; /* Entire div is covered by the image */
background-position: center; /* Image is centered relatively to the div. */
}
/* Just some styling to make it visible. */
div {
color: white;
font-size: 150%;
}
div.content {
color: black;
background-color: #eee;
height: 2000px;
}
<div class="image">This is the top area. The image exactly covers the view.</div>
<div class="content">This is the rest of the content. You can scroll down a bit just to see what happens.</div>
The webpage you added is basicly splitted to divs, the first is 100% height and 100% width. therefore you can see him all over your screen.
The others are just divs with 100% width but not 100% height, which gives you the ability to switch the background color from light gray to white and then to gray.
Not too complicated but yet a nice design

Setting background-image to an image with partial transparency

I'm trying to place one div with a partially transparent background (meaning regions of the image are blank -- not X% opacity) on top of another.
#about {
background-image:url('http://i.imgur.com/B922OoM.png');
background-position: center;
background-repeat: none;
background-size: cover;
background-color: transparent;
z-index: 2;
height: 450px;
width: 100%;
}
I can't get the div to not fill with white behind the image.
jsfiddle: http://jsfiddle.net/4HAxu/ -- the relevant div is #about
(I'm pretty sure the image is exported properly -- if you change background-color:transparent to background-color:blue, you'll see what I mean.)
Your image is fine.
It's the fact your #header doesn't actually extend down that far. If you change the background colour of your body you'll see it's not your #about div it's the body showing behind it that is white
Red BG body JSFiddle
To alleviate this problem, if you actually overlay your divs you will get the effect I think you're trying to achieve.
Overlayed divs with negative top margin

Placing an background image with padding in h2 tag

I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).