Size a background image? - html

I have a div that is 200px by 200px.
It's background image is 500px x 500px.
Is there a way to make sure the entire background image fits into the div? I know you can size it with CSS3 but i'm looking for a solution for older browsers.
Thanks

Is there a way to make sure the entire background image fits into the div?
The background-size property.
I know you can size it with CSS3 but i'm looking for a solution for older browsers.
There is no other standard way to scale a background image.
Older versions of Internet Explorer can be supported via the non-standard filter property and AlphaImageLoader.
/* Untested */
background-image: url(images/someimage.png);
background-resize: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
Alternatively, as a hack, you could use an <img> element, and absolutely position it behind the content. This would be a content image though, so it wouldn't be a clean hack.

Suppose that your div has id equal to "myid" .
picture used has as size 500x500
Demo :http://jsfiddle.net/abdennour/rhPDx/
div#myid{
width: 200px;
height:200px;
background: url('http://px6.streetfire.net/0001/72/25/1952752_600.jpg')
0% 0%
no-repeat;
background-size: 200px 200px;
}

You can achieve the same by applying background-size:100% 100%; to your div
Hope it will help

You cant resize ur image in backgound image attribute.
There's an other, tricky way to do this. Just place your background image in your div and add absolute position to it. Ofc ur div need to have a relative postion attribute.
After this you can resize ur image, simply with css2.

Related

Div with max-width and max-height and retain proportions (CSS only)

