I want to show search icon properly for all views - with zoom / without zoom and normal view.
Problem appears when people zooms for example 110%. Icon jumps.
Fiddle: Fiddle ( try to zoom/zoom out - you will notice jumps )
HTML
<div id="outer">
<div id="block"></div>
</div>
CSS
#outer
{
background-color: #c0c0c0;
}
#block
{
background-repeat: no-repeat;
background-image: url(http://g3.acdn.lt/img/svg/icons_ptrn.svg);
background-position: 0px 3.1%;
width: 26px;
height: 26px;
display: block;
background-repeat: no-repeat;
padding: 0px;
margin: 0 auto;
}
Tried:
with and without background-position
to set background position with pixels
to set background position with percentages as it was suggested here: background-size with background-position doesn't scale the position?
Related
I am trying to achieve this with css3, I tried using border-radius with percent values and it's not the same always, I always got a rounded corners and the border will start disappearing on the corners too.
I want it to be exactly the same as the example image:
EDIT:
this is my html code :
<div class='container-fluid'>
<section class='section-1'>
<div class='container'>
</div>
</section>
And this is my css:
.section-1 {
background-image: url('../images/bg.png');
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: 50%;
}
If you want, you can accomplish this using only CSS by creating a <div> that would be used only as a mask. You can create the round effect with the border-radius property, but you need to do it bigger than the part that will be visible, then crop the result to show only the curvy part that you want. And you must compensate the imagem position.
Check my example below:
.oval-header {
width: 100%;
height: 150px;
overflow: hidden;
position: relative
}
.oval-header--mask {
width: 200%; /* Mask width 2x the size of the header */
height: 200%; /* Mask height 2x the size of the header */
transform: translate(-25%, -51%); /* This compensates the size of the image and places the curvy part that you want on the certer of the mask, it's a translate that negativates half it's width and half it's height */
border: 6px solid yellow;
border-radius: 0 0 50% 50%;
overflow: hidden;
border-top: 0;
background-image: url('http://www.placecage.com/3000/1500');
background-size: cover
}
<div class="oval-header">
<div class="oval-header--mask">
</div>
</div>
I have a span with a background where I want the image resized without loosing the radio. I mean not stretching. My image disappear when I use height: auto;
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: auto;
}
You will need to set the height to an integer or percentage like so:
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: 250px;
}
Another way would be to place an <img> inside this div but have another div with the same properties but instead of have an img have the background-image. However this is considered messy and can slow down loading speeds as your loading 2 of the same image.
<div class="hiddendiv">
<img src="//file src">
<div class="visiblediv"></div>
</div>
<style>
.hiddendiv img{height:200px; width:500px;}
.visiblediv {height:200px; width:500px; margin-top:-200px; background-image:url(//path to your image);}
</style>
This is just a rough example but this has worked for me in the past, no matter how much im not a fan of this method.
If you want responsive image use <img/> tag instead css background-image. And then in css use width: 90%; height: auto;
I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working.
The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.
I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick.
There's a similar question here about this: scale div to background image size but it didn't solve my problem either.
I'd really appreciate if someone knows how to do it.
EDIT:
I made a fiddle to show the behavior: http://jsfiddle.net/osv1v9re/5/
This line is what is making the background image so small:
background-size: auto 100%;
But if it is removed is removed, the background will fill the proper width, but not the height.
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
}
div figure{
padding-top: 36.56%; /* 702px/1920px = 0.3656 */
display: block;
background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
background-size: cover;
}
<div>
<figure></figure>
</div>
you can have a responsive height using the padding-bottom or padding-top
because you can't fix an height property in '%' with a width in '%'.
div{
background-image: url(url);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
margin: 0 auto;
width: 100%;
padding-bottom: heightPicure / widthPicture + %; //do it manually or using scss rules
}
Need some help with CSS background repeat. Below is the wire-frame for the functionality I am trying to achieve.
Current Code:
HTML:
<div class="wrapper">
<div class="container"></div>
</div>
CSS:
.container{
min-height: 10000px;
background-image: url(background1.png), url(background2.png);
background-repeat: no-repeat, repeat-y;
background-position: center top, center 1000px;
}
The current code displays background1 only one time and repeats background2 as I want,but the background2 image starts from the top of the page. I want it to start exactly after the background1 image ends as shown in the wireframe.
NOTE: Both the images background1 and background2 have transparent shapes in them which makes makes the other image visible in the background.
If you set a background to repeat, it can not be limited (AFAIK)
the solution would be to limit it to a pseudo element, and limit this pseudo element to where you want it (with the top property)
.test {
width: 300px;
height: 600px;
border: solid black 1px;
position: relative;
}
.test:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 200px;
background-image: url(http://placekitten.com/g/600/400);
background-repeat-y: repeat;
}
<div class="test"></div>
Note that the height of 100% is not accurate, if you want it to be accurate set it to your dimension
I have this fiddle which generates single country flags from a image sprite. I want to squeeze each flag because the width of flag seems to be too wide.
JSFiddle Demo
For instance the Norwegian flag is too wide in the jsfiddle sample.
How can I do this? Thank you.
#flag1 {
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
background-position: -120px 0;
}
#flag2 {
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
background-position: -480px 13800px;
}
#flag3 {
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
background-position: -1200px 19020px;
}
To get exactly what you wanted I used background-size just to reduce the width of your sprite.
So I reduced the width of the sprite about one sixth and adjusted the width of the element in accordance.
#flag3
{
width: 100px;
height: 60px;
background: url(http://i.hizliresim.com/e7Y5dm.png) 0 0 no-repeat;
background-position: -1000px -480px;
background-size: 1500px 780px;
}
Demo
One solution is to scale (transform:scale(x);) the whole element (the div in this case)
For example transform:scale(0.5); will scale the element to half its size, but keep in mind that it retains the initial space in the DOM flow.
Another way is to use the background-size property to resize your image, but you will have to recalculate the positioning as well..
demo at http://jsfiddle.net/JA97b/5/
Additionally, in your CSS you should group common properties to a single class and apply that instead of repeating tem for each flag..
.flag{
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
}
#flag1{background-position: -120px 0;}
#flag2{background-position: -480px 13800px;}
#flag3{background-position: -1200px 19020px;}
and use
<div class="flag" id="flag1"></div>
<div class="flag" id="flag2"></div>
<div class="flag" id="flag3"></div>