I have a container with a background video, and I am creating a slanted div effect by absolutely positioning a div with a triangular image at the bottom of the div.
The structure for the div:
<div class="triangle">
<img src="triangle.png" />
</div>
and the CSS:
.triangle {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.triangle img {
width: 100%
}
It works and looks perfectly fine on Chrome, Firefox, and even IE11, but on Edge there is a one pixel transparent bleed-through of the background video no matter what I do. I've tried shifting the image down a few pixels, giving it a higher z-index, adding, translating and positioning multiple white pseudo elements to cover it up, but Edge will not display the elements as flush or allow the line to be covered up by seemingly any means.
Does anyone know what is causing this or how to fix it?
Edit: Sorry for the absence, Thanksgiving!
Here is a link to the PNG triangle being used: https://res.cloudinary.com/dgeb3iekh/image/upload/v1542393468/new-slant_ga8nka.png
Here is a Codepen that reproduces the problem in Edge (for me anyway).
Related
When using border-radius on an element with background image in Edge the image becomes blurred. Here is the exact same fiddle in Chrome (left column) and Edge (right).
I've also notices that the browser width plays a role in the amount of blur the image gets. When I resized the browser by a few pixels I got even more blur. Edge (left) vs Chrome (right)
Even though the blur is only slight it becoms even more visible on when the image has lower quality. Chrome (left) vs Edge (right)
Is there any way to prevent the image from being blurred?
div:first-child{
border-radius: 10px;
}
div{
box-sizing: border-box;
background-image: url('https://puu.sh/sEUpF/c8fa8f198b.png');
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
border: 1px solid red;
width: 30px;
height: 30px;
background-color: #fff;
}
div + div{
margin-top: 10px;
}
<div>
</div>
<div>
</div>
I notice that your png source image has dimensions of 24x24px but is being displayed by the browser at 15x18px. I'd take a punt that the browsers in-built image rendering is causing the blur as it attempts to scale the image down to fit the new scale and Edge can't compete with Chrome in this respect.
Try altering your background-image to the exact display dimensions and see if you still get blurring then.
Edit
This seems to be an Edge issue with border-radius. A nice suggestion would be to use CSS' Image-rendering property but that doesn't work for Edge (https://css-tricks.com/almanac/properties/i/image-rendering/).
I'd work around it by creating an :after pseudo element to house your icon image and position that inside your container element. Because in a container without border-radius you aren't seeing the unwanted blur
Css
body {
margin: 0;
padding 0;
min-width: 1072px;
height: 100%;
background: url('bg_repeat.png') center top repeat;
}
.bg {
min-height: 100%;
background: url('bg_center.png') center top repeat-y;
}
.page {
width: 1024px;
margin: 0 auto;
position: relative;
}
Html
<body>
<div class="bg">
<div class="page"></div>
</div>
</body>
It's essentially a centered fixed width page with a pattern background and an additional bg div to add a vertical gradient lighting effect.
The problem:
When I have a 100% width div next to a horizontally centered div, I get those 1px back and forth shifts when resizing the browser window horizontally.
.page does not align to the backgrounds of bg and body or their centered text. In otherwords .page does not remain in the same exact horizontal position relative to the background image's position.
It's a minor problem. I don't have any pixel-perfect patterns or anything. I'm more just curious about this if it's even possible. I have seen IE 11 blurring or doing some half-a-pixel shifts with pixel perfect repeating backgrounds with certain window widths.
FIDDLE: http://jsfiddle.net/HJsNY/
However the problem does not reproduce in the fiddle. But the exact code causes 1px offsets in a full window. (using Chrome)
EDIT: Actually this jsfiddle does reproduce in Chrome. But only when the iframe width gets large enough (>~1300px) for some reason. On FF it's noticable on small window widths too.
Here's what happens: 1px background offset that keeps alternating when resizing browser window.
I think you need a css reset. Firefox (like every browser) displays css with some intern css. You must remove it.
Add this to your html :
* {
margin: 0;
padding: 0;
}
I updated your JsFiddle.
If you want more info this, I already wrote it here.
Did it solve your case ?
On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}
<div id="main-solutions">
<div id="main-solutions-top-left"></div>
<div id="main-solutions-top-right"></div>
<div id="main-solutions-body">
blah blah blah
</div>
</div>
css
#main-solutions {
}
#main-solutions-top-left {
position: absolute;
top: 0px;
left: 0px;
background: url('../images/Top-Left-Gray-Corner.gif') no-repeat top left;
width: 434px;
height: 15px;
}
#main-solutions-top-right {
position: absolute;
top: 0;
right: 0;
background: url('../images/Top-Right-Gray-Corner.gif') no-repeat top right;
width: 434px;
height: 15px;
}
#main-solutions-body {
background: url('../images/Gray-Gradient.jpg') repeat-x;
}
I'm expecting to see that main-solutions has two absolutely positioned divs at the top left and right with my rounded corner image, and then followed by the body with the gradient, but when I use HTML element browsers, the top-left and top-right div are not appearing at all, very confused, why are those divs being disregarded?
UPDATE (for others confused by answer):
At the root of my issue is I didn't understand that both absolute and relative define a new coordinate system for their contents, in addition to specifying the posision of the element itself. Found a good explanation here:
http://www.w3.org/TR/WD-positioning-970131#Positioned
from section 2.2
Like 'absolute' positioned elements,
'relative'ly positioned define a new
coordinate system for child elements,
with the origin located in the
position where the first child element
is rendered
Far as i'm seeing, the corners should be appearing at the top left and right of the page, since your container div doesn't have a CSS position property. Absolute-positioned elements' positions are relative to the innermost parent that has a position other than static (the default).
Try adding position: relative to the container div's CSS. It works much like the default, but (1) if you want, you can shift the div's position by some amount (which isn't extremely useful here, but still), and (2) since the position's not static anymore, absolute-positioned stuff inside the div should position itself relative to the container, rather than to the body/page.
Also, some browsers won't even display a div that has no content -- so the background for said div might not show. You'll probably want to have something in the divs. Even a single will work.
Have you considered using CSS border-radius to achieve this rather than messing around with images?
border-radius is supported by all browsers except IE, but even IE can be made to work with it with the use of a clever little thing called CSS3Pie.
(plus as a bonus, CSS3Pie also gives IE CSS gradient backgrounds, so you could kill two birds with one stone)
I have a div with border-radius set to some value (let's say 10px), and a nested div that is the full width and height of its parent.
<!-- ... -->
<style type="text/css">
div.parent {
display: block;
position: relative;
width: 100px;
height: 100px;
border-radius: 10px;
background: #0000ff;
overflow: hidden;
}
div.inner {
display: block;
position: relative;
width: 100%;
height: 100%;
background: #ff0000;
}
</style>
<!-- ... -->
<div class="parent">
<div class="inner"></div>
</div>
<!-- ... -->
I noticed that the parent does not clip the child around the rounded corners, in spite of overflow being set to hidden. Another stackoverflow thread indicates that this behavior is "by design":
How do I prevent an image from overflowing a rounded corner box with CSS3?
However, upon digging up the working draft for CSS3 backgrounds and borders...
http://www.w3.org/TR/css3-background/#corner-clipping
...I couldn't help but notice the following description under the "corner clipping" section:
Other effects that clip to the border
or padding edge (such as ‘overflow’
other than ‘visible’) also must clip
to the curve. The content of replaced
elements is always trimmed to the
content edge curve
So what am I missing? Is the content supposed to be clipped to the corners? Am I looking at outdated information? Am I doing it wrong?
If you remove position: relative; on both elements the outer element clip the child around the rounded corners. Not sure why, and if it is a bug.
It's not by design, there's an outstanding defect in Firefox about this. Should work OK in any WebKit browser. In Firefox you either have to add border radius to the contained element too, or use some sort of hack.
I came here looking for an answer because I had a similar problem in Chrome 18.
I was trying to have a rounded box with two elements inside of it - title and index number - with index number positioned absolutely at the bottom left corner of the box.
What I noticed was if I had the HTML like this, the title element would bleed outside the rounded corners (border-radius) even though overflow was set to hidden on the parent element:
<a>
<div style="overflow:hidden; border-radius:15px; position:relative;">
<div id="title" style="text-align:center;">Box Title</div>
<div id="index" style="position:absolute; top:80px;">1</div>
</div>
</a>
But if I moved the relative positioning up one parent element everything looked good:
<a style="position:relative;">
<div style="overflow:hidden; border-radius:15px;">
<div id="title" style="text-align:center;">Box Title</div>
<div id="index" style="position:absolute; top:80px;">1</div>
</div>
</a>
Just wanted to chime in on this one since I found this with a similar problem.
In a div with its overflow set to scroll, the border-radius didn't clip the content while scrolling unless the content was scrolled to the absolute top or bottom. Even then, the clipping only sometimes reappeared if I scrolled the document to the absolute top or bottom as well.
On a lark I added a transparent border to the element and that seemed to enforce the clipping on the corners. Since I already had some space around the element, I just cut that in half and applied the remainder to the border thickness. Not ideal, but I ended up with the result I wanted.
Tested in Chrome, Safari and Firefox on Mac.