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
Related
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.
I have an image (let's say it's 100px by 100px). I want to use the image as the background of a div, however I only want the first 50px by 50px to be visible (the other three 'corners' will be used as other backgrounds). I also want to scale the image so that the piece of the image I specify fills the div. For example, if my div is 150px by 150px, i'd want to crop by image to 50px by 50px, and then render it as 150px by 150px.
I can render the image in the background like so (using react): <div style={{width: '5vh', height: '5vh', background: 'url(./image) 0px 0px'}}></div>, however this does not scale the image back to the size I want it. How can I achieve the effect I desire?
Is it described in the image below, where the black square is the div, and the red is the content I want visible in the background, while the blue & red are the entire source image.
This is similar to this question, however that answer is several years old and does not rescale the image either.
To divide the image in four you need to double it's dimensions (in relation to the containing div)
background-size:200% 200% ;
Then you use background-position to choose the portion you need:
div{
background-image: url('http://lorempixel.com/output/abstract-q-c-100-100-9.jpg');
height: 150px;
width: 150px;
background-size:200% 200% ;
background-position: 0 0; // is top-left
/* background-position: 100% 100%// is bottom-right */
}
<div>
PS: reactwise you need to camelCase the hyphened properties( ex: background-size will become backgroundSize )
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
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
The PNG image is the sidebar, and the black part is the CSS background, the PNG's alpha seems to override the black box.
When I change the image's opacity, you can see the box continues through the entire image, but is still overridden and I double-checked the sidebar's transparency, but it's set up properly.
It does this on Google Chrome as well as Firefox.
Relevant CSS:
.sidebar{
background: url('side1.png') lightgray 10% 50%;
background-repeat: no-repeat;
background-size: 100%;
height: 600px;
width: 173px;
z-index:1;
float:left;
position:relative;
opacity:0.5;
}
.header{
background: black;
background-position: top right;
float:right;
width:100%;
height: 200px;
z-index:0;
position:absolute;
}
Relevant HTML:
<div class="sidebar">
<img src="images/pic1.png" class="icon">
</div>
<div class="header"></div>
This appears to be just a simple case of the division going back behind the floated content. Most people don't realize that just because there is floated content there, the division still expands back behind it all the way to the edge, like it normally would if the floated content wasn't there.
That division is taking up its maximum amount of available space like it is expected too. The floated content is only pushing the content, which at this point, there isn't any. Making your sidebar partially opaque, this issue becomes visible as you can see that box behind your image now. A quick fix, per say, would be to add a margin to the division to push it out from behind the sidebar, like so:
.header {
margin-left: 173px; /* The width of your sidebar */
}
Note, however, that you would have to apply this margin to the left side of all your block-level elements that need pushed out from under. So it would make sense to put all the right content into a single box that gets pushed out, to prevent confusion.
Edit: The reason your black background doesn't pull through on the sidebar image is that you're setting it's background to light grey here:
background: url('side1.png') lightgray 10% 50%;
This will put a light grey background behind the image rather than letting the transparent part of your image go through to whatever is behind it. Try removing it:
background: url('side1.png') 10% 50%;
See the jsFiddle example.