I have this fiddle I'm playing with to crop and center an image. It works quite well, but I would need the wrapping div.test to have the same width of the image. This is not possible: if I set the width of the img to 300px the magic does not work. I think it's because of the span I use to center the image. I think it leaves a kind of space footprint (maybe the space between letters or words?).
So: how to make its space effects "invisibles"?
Update
My original purpose was: resize the image horizontally and crop-and-center vertically + compatibility from IE8 >. All done with CSS. The solution linked above is almost close to the solution, but not perfect (the little space on the left). That's why I asked for a fix on it.
I am not positive if I am understanding your dilemma, however, I think something like this may be what you are looking for. Here is the link to JSFiddle (http://jsfiddle.net/bUrmK/2/).
HTML:
<div class="test">
<div class="before">
</div>
CSS:
.test {
background-color: grey;
overflow: hidden;
width: 300px;
}
.before {
background-image: url("http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG");
width: 100%;
height: 100px;
background-position: center;
background-size: cover;
/*This will allow for LTE IE-8*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG", sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=""http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG", sizingMethod='scale')";
}
I get it now, you can use a single div:
HTML
<div class="cropped"></div>
CSS
.cropped{
background-image: url("http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG");
width: 300px;
height: 200px;
background-position: center;
background-size: cover;
}
Related
I'm having issues with background-attachment: fixed. When I apply it to the elements on my page it creates a very choppy scrolling effect. Essentially not something that is not a good experience for the user.
My code is here:
HTML
<div class="con row1">
<p>Some text here just to flesh out example</p>
</div>
<div class="grad-space">
</div>
<div class="con row2">
<p>Some text here just to flesh out example</p>
</div>
CSS
.con {
height: 100vh; }
.grad-space {
height: 50vh; }
.row1 {
background: url('https://s-media-cache- ak0.pinimg.com/736x/3d/88/09/3d880927ac8bfec60a04ca93064569e0.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed; }
.row2 {
background: url('https://d3rt1990lpmkn.cloudfront.net/640/31762579d8fd04a756fb791ac9c3634b5828f0dd') no-repeat center;
background-size: cover;
background-attachment: fixed; }
Here's a link to the codepen showing exactly what I'm talking about:
http://codepen.io/reskk/pen/qaYJwq
Edit: Fullpage Codepen: http://codepen.io/reskk/full/qaYJwq/
Now strangely enough when I resize the browser down to a small width (say 800px) the scrolling actually becomes very smooth - just as you'd want it to appear on a finished project.
When the browser is at its max width (and max height, which you can't quite fully get on codepen due to to the code-input box) that is where the janky, choppy scrolling happens.
I've done extensive searching on this and haven't been able to find a solution.
Does anyone have any ideas on this? It's such a gorgeous effect but is unfortunately made useless by the performance it yields.
Thanks,
Reskk
You know you can see any codepen in full page? Fullpage Codepen
About your choppy effect, what you probably are looking is a scroll animation smoother, not sure if this is the right term. What it does is that delays the mouse scroll effect, or reduces "line jumps" height, making the movement look better.
CSS Parallax by davidwalsh
Edit removed frameworks/libraries references (offtopic)
I was stressing with the same problem, and found a lovely solution here: https://medium.com/vehikl-news/fixed-background-image-performance-issue-6b7d9e2dbc55
Essentially, you need to remove the background image from your .rows and move it to a :before element for each. That way you're not using background-position: fixed, but rather position: fixed on your pseudo element.
.hero {
min-height: 100%;
position: relative;
overflow: hidden;
&::before {
background-image: url('background-image.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
I tried solving the problem myself, but I can't do it.
Go to my site here:
http://digesale.com/
And scroll down to the footer. Just above the footer you will see an image. It's the one that says "Get Things Done, Start Buying," etc. That's the image I have a problem with...
On my browser/resolution it looks perfectly aligned, but a friend told me that on his resolution it doesn't cover the entire space left-to-right. If you press "Ctrl+-" on your keyboard you'll see the problem.
This is the code I use to put that image there:
<img style="margin-bottom: -20px;" src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" height="300" width="1350">
Can anyone help me make that image cover the whole width of that section so that it looks good even on smaller screen resolutions?
Thank you.
If you need to cover you can use the image as a background:
<div class="background"></div>
and in the css
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
The important part is background-size: cover because it fill the entire div in all cases.
EDIT
If you want another behaviour, you can use your old img tag
<img src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" class="responsive-img">
And the css
.responsive-img {
margin-bottom: -20px; /* this was writting in inline style. */
width: 100%;
height: auto;
}
Try the below CSS
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: contain;
width: 100%;
height: 26vw;
}
I am using a series of a div elements to display a set of client logos. The reason for using background images was to allow the images to be vertically and horizontally centered within the div, instead of a more hack-y solution using img elements.
The issue: I am using a fluid, responsive grid, so when the browser is below the max width (1000px), the div elements begin to shrink. This causes some of the client logos (the background images) to clip at the edges. This is a given. I would like to have these images begin to scale down when the hit the edges of the parent element.
background-size: contain partially solves this. The only drawback is that it also scales the background image's size above 100%, which is an issue. It stretches the logo which is not a good solution for me.
I could also just not use background-size, and have the client logos have a max-width set. This, however, causes the client list to go to extra rows for responsive layouts. I would like to avoid this, but to me this is the only working solution.
That being said, is there anyway to utilize the background-size without having it scale up? Or is there another way to approach this that would keep the images centered within their box?
Here's quick look at the code:
HTML
<div class="client"><div class="client1"></div></div>
<div class="client"><div class="client2"></div></div>
<div class="client"><div class="client3"></div></div>
CSS
.clientlist .client { width: 20%; height: 90px; float: left; } /* Five clients a row */
.clientlist .client div {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat; } /* Vertically centers background images */
.clientlist .client .bcs { background-image: url(../images/client-bcs.jpg); } /* bunch more like this to define image */
It doesn't look like this is possible yet.
Based on the syntax examples on https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax, you would think you could do something along the lines of "background-size: auto, auto, contain;" but it didn't play out that way in my initial testing on Chrome, FF and IE. They all seem to do fine with SVGs. Chrome and IE fail with PNGs. All of them fail with GIFs.
To me, it seems like this behavior we are looking for is spelled out pretty clearly on http://www.w3.org/TR/css3-background/#the-background-size:
If both values are ‘auto’ then the intrinsic width and/or height of the image should be used, if any, the missing dimension (if any) behaving as ‘auto’ as described above. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for ‘contain’.
However, it doesn't play out that way so maybe I'm missing something.
I think that this is what your a re asking for
demo
The HTML is
<div class="clientlist">
<div class="client"><div class="client1"></div></div>
<div class="client"><div class="client2"></div></div>
<div class="client"><div class="client3"></div></div>
<div class="client"><div class="client4"></div></div>
<div class="client"><div class="client5"></div></div>
<div class="push"></div>
</div>
And The CSS is
body, html {
height: 100%;
}
.clientlist {
text-align: justify;
display: inline-block;
width: 100%;
}
.clientlist .client {
width: 18%;
height: 90px;
max-width: 200px;
display: inline-block;
}
.clientlist .client div {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.push {
display: inline-block;
width: 100%;
height: 0px;
}
.client1 { background-image: url(http://placekitten.com/200/300); }
.client2 { background-image: url(http://placekitten.com/200/200); }
.client3 { background-image: url(http://placekitten.com/200/180); }
.client4 { background-image: url(http://placekitten.com/220/200); }
.client5 { background-image: url(http://placekitten.com/180/200); }
I am setting the max-width on the div, and not really in the background size; but I think that the result is the intended one.
To make the div space evenly, I use a trick using text-align: justify. For this to work; I need an extra element in the HTML that is the "push" class.
This CSS code does work in all browsers except FireFox. Why ? How can I fix it ?
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
}
Thanks in advance.
EDIT:
Here is the HTML that I want to use:
<img class="img_box" />
When Firefox encounters an image without a source, it replaces the image with its alt text. I personally find this extremely annoying, as it means I can't test layouts unless I specifically create placeholder images, and should those images be unavailable for any reason the layout completely breaks.
Unfortunately, I have yet to find a solution to this problem.
In your case, however, you would be much better off using a div and adding display:inline-block to your CSS, instead of using an image.
solution1:
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
display: block;
}
solution2:
<div class="img_box"></div>
I'm trying to make a background following this example, but I need to nest 2 containers.
My code look something like:
XHTML:
<body>
<div id="background_shadow">
<div id="container">
<!--content-->
</div>
</div>
</body>
css:
#background_shadow{
margin:0 auto; /* center, not in IE5 */
height:100%;
height:auto !important; /* real browsers */
min-height:100%; /* real browsers */
width: 876px;
padding: 0px 72px;
background: url("../images/background_shadow.png") repeat-y center;
}
#container{
width: 100%;
margin: auto;
background-image: url("../images/background.jpg") repeat-y;
height: 100%;
}
The problem is that the #container element isn't stretching with #background_shadow. Am I missing something? I would like to use nested container with 2 background image because one of them is transparent and if I use png instead of jpeg on the second image the filesize is too big (around 1Mo)
Here is what I'm getting
And what I would like
I guess that if there arn't any solution I will need to use a big png.
Thank you
For height: 100%; to work on an element, all parent elements need it, too (even html and body). So because of height: auto !important;, it doesn't work anymore in the #container child.
You can either remove the height: auto; or add #container { min-height: 100%; }. I just tested it in Opera 11 and apparently min-height works just as fine. Don't know about IE, though.
By the example you provided, your #background_shadow should have position: relative. That's going to allow it and it's children out of the restrictions of straight document flow.
Use Firebug to delete the footer from your example link - you'll see the div above it expand to fill the page even though it's content does not require the additional height.