I have a DIV with height/width of 15px.
It has a background image also with height/width of 15px.
The problem is the background image is being cut off a few pixels on right and bottom when zoomed out some levels in firefox.
Here's a link and code below. Try viewing it in firefox.
<div id="custom-checkbox"></div>
#custom-checkbox
{
background: url('http://s16.postimg.org/5xacziapd/unchecked.png') no-repeat;
width: 15px;
height: 15px;
}
This is the best I can get it to display the rest is just firefoxes pixel rounding.
#custom-checkbox
{
background: url('http://s16.postimg.org/5xacziapd/unchecked.png') no-repeat;
width: 15px !important;
height: 15px !important;
display:table;
}
Hope this helps it's the best I could do.
Related
I have code to show a background image in a card header like below:
<div class="card-heading"></div>
and in CSS:
.card-1 .card-heading {
background: url("../images/bg-head-02.jpg") center center/cover no-repeat;
padding-top: 210px;
}
In desktop its looking fine like this:
But in mobile device its getting cut off like below:
How can I fix my code so that it also fits in mobile.
The problem: You are using the cover value for the background-size property. This means that the image will be resized to fit either the height or width of the available space, and any "extra" image will be cropped. In your case, the image is being made big enough to fit into the height of your element, which makes it too wide to fit so the width is getting cropped.
Note that using a separate background-size: cover; CSS will not change this behaviour - it behaves the same way as when it is included in the background shorthand. You can see this in the working examples below.
Option 1: background-size: contain If you want the image to fit fully into the space, you can use contain- however note that this will add empty space above and/or below the image because the aspect ratio will no longer match the image itself.
Solution - Option 2: Make the element the correct aspect ratio for the image.
You can use % padding instead of fixed padding.
To calculate the correct percentage use: image_height / image_width e.g. in the example here : 210/1200 = 17.5%
Compare all of these options in the example below:
.card-heading {
background: url("https://via.placeholder.com/1200x210") center center/cover no-repeat;
padding-top: 210px;
border: 1px solid red;
}
.card-heading-cover {
background: url("https://via.placeholder.com/1200x210") center no-repeat;
background-size: cover;
padding-top: 210px;
border: 1px solid red;
}
.card-heading-contain {
background: url("https://via.placeholder.com/1200x210") center center/contain no-repeat;
padding-top: 210px;
border: 1px solid red;
}
.card-heading-responsive {
background: url("https://via.placeholder.com/1200x210") center center/cover no-repeat;
padding-top: 17.5%;
border: 1px solid red;
}
<p><strong>Background: cover</strong> (like your example) - image is cropped</p>
<div class="card-heading"></div>
<p><strong>Background-size: cover</strong> - image is <i>still</i> getting cropped:</p>
<div class="card-heading-cover"></div>
<p><strong>Background-size: contain</strong> - note the extra space</p>
<div class="card-heading-contain"></div>
<p><strong>% padding</strong> - resizes to fit the image aspect ratio</p>
<div class="card-heading-responsive"></div>
I just begun to learn how to use image sprites in order to optimize my site better. However, there is this white border on the right and bottom side of my image element. I searched for posts on here and google and cannot seem to figure out how to remove the border.
I did read it was caused by using the image element, however, I need to use this element for SEO purposes. By using a div it would cripple my SEO in regard to images (from what I have read anyways). Can anyone help me figure this out? It did this in both Chrome and Firefox. Thank you
[White border on right and bottom of image container][1]
<img class="image-sprite" src="">
.image-sprite {
background: url("../images/gallery-sprite.png");
background-color: #3a3a3a;
background-position: -17px -10px;
background-repeat: no-repeat;
width: 360px;
height: 470px;
}
Are you able to put the background URL directly into the img tag in HTML? Like this:
.image-sprite {
background-color: #3a3a3a;
background-position: -17px -10px;
background-repeat: no-repeat;
width: 360px;
height: 470px;
}
body{
background-color: gray;
}
<img class="image-sprite" src="https://w3schools.com/html/img_girl.jpg">
I've posted an example below, see can you find any white space on either side? The problem might be the 'image-size' you using and dimensions that you are placing your image with. If your image finishes by the time it reaches the right end or bottom end, obviously then and only then you'll see the white space, otherwise there is no issue in using sprites. Either increase your image in size, or decrease its width and height.
.image-sprite {
background: url("https://picsum.photos/200/300");
background-position: -10 -10px;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<img class="image-sprite">
This weird border sometimes appears and later disappears. I attached the code in the link along with the screenshot. Each div have similar code. Also some background images have transparent color. It is usually fine in chrome and firefox but appears in OS devices and in my android cellphone.
edit:
bug: http://postimg.org/image/kpmaqbh7x/full/
no bug: http://postimg.org/image/61eo0gq3l/
You might have to zoom in to see it.
sample code:
#div_room_107 {
width: 15.6%;
height: 100%;
float: left;
display: inline-block;
background-color: #8e8e8e;
background-image: url(/staff-app/_/img/room_corners7.png);
background-size: 100% 100%;
margin: .5% 0 .5% .5%;
}
I'm wondering if the following is possible with CSS.
I'd like there to be 3 horizontal bars running across the entire width of a background. Here's a rough mockup of what I would like the background to be
I've been toying with the following but I can't seem to be able to position any of the backgrounds.
#blog {
width: 1200px;
height: 100%;
background-image: url("bg1.png"),
url("bg2.png"),
url("bg3.png");
background-position: 10px 10px,
170px 10px,
750px 10px;
background-repeat:repeat-x;
}
Here's a fiddle: http://jsfiddle.net/5fo054L2/1/
Any idea what I'm doing wrong?
You almost have it. The issue is that you have the x and y position confused. Also, x position doesn't have any meaning if it repeats.
.blog {
width: 100%;
height: 100%;
background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png");
background-position: 0px 170px, 0px 100px, 0px 10px;
background-repeat: repeat-x;
}
Here is an updated jsfiddle: http://jsfiddle.net/5fo054L2/3/
Note that the vertical height (of text in your example) will limit the amount of the background images you see.
You can also make three image files, place them below everything else, and set them using absolute positioning.
How do you get the main image to only scale/ shrink horizontally like the pics on this website? Instead of scaling the image it starts to cut out the image's sides when you resize the browser. Heres how it should work: http://castus.co.uk/
The main image on the castus.co.uk website stays at the same height no matter how small you resize the browser but it shrinks the image's sides.. I hope that explains it better :)
I can only seem to get the whole image to scale when I resize the browser.
I am currently using the following code for my img class:
img.mail {
width: 100%;
height: auto;
}
Or do you mean this?
background-position: center;
background-image: url('....');
background-repeat: none;
width: 100%;
height: 100px;
It cut instead of scale like what you have posted.
NOTE: You need to have wide picture to make it work prettily
I use:
max-width: 100%;
height: auto;
They are using a centred background image and allowing the containing element to shrink thus hiding the sides of the image.
e.g.
#feature {
background: url("path/to/img") center 0px no-repeat;
width: 100%;
height: 50px; // Height of image
}
example: http://jsfiddle.net/xY9qT/1/