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)
Related
This is regarding a landing page with a full screen image background.
link to Codepen project
On this pen to replicate the problem, resize your browser screen to a mobile width and hover over the text 'leasing' you will notice a large gap on the bottom of the screen.
I tried to solve this using the following styles:
html, body {
background-image: url("https://greatofficespaces.net/wp-
content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
When I run this as a local file, instead of a gap on the bottom
there is a doubling of the image at the edge of the browser screen. Also in chrome browser the css is not loading in as it should
and there is a flash of plain black text for a few seconds until the css loads in.
I read about techniques for image optimization on stacked overflow and having different image files for different media queries and srcset, but I do not think its related to that, I think its a bug somewhere in the css.
Here is the full page
https://github.com/KravMaguy/flyer1
Any help on how to fix these css bugs is greatly appreciated.
The problem was fixed by changing it to the following css :
html {
background-image: url("https://greatofficespaces.net/wp-
content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
specifically removing the word 'body'
the previous css class of body, html {styles etc...} applied the same styles to both the html and the body, When I removed one of them I no longer saw the double image in the corner of the browser, implying that the background was assigned to both the html and the body, producing the doubled image and incorrect css loading. This is my guess as to why this was happening and has been resolved.
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.
This is a particularly strange request, but the client won't budge.
I've almost got what I need currently with:
#main_content, .slide {position: relative; min-width: 1200px;}
.slide_layer {position: absolute; height: 100%; width: 100%; top:0; left: 0; min-width: 1200px; padding-bottom: 18px;}
.slide_layer img { width: 100%; }
Problem is, if my browser window is longer than it is wide, I end up with empty space below the image. What the client wants is for the image to fill all available height if there is room and create horizontal scrollbars as needed (rather than crop).
The solution I'm thinking of doing is just detecting browser window and stretching the .slide_layer img to fill height via javascript. But this feels crappy and sloppy. Is there a better way?
To make matters worse, backward compatibility is required back to IE7.
Thanks!
This doesn't necessarily help you with the horizontal-overflow request from your client, but you could rebuild your slides to use a background image, instead of an image within it.
You can then use the CSS3 background-size, set to 'cover':
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
This means that the background image will stretch out - whilst maintaining the correct dimensions - to fill the parent. So, unless your slide is exactly the same dimensions as the image, you'll either have a little off the top/bottom, or left/right cut off from view, but it will always stretch to cover the entire background.
This is a CSS3 property, so won't work back to IE7 without a little help. Fortunately, CSS3 PIE can help you out there to get support all the way back to those older versions of Internet Explorer.
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.
I've decided to crate a sprite sheet for my entire site (+-30 images) so I can load 1 image and just reference positions, which reduces image load time and server calls.
My question:
Is it possible to reference an image in the sprite sheet and then size that image to 100% of its parent container?
So For example:
#SomeDiv
{
background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat;
width:100px;
}
The width of my div is 100px, but the sprite I want to reference is 20px(for example) - how can I streth the extracted sprite to grow to 100px?
Regards,
Byron Cobb.
Well, if you really want an answer, sure, why not. See: http://jsfiddle.net/3dsgn/3/
Basically we're working with CSS3 here, so IE support (except 9) is non-existent. You'll also have to use the version with the -moz- extension for Firefox 3.6 and below. The technique itself is also somewhat troublesome. You actually have to go and calculate the numbers yourself - percentages won't work, naturally.
#sprite-large {
/* All of these numbers are 2x their normal,
though tweaked slightly so that they will look okay */
width: 36px;
height: 36px;
background: url('url/to/your/image.png') -38px -112px;
-moz-background-size: 448px 368px;
background-size: 448px 368px;
}