OK here's a challenging one! I really want to see if this can be accomplished with CSS only if possible.
I have a unique layout that requires images to be sized and positioned based on their parent container. If the image exceeds it's parent in height or width I need it to reduce size to fit. At the moment I'm using max-width and max-height together and it's working fine. The image resizes to fit and of course keeps it's aspect ratio.
Now here's the tricky part. I need to add a special shadow to this image that cannot be accomplished with CSS box shadows. The shadow uses PNG image. The shadow needs to be sized and positioned in relation to the image - meaning it falls at the bottom of the image and it equals the width of the image.
Normally I would achieve the shadow with ::after and size and position it relative to it's parent element, which works perfectly Except it's parent is the image and images do not allow ::before or ::after.
So as far as I can tell, the only way to achieve this is to wrap the image in another container so I can use that container as the parent elements and positioning reference for the shadow layer. But I cannot find a way to make that container div behave in the same way as the image in terms of the max-width and max-height sizing while still maintaining it's aspect ratio.
The best methods for maintaining aspect ratios use padding top, which works brilliantly when the width is the only important factor. But the padding-top technique doesn't allow for the container to have a max-height.
So I'm looking for a CSS technique that will allow a block element to maintain its aspect ratio, and have max-width and max-height at the same time. Similar to how an image would behave in this situation.
I've scoured the internets for a solution and haven't seen anyone describe this exact situation. Would be extremely grateful to anyone who can assist.
Added 1 Sept 2017:
I should mention that it's more than just the shadow I need to position relative to the image. There are some other elements as well that need to be positioned in this way, and those other elements are not simple background images. So while Lightbender's solution is great for the shadow, it doesn't solve the bigger issue at hand. I need a container around the image that I can use as reference to position other child elements.
While before and after won't work (easily) but you can still use padding and a background image and it will work exactly the way your current setup works.
img.fancyshadow {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
padding: 0 10px 10px 0; /* adjust as needed */
background: url('path/to/your/shadow');
box-sizing: border-box;
}
I don't have a Mac handy, so I've only tested this in Firefox, Chrome, and IE, can anyone confirm Safari as well?
So I would like to see a simple example of what you are attempting as a starting point but you mentioned that the images need to be sized/positioned based upon the size of their container.
Here is an starting example of something like that. Not sure if it can be modified to suit your issue. Let me know and I can tweak.
When needing to have responsive images, I never use IMG tags. Setting the background image in CSS provides much more control on responsive sites/apps.
Documentation on background-size:
cover Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
contain Scale the image to the largest size such that both its width
and its height can fit inside the content area
$(function() {
$('.banner').resizable();
});
.banner {
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/15/ae/a6/15aea601612443d5bddd0df945af6ffd.jpg');
background-size: cover;
background-position: center;
height: 175px;
width: 100%;
}
p {
color: #666;
}
.ui-resizable-se {
box-shadow: -1px -3px 10px 3px white;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<h1>Resize the image using the black triangle at bottom right of image</h1>
<p>Note how the image fills the container and the position is always centered (you can control where the position is, doesn't have to be in the center)</p>
<div class="banner">
</div>

Fixed stretching background image

I have drafted up a brief example of what I have so far, and what I'm trying to achieve.
See my demo here
In my jsfiddle you will see a wrapping div named "content-wrap". Within this div I want an image that can stretch to window size and content.
I have done background image stretching before: See example here
But this is a bit more complicated because it is for a specific region within the site.
I have tried having a play so far with my existing code from the link above and I think I may need to take a different approach. As when you scroll down the images doesn't stay in position it moves with the scroll bar (as it should).
Any ideas?
If you don't mind using CSS3's background-size property, then the following additions to your #content-wrap { CSS statements will achieve a responsive background image that will expand to fit the size of the container.
#content-wrap {
height: 1000px;
background: #ccc;
color: #fff;
/* Added CSS */
display: block;
max-width: 100%;
clear: both;
background: transparent url("http://placekitten.com/900/900") top right no-repeat;
background-size: cover;
}
Here is an updated version of your jsfiddle with my added CSS and some lovely placekittens:
http://jsfiddle.net/kztGj/22/
The downsides to this are of course that it will not work in Internet Explorer < 9, Firefox 3.6, or any browser that doesn't support CSS3. But then your asking for a responsive image, and as such you'll be hard pushed to find an elegant solution that supports older browsers.
For more information on the background-size property and its uses, I recommend checking out this article, its quite informative.
In your image, add a css like this
.custom-image {
width:100%;
}
and your html
<div>
<img src="" class="custom-image" />
</div>

setting an image as a footer background in CSS

So I'm looking to add a footer to my page but I want it to be a background-image that is automatically resized depending on the monitor resolution and have it with a 100% width and height but to never overflow to the sides, so I don't want scrollbars to appear. The image is .jpg.
Would appreciate some input as to what is the best way to go around this
Use the following CSS
​div {
width: 100%;
height: 400px;
background-image: url(your-path-here.jpg);
background-size: 100% 100%;
}​
And see this live example
Be careful, if you don't resize the height of your footer as well, that will stretch the image.
background-size will do the trick, but note that it' not supported by IE8 and older. Just to be on the safe side for these browsers, the image could be positioned in the center (that means at 50% horizontally and 50% vertically - of course, the center keyword also works)
Live demo: http://dabblet.com/gist/2790711

What is wrong with this CSS?

I have the following CSS code:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
height:100%;
width:100%;
}
and the following HTML code:
<div class="yellow"> </div>
However, the div on the page does not have the image. You can see this by clicking on the blue "Logs Status" button (in the tab box) at http://cl58logs.co.cc/.
What's wrong with the CSS?
Your div is not large enough. Background images will not scale. If you want the image to scale, you'll have to use the img tag.
Also, note that height: 100% doesn't work in CSS, except for table cells.
The problem is that the div with the background image has almost no content (apart from a space character).
If you force the div to have a larger height, for example, by changing the CSS to this:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
min-height:600px;
width:100%;
}
then your image appears
The height (437px) and width (700px) of the image is greater than the dimensions of your div. Set an appropriate height and width for your div to allow for the image to be shown.
Install Firebug to better inspect your HTML elements when you come across issues like this.
Since you're setting height and width to 100%, the amount of the image you see will depend on the divs containing the yellow class. Try changing the width and height on the status class and you will actually see your the bg image on yellow.

Centered background image is off by 1px

My web page sits in a DIV that is 960px wide, I center this DIV in the middle of the page by using the code:
html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}
I need the background image of the html/body to tile down the middle of the page, which it does, however if the viewable pane in the browser is an odd number of pixels width then the centered background and centered DIV don't align together.
This is only happening in FF.
Does anybody know of a workaround?
Yeah, it's known issue. Unfortunately you only can fix div and image width, or use script to dynamically change stye.backgroundPosition property. Another trick is to put expression to the CSS class definition.
I found that by making the background image on odd number of pixels wide, the problem goes away for Firefox.
Setting padding:0px 0px 0px 1px; fixes the problem for IE.
Carlo Capocasa, Travian Games
The (most) common problem is that your background image has an odd number while your container is an even number.
I have wrote an article in my best English about where I also explain how the browser positioned your picture: check it out here.
I was able to resolve this with jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
I had the same problem.
To get the background centered, you need to have a background-image wider than the viewport. Try to use a background 2500px wide. It will force the browser to center the part of image that is viewable.
Let me know if it works for you.
What about creating a wrapper div with the same background-image.
body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }
The wrapper has an even number, the background will keep the same position on any screen size.