I want this markup:
<div style="background:url('Untitled.jpg');height:50px;width:50px;"></div>
to behave as this markup:
<img src="untitled.jpg" width="50" height="50"/>
The difference between the 2 is that the div doesn't fit the full image. It just crops it if the full image can't be fit inside the container. However img tag as we know shows full image. It scales down the image but shows it fully.
How can I achieve the same thing in div in background property of css? If possible, please do not suggest css3 because I need this to work on IE8. However it's fine. You can still suggest.
If the background image is 50x50 pixels large, what you show should work fine. If the div doesn't stretch, try adding a to it.
If you need to resize the background image, you will indeed need to refer to CSS3 which has the background-size property.
You'll have to reset the div completely:
<div style="border: 0; margin: 0; padding: 0; background: url('Untitled.jpg'); background-size: 100%; width: 50px; height: 50px;"></div>
background:url("untitled.png") 0 0 no-repeat; is required to declare the background property in full. or you can go background-image, background-repeat and background-position.
Related
Most of my pages has a full width banner at the top just under the menu. They are created as a div with a background image from an image sprite file to reduce page load time.
My problem is that the div does not resize when the screen gets smaller, it just cuts the div of. What I would like is that the div is always 100% wide and its height scaling to keep the proportions of the background image (1300px × 300px).
Here' the code and a jsfiddle:
<div class="entry-content">
<div class="banner"></div>
</div>
.entry-content {
max-width: 1300px;
width: 100%;
padding: 0 20px 0 20px;
}
.banner {
margin: 0 -20px 0 -20px;
max-width: 1300px;
height: 300px;
background: url("http://renservice.dk/wp-content/uploads/2016/02/banner-sprites.jpg");
background-position: 0 -900px;
}
https://jsfiddle.net/fy2zh4vm/1/
I have added a code to resize the div proportionally with width. But don't think sprite image background will solve your problem.
here is a fiddle link
https://jsfiddle.net/fy2zh4vm/3/
$(window).on('load resize', function(e){
$('.banner').height(parseFloat((300/1300)*$(window).width()));
});
As I already said in my comment: I suggest you just get rid of the sprite and you can solve your problem with background-size:cover or background-size:contain.
Just in case you can't do that, I found a solution that works with sprites, but you need javascript for that (i used jQuery, but if you prefer plain JS, that should be quite easy to achieve).
The idea is that you read the width of your banner div and adjust its height and background-position values accordingly.
And here's the Fiddle
Hope that helps, but again: This is NOT the best solution, this is only the solution if you absolutely have to use sprites!
You are looking for the background-size property you have to set it to either to cover or contain depends on if you want it to cover the div tag or not.
If you want to read more here is the link
I think it's possible with raw CSS and a little hack. There is a blog post from Nicolas, where he describes how to realize background images with defined proportions.
I made you additionally a fiddle.
The percentage in the pseudo element is built by a little calculation: 100 / ( width / height ).
EDIT: don't know if it works with sprites. But maybe it's nevertheless a help :)
so I have an image tag on my page that is set to 300px height. When a bigger image is used for it, the image is stretched so it fits and it gets really ugly. Is there a way to just get a part of the image instead, preferably the top 300pxs of it?
Hope I made myself clear, I'm new to this. Thank you!
I believe
overflow:hidden;
is what you're looking for. You put that property on a div that surrounds the image, not the image itself. Here's a good resource: http://css-tricks.com/almanac/properties/o/overflow/
Here's a code sample:
<html>
<head>
<style>
.overflow{
height:100px;
width:200px;
overflow:hidden;
}
img{
height: 200px;
}
</style>
</head>
<body>
<div class="overflow">
<img src="http://funmozar.com/wp-content/uploads/2014/06/white-cat.jpg">
</div>
</body>
</html>
You could also want to consider using the max-height and max-width properties. Make sure not to set both height AND width on the image or it will still stretch it to match those parameters.
probably the best solution in order to avoid image stretching is to use a div with fixed size (width and height), background-image and use background-size propriety.
example:
html:
<div id="yourDiv"></div>
css:
#yourDiv {
width: 200px;
height: 200px;
background-image: url('yourimage.jpg');
background-size: cover;
}
Please have a look here for other information about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
A possibility is to use the object-fit CSS property on the image. For instance, the value contain will scale down the image so that its original ratio is maintained; while the value cover will crop parts of the image. You can then use the object-position property to properly place the scaled down or the croped image.
For more information on these CSS properties and their differents values:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
You can wrap the image in an element, set fixed dimensions for the container and no dimension settings for the image but overflow: hidden on the image. Here’s an example of using small dimensions:
An image:<br>
<img src="http://www.lorempixel.com/100/100" alt="foo"><br>
The same image with just the upper half taken:<br>
<div style="width: 100px; height: 50px; overflow: hidden"><img
src="http://www.lorempixel.com/100/100" alt="foo"></div>
I have an SVG image that I am trying to use in my page that I would like to stretch with page. The same CSS that works with non-SVG images doesn't work for the SVG. As seen in the quick fiddle here -> http://jsfiddle.net/TUby3/
My HTML
<img src="image.svg" id="topHeader">
My CSS
#topHeader {
width: calc(85% + 10px);
height: 46px;
}
I've been trying different things in my CSS but can't seem to get anything to work. When I make the page smaller, the width of the image does get smaller but the height does not stay fixed, the height shrinks in uniform with the width.
Does anyone know a solution to this that does not involve trading the SVG for a PNG or JPEG?
Try this:
http://jsfiddle.net/TUby3/1/
Just put a div with a set height around it.
html
<div id="test">
Your Image
</div>
css
#test{
height:"60px;
}
You could probably achieve the same effect you are after by setting it as a background image to a div and using the background-size css...
background:url(http://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig14/img/napoleon%20for%20svg%201.svg) left top no-repeat;
background-size:100% 100%;
(That said, Mark's solution works fine for me in Chrome)
So far I have managed to get the background image to stretch:
XHTML:
<div id="background">
<img src="images/background.jpg" alt="Background" />
</div>
CSS:
#background
{
width: 100%;
height: auto;
position: fixed;
left: 0px;
top: 0px;
}
#background img
{
width: 100%;
height: 100%;
}
This works well, except the image is being displayed from the top when the height of the image exceeds the window height. This means that the top of the image is always displayed but the bottom is cut off. I want to change this so that the image is always displayed from the centre (so that both the top and bottom of the image is cut off and the centre is of the image is displayed).
Here is a good tutorial on creating a perfect full page background image. The same concept can be applied to any ol' div as well.
In general, images that are meant to be background images shouldn't appear in the markup itself. You're mixing presentation with content.
If having the img tag is not an absolute necessity remove it and add the following three lines in your #background class,
background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;
The first line sets your background for the DIV. The second line positions it to centre always. The third line makes sure the background is not repeated which is what I assumed you needed by looking at your HTML structure.
More than happy to suggest further is required.
My code:
background:url(images/menu_edu.jpg) no-repeat;
But only half of the image is getting displayed.
The element which has the background needs to be the size of the image.
i.e. flower.jpg = 255px x 55px
<div class="flower">
Some text
</div>
.flower {
background: url(flower.jpg) no-repeat;
width: 255px;
height: 55px;
}
The size of the element cannot be set to the dimensions of the image if you're using a background. You could use javascript to calculate the dimensions though.
Or if you need to repeat the image, you can use repeat, repeat-x or repeat-y on the background tag instead.
If you just want to display an image, the IMG-tag is much more useful and effective... (and it could be set to width(/&)height = 100%).
If you want to display your image in full size, no need to use CSS for this
Dont give height and width attribute to the <img> tag like
<img src="this.jpg" /> it will display in full size
But if you want your <div> to show its background in full size, then is no other option than assigning the exact image dimensions
You are not showing enough code, but if the background image is in the body element, it is probably not stretching across the whole viewport.
Try
html, body { min-height: 100% }