On my new webpage (http://patrick-ott.de/ -- it is getting there ;), I seem to have encountered a problem. At the very end there is a promise for a non black/white-version but it does not show the fully colored image. That is fine, I do not want the background to scale in width (or maybe when the resolution of the display exceeds the one of the image) but I do want to see the full-length version of the background, so essentially you can keep scrolling longer. Any ideas on how to do this smart? Right now the CSS for the background is as simple as this:
.colorbox {
background-image: url(pictures/colorbackground.jpg);
height: 100%;
width: 100%;
position: relative; }
set background-size
background-size: 100% 100%;
Add this to your CSS:
background-repeat: round round;
That should do the trick. But this is a pretty new feature in CSS so it will work if you expect your users to be using IE9+ and other modern browsers.
What I want is for the background video to fit the screen lengthwise(y) and crop sides widthwise(x) when less than the ratio. As it is now, when someone is looking at in in a long skinny browser, half the video gets cut off on the right rather than both sides being shrunk and centered on the middle. Alternatively I would like the whole thing to stretch in every direction and fit the browser, but I've also searched every page about that and none of the commands seem to work... I dunno maybe less has a new command, but I can't find it...
I am editing the .less file to accomplish what I need and almost all of the css commands seem to work except the one I need or at least, not anywhere I've tried putting it... still not sure what the difference between css and less is aside from newer/better. Here's what I have, it's the best I've found so far. it shrinks to the middle at least when it gets small:
// Background
#rt-top-surround {
position: relative;
video {
position: fixed;
width: auto;
height: 100%;
min-width: 100%;
-webkit-background-size: cover; }
-moz-background-size: cover; } these do nothing at all
-o-background-size: cover; } neither does background-size: 100%;
background-size: cover; }
.backface-visibility(hidden);
}
No matter what I do I can't stop it from preserving the aspect ratio. Any help for either full screen or centering the background video will do. Thanks in advance
-Scott
(I have only been teaching myself how to program websites over the last 2 days so I may not understand everything you say. Please keep that in mind. However, I did program and re-write a site from a template since then and I have been through every single file on ftp and read through the css just to learn what I can. I actually know a pretty decent amount)
You starters your CSS is invalid, #rt-top-surround isn't closed off so anything under that is broken.
// Background
#rt-top-surround {
position: relative;
} /* <------ here! */
As for background-size, this only applies to background-image not a video element. You can simply set width to whatever you want and because height:auto is applies be default it was scale with aspect ratio.
jsFiddle
HTML
<video>
<source src="http://www.quirksmode.org/html5//videos/big_buck_bunny.mp4" type="video/mp4"></source>
</video>
CSS
video {
width:100%;
}
I was wondering if there is a way to scale a sprite image to the containing div's dimensions
For example, if I have a sprite image with 10 frames (each 100x100 pixels, making it 1000x100)
and the containing div is for instance 200px in width or 50px, is there a way for the frame to be displayed correctly within the div?
Can background-size do anyting there?
Thanks
Are you using CSS3? Because of this you could do following
(HTML)
<div class='your-box'></div>
(CSS)
.your-box {
background-image: url(.);
background-repeat: no-repeat;
background-size: contain;
}
You could test it out over here, http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain (w3 schools ftw)
Also I have this in my bookmark, http://caniuse.com/background-img-opts which allow me to see what works for which browser.
If you'd like it to be centered, you cud add to the CSS
position: absolute;
height: 100%;
width: 100%;
background-position: center;
But as I said, this works for CSS3 and still most people uses IE8 (css is supported by IE9+) but as I said before, have a look which browsers are compitable with CSS3 link again (http://caniuse.com/background-img-opts)
There a few questions that revolve around my problem, but none of the answers pertain to what I'm trying to do. I'm using a sprite for my site logo by using a class on an anchor tag. Problem is that I have to define the pixel height and width and this prevents the logo from being responsive.
Here's the HTML:
Here's the CSS:
a.logo-sprite {
background: url('image_here.jpg') 0 0;
display: block;
width: 450px;
height: 130px;
}
a.logo-sprite:hover {
background: url('image_here2.jpg') 0 -140px;
}
Any thoughts? Thanks.
That's right. Since sprites, by definition are meant for fixed dimensions only (They are images after all), they cannot be "smoothly" used in fluid/responsive layouts.
They can be used in responsive layouts, as long as you keep making adjustments for each "level" in your media queries.
Okay, I have an idea.
You can use the background-size property to "lock" the sprite in place and stop more/less of it being shown than you want. Here is a rudimentary example:
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 190% 140%;
The only problem here is that images resize differently to elements like Divs and anchors so the height won't scale dynamically. I believe the only way to achieve this is to use JavaScript but I may be wrong.
Here's a rough example of how you might start going about something like this:
http://jsfiddle.net/VW2dW/16/
If you resize the browser you will notice it successfully scales horizontally but not vertically which is a problem.
Is there a way to position a background image a certain number of pixels from the right of its element?
For example, to position something a certain number of pixels (say, 10) from the left, this is how I'd do it:
#myElement {
background-position: 10px 0;
}
I found this CSS3 feature helpful:
/* to position the element 10px from the right */
background-position: right 10px top;
As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.
See Can I use for details on the supported browsers.
Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/
Update:
This feature is now supported in all major browsers, including mobile browsers.
!! Outdated answer, since CSS3 brought this feature
Is there a way to position a background image a certain number of pixels from the right of its element?
Nope.
Popular workarounds include
setting a margin-right on the element instead
adding transparent pixels to the image itself and positioning it top right
or calculating the position using jQuery after the element's width is known.
The easiest solution is to use percentages. This isn't exactly the answer you were looking for since you asked for pixel-precision, but if you just need something to have a little padding between the right edge and the image, giving something a position of 99% usually works well enough.
Code:
/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
background: url("/images/source.jpg") 99% center no-repeat;
}
Outdated answer: It is now implemented in major browsers, see the
other answers to this question.
CSS3 has modified the specification of background-position so that it will work with different origin point. Unfortunately, I can't find any evidence that it is implemented yet in any major browsers.
http://www.w3.org/TR/css3-background/#the-background-position
See example 12.
background-position: right 3em bottom 10px;
As proposed here, this is a pretty cross browser solution that works perfectly:
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
I used it since the CSS3 feature of specifying offsets proposed in the answer marked as solving the question is not supported in browsers so well yet. E.g.
The most appropriate answer is the new four-value syntax for background-position, but until all browsers support it your best approach is a combination of earlier responses in the following order:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
A simple but dirty trick is to simply add the offset you want to the image you are using as background. it's not maintainable, but it gets the job done.
This will work on most modern browsers...apart from IE (browser support). Even though that page lists >= IE9 as supported, my tests didn't agree with that.
You can use the calc() css3 property like so;
.class_name {
background-position: calc(100% - 10px) 50%;
}
For me this is the cleanest and most logical way to achieve a margin to the right. I also use a fallback of using border-right: 10px solid transparent; for IE.
Ok If I understand what your asking you would do this;
You have your DIV container called #main-container and .my-element that is within it. Use this to get you started;
#main-container {
position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
position:absolute;
top:0;
right:10px;
}
/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
float:right;
margin-right:10px;
}
By the way, it better practice to use classes if you referencing a lower level element within a page (I assume you are hence my name change above.
background-position: calc(100% - 8px);
The CSS3 specification allowing different origins for background-position is now supported in Firefox 14 but still not in Chrome 21 (apparently IE9 partly supports them, but I've not tested it myself)
In addition to the Chrome issue that #MattyF referenced there's a more succinct summary here:
http://code.google.com/p/chromium/issues/detail?id=95085
If you have proportioned elements, you could use:
.valid {
background-position: 98% center;
}
.half .valid {
background-position: 96% center;
}
In this example, .valid would be the class with the picture and .half would be a row with half the size of the standard one.
Dirty, but works as a charm and it's reasonably manageable.
If you would like to use this for adding arrows/other icons to a button for example then you could use css pseudo-elements?
If it's really a background-image for the whole button, I tend to incorporate the spacing into the image, and just use
background-position: right 0;
But if I have to add for example a designed arrow to a button, I tend to have this html:
Read more
And tend to do the following with CSS:
.read-more{
position: relative;
padding: 6px 15px 6px 35px;//to create space on the right
font-size: 13px;
font-family: Arial;
}
.read-more:after{
content: '';
display: block;
width: 10px;
height: 15px;
background-image: url('../images/btn-white-arrow-right.png');
position: absolute;
right: 12px;
top: 10px;
}
By using the :after selector, I add a element using CSS just to contain this small icon. You could do the same by just adding a span or <i> element inside the a-element. But I think this is a cleaner way of adding icons to buttons and it is cross-browser supported.
you can check out the fiddle here:
http://codepen.io/anon/pen/PNzYzZ
use center right as the position then add a transparent border to offset it?
If you have a fixed width element and know the width of your background image, you can simply set the background-position to : the element's width - the image's width - the gap you want on the right.
For example : with a 100px-wide element and a 300px-wide image, to get a gap of 10px on the right, you set it to 100-300-10=-210px :
#myElement {
background:url(my_image.jpg) no-repeat -210px top;
width:100px;
}
And you get the rightmost 80 pixels of your image on the left of your element, and a gap of 20px on the right.
I know it can sound stupid but sometimes it saves the time... I use that much in a vertical manner (gap at bottom) for navigation links with text below image.
Not sure it applies to your case though.
my problem was I needed the background image to stay the same distance from the right border when the window is resized i.e. for tablet / mobile etc
My fix is to use a percenatge like so:
background-position: 98% 6px;
and it sticks in place.
yes! well to position a background image as though 0px from the right-hand side of the browser instead of the left - i use:
background-position: 100% 0px;