When using sprites in Compass/Sass, you get a background-image and a background-position generated.
For example:
background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
background-position: 0 -120px;
This background image is positioned in the upper left corner of your element.
With normal CSS I can change this to the bottom right corner like so:
background-position: right bottom;
However, this doesn't work when using a sprite, as its for the entire sprite instead of each image in my sprite.
How can I tell Compass/Sass to place each image of my sprite in the bottom right corner, instead of upper left?
Note: the element I'm using this sprite on, changes in height, so I can't use fixed pixel values.
Thanks.
EDIT: I'm including this image to illustrate what I mean:
I was able to achive this using the :after psuedo class on my element.
You need to give the :after class a width and height equal to your image, and position it using CSS.
.element {
position: relative;
/* your element css */
&:after {
content: "";
position: absolute;
z-index: 1;
display: block;
width: 60px;
height: 60px;
right: 0;
bottom: 0;
background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
background-position: 0 -120px;
}
Related
enter image description here
is it possible to create something like the picture?
(so a header with an image and at the bottom side of it a semitransparent navbar ( so I can see the bottom of the picture)
What I did was that I used background-image to add the image to the background of your header, a whitespace div to move the navbar to the bottom, and then added an RGBA color (red, green, blue, alpha, with alpha meaning transparency) onto the background-color of the navbar. Here is my code:
Codesandbox Sandbox
Or
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
border: 5px solid black;
height: 400px;
background-image: url("https://images.unsplash.com/7/Top_view.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format");
/* background-size: cover; */
background-repeat: no-repeat;
background-size: 100% 100%;
}
div#whitespace {
height: calc(100% - 40px); /* 20 px is the height of the navbar */
}
nav {
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: rgba(255, 255, 255, 0.35);
height: 40px;
}
a {
/* text-decoration: none; */
color: black;
font-weight: bold;
}
<header>
<div id="whitespace"></div>
<nav>
Home
Link 1
Link 2
Link 3
</nav>
</header>
What I am doing here is defining a header element with the background-image of url("https://images.unsplash.com/7/Top_view.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format"). Now url() is a CSS function that allows you to include a file, namely our header image. Then, we set background-size to 100% 100%, so the image will resize to fit the dimensions of our header and completely fill the header. We also set background-repeat to no-repeat so the image will not repeat (though it is unnecessary because the image already fills all of the header elements). Then, I add styles to the whitespace div, making the height of the div 100% (or all the height of our header) and subtracting the height of the div (40px), and I use the CSS function calc which allows me to do mathematical operations on some CSS units. So, by using this whitespace div, it pushes the navbar down to the bottom so it is placed correctly. Finally, for our navbar, I use flexbox to align the items and evenly space the links. Then, I set the background color to rgba(255, 255, 255, 0.35). This is rgb(255, 255, 255 which is white, but now we set the transparency (alpha) value to 0.35, making the color transparent so we can see the background image under the navbar.
I need to make CSS3's background-size properly work in IE8. There are a lot of javascript libraries out there but they extend the options "cover" and "contain" rather than a px value. As I'm using an image sprite I need to set the background size in pixels.
Here is a demo of my code. The sprite image is 600px 400px but ive set the background size to be 300px x 200px so that is looks crisp on high density displays.
<a class="one">Link one</a>
<a class="two">Link two</a>
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
background: url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png");
background-size: 300px 200px;
} a.one {
background-position: 0 0;
}
a.two {
background-position: 0 -56px;
}
http://jsfiddle.net/rr2obdss/4/
Can I extend support to IE8 without having to create and maintain a 2nd image sprite?
Depending on the specific case, which you don't really explain in much detail, a workaround with pseudo elements may work?
Just add a pseudo element of the specified size and have it have the sprite as background?
With the right combination of position absolute/relative and z-index this could work.
If you provide more information of what exactly you are trying to achieve I will be able to provide better help.
Edit:
Okay, so I got a solution now. Kind of as expected: looks quite dirty.
But that's what you get when you want to do fancy stuff in IE8 :-P
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
position: relative;
}
a:before {
content: "";
background: url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png);
zoom: .5;
text-indent: 0;
overflow: hidden;
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
a.one:before {
background-position: 0 0;
}
a.two:before {
background-position: 0 -112px;
}
The downside of this is, that you would have to calculate the zoom factor instead of just writing down the dimensions you want to have. Also background-position would then be in relation to the full-size background.
Is anything unclear with what I am doing in above code?
The only thing you can do is to :
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale')";
But this can cause issues if you use sprite image.
According to caniuse.com, this polyfill may help.
Hope this helps...
-- Lance
I can't seem to get my background to stay fitted to my browser when I resize the window. Please help!
Here are the images to show you what is going on: View images
The first image is how it should be fitted, the second is when I stretch it horizontally and the third is when I stretch is vertically (sorry, not sure why it uploaded my images twice)
Here is my code I am using:
body {
background: url('images/bkg-img.png');
repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem is that background-size: cover covers the background positioning area (see W3C page), which is, in some cases, the calculated height of the body. Not always as high as the window!
The simplest solution I've found is also put a
html {height:100%}
in the stylesheet. But you might have to experiment a bit with your setup to get it to work the way you want. I'm pretty sure it varies across browsers and depends on whether you're using standards or quirks mode.
There are lot's ways to do this, if you set the image as background-image of body it is not going to shrink or expand it is going to be stay same this is the expected behaviour.
You can use sth. like this for this:
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
And style of them:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
To be able to put your content above of the background image put your content inside another div like:
<div class="pagewrap">
<p>Content</p>
</div>
And class of it:
.pagewrap {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
}
View demo or other techniques, about z-index.
Fixed image
If you don't need the bg image to scroll with the page, you can still apply the bg image to the body tag if you set background-attachment: fixed;
body {
background: url('images/bkg-img.png') no-repeat 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
jQuery
If the bg image does need to scroll with the page, it might be worthwhile to apply some JavaScript or jQuery code, in the interest of keeping the HTML and CSS relatively simple.
function stretchBg(width, height, contain) {
var pageWidth = $(document).width();
var pageHeight = $(document).height();
if ((pageWidth / pageHeight) > (width / height) == !!contain)
$('body').css({backgroundSize: 'auto ' + pageHeight + 'px'});
else
$('body').css({backgroundSize: pageWidth + 'px auto'});
}
$(document).ready(function(){ stretchBg(640, 480); }); // Page load
$(window).resize(function(){ stretchBg(640, 480); }); // Browser resize
JSFiddle Demo (and standalone version of the demo)
To preserve the aspect ratio, the native width and height of the image are passed to the above function, along with an optional third parameter for whether the bg image should cover or contain the page (the default is cover).
Alternately, here's a more-advanced demo (and standalone version) that automatically detects the native resolution of the bg image currently applied to the body tag. Below is an example of using it:
$(document).ready(function(){
FullBodyBackground.init({contain: false});
});
I want to put an image into a div element, which is much smaller than the image and hide or crop image outside div element. I've done this like this one:
.slideshow img {
width: 250px;
}
.slideshow {
overflow: hidden;
height: 170px;
width: 250px;
position:relative;
}
it works fine, but I image crops from it's top, but I want to center image and then crop it from top and bottom. How can I do this?
Use clip property of css for image or set position relative with negative left and top position
img
{
clip:rect(0px,60px,200px,0px);
}
You can only vertically centre an image in a line that is at least as tall as the image. So the trick is to centre the image in a very tall div, and then use relative positioning to centre the div relative to the original div. The CSS you'll need on the inner div is something like vertical-align: middle; line-height: 850px; position: relative; top: -340px;.
Just add:
position:relative;
left:-25%;
top:-25%;
to your .slideshow img class
This should work.
When I insert an image in a container with fixed width and height, the image stretches to fit that space. Is there a way to display the image at its normal size, but with the excess clipped out?
The modern way is to use object-fit: none; (or the more common object-fit: cover; if you want to scale, but without stretching).
img {
object-fit: cover;
}
97% of browser sessions support this as of 2022 May. — Can I use?
If you want to anchor the image to the top left corner instead of the center, add:
img {
object-position: 0 0;
}
<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>
Then in the above DIV you can play with CSS
width/height
background-position
to create different crop effects.
You can use the CSS clip property:
#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
The downside of using clip is that the element has to be absolutely positioned, and is only available with the 'rect' shape.
See:
https://www.w3schools.com/cssref/pr_pos_clip.asp
http://www.cssplay.co.uk/menu/clip_gallery
Use this :
http://www.w3schools.com/css/pr_background-position.asp
background-position: 5px 5px;
and then set the height and width of the div
height: 55px;
width: 55px;
Show it as a background image