I need to set the fixed width for the background image. It should work fine in both IE and Firefox. How to do get this ?
#Multiplexer: You currently can't set the width/height of the background image, but you can set the width/height of its container.
E.g.
<div style="background: url(someimage.jpg) no-repeat 0 0; height: 300px; width: 400px">
Some content
</div>
If someimage.jpg is 640x480, only 400px of that width and 300px of that height will be shown. You can move the background around by playing with the background position properties of the CSS -- see http://www.w3schools.com/css/css_background.asp for the full/short-hand reference.
you can use css3 property background-size, but it's not fully supported yet
https://developer.mozilla.org/en/CSS/-moz-background-size
you can do it with background-size.
enter code here
.myCss
{
background-image:url(image.jpg);
background-repeat:no-repeat;
background size:10% 100%;
}
In size,
10% is width value and 1005 is height value.
Related
#banner {
background: url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg) no-repeat center center/contain;
height: auto;
max-width: 100%;
<div id="banner"></div>
img {
height: auto;
max-width: 100%;}
<img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg" alt="">
I have running always into the problem with the responsive images,and i did not find an answer to clarify the problem.
The problem is with image
image {
height:auto;
width:100%;
}
when i add a simple image and style it, it works. when i start a project more complex with a lot of divs and I set the same properties doesn't work anymore. What's the purest explanation for this.
This is because when you add the <img> to the html directly, the browser sets the height of the element to the height of the image you provided (unless otherwise specified). When you add the image as a background of a <div> and set the height to auto, it tries to size the div to the height of the content. However, in this case, there is no content -- only a background that will be the background once the div has some height. An empty div has no height. Therefore, if you want the image to be the background of the <div>, it must either contain some content, or have its height set manually.
I have set up a web page using an image in a div called slideshow. The div is supposed to be a max-width of 1600px and a max-height of 600px (width and height of the original jpg used here) and to shrink down dynamically when the screen is smaller or resized.
This works fine because the behavior of the image is set by CSS as follows :
.slideshow img{
margin:0 auto;
width: 100%;
max-width: 1600px;
min-width: 900px;
}
Now I would like to achieve the same effect by replacing the image with the Camera Slideshow from Pixedelic. But here I can't control the image with .slideshow img{} since the script uses a div instead of the image tag.
Width and height of the camera slideshow are controlled by a jQuery function.
I have put the slideshow in a .slides div which I try to control by CSS, like this :
.slideshow .slides{
display: block;
margin:0 auto;
max-width: 1600px;
max-height: 600px;
overflow:visible;
}
(Overflow is left visible to see what happens)
When I assign a height value (ie 600px) in the function, the slideshow loads at it's max height but doesn't shrink when the page is resized down : http://www.centredelafontaine.be/testpage1.html
When I leave height and width values blank in the function, the slideshow shrinks on resize but opens with a height of 800px (?) and crops the even greater image inside, overflowing the div placed below : http://www.centredelafontaine.be/testpage2.html
Can anyone help me on this issue ?
Place a img tag inside the div which is contained by the slideshow and you will be able to modify those image (slideshow elements) proprieties through the CSS code.
<div id="image" div class="Slides w3-display-container">
<img src="your_image.png" height="600" width="1600">
</div>
If you can't work it out leave me a reply and I'll make a demo html
Set only image min height. Slidehow container will depend on image height. Means no need to set slidehow container height.
You can set the portrait property to true and the images will not be cropped.
jQuery('#your-camera-gallery').camera({
portrait: true,
});
#test {background-image: url('/Skins/slickv2/csdlrsite/shared/1dpt_img_mainpic.png');
width: 200px;
height: auto;
background-repeat : no-repeat;}
this is not displaying the image . but if we change the height option to some value it is working , can any one help me in solving this problem.
The height:auto auto sizes the div to the height of the content. A background image is not content, so the div height is set to 0.
It is correct as in the answer above div will be effected to that property, more over i am not sure but may be due to: for the background image first to check whether it is applied or not give the actual size(h and w) of the actual image...
CSS doesnt count Background image Height in the "auto" detection. only things like texte, other blocks and such ...
I have a header DIV which is 1400px wide and contains a background image which must always stay centered.
I have a site that needs to be 960px wide.
When I resize the browser (shrink it), I don't want any horizontal scrollbars until we hit 960px, but the larger width on the header/background is causing this.
Is it possible to stop all horizontal scrollbars on resize until 960px AND keep the background image in the header div centered??
Any help appreciated! Some code I set up here here for a quick test...
http://jsfiddle.net/gVuvk
The background image has a width of 1400px. I need the scrollbars to start at 960px - NOT 1400px. Is this possible?
change #header width from fixed pixels to 100%
Demo: http://jsfiddle.net/wNSTD/3/
Try fiddling with min-width, if that does not work, use margins, css auto-margins can be useful here. So, make the structure like this:
<style>
.center_image
{
margin: auto auto; // or you can modify the x or y seperately
background-image:url("somesite.jpg");
}
</style>
<div class="outer">
<div class="center_image">
Set the width of header to 100% and center the background image.
background: url(http://fade.com.au/test/bg-image.jpg) no-repeat center center;
width: 100%;
Demo: http://jsfiddle.net/post_erasmus/Hn6Zb/1/
Given the following CSS rule,
#block1 {
text-indent: -1000em;
background: transparent url(../images/xxx.png) no-repeat scroll center center;
width: 100px;
height: 50px;
display: inline-block;
}
Assume the image xxx.png is of dimension 100px by 50px. If I need to make this image displayed on #block1 looks smaller, can I simply change the width and height of #block1 or I have to first re-size the image and then change the width and height of the #block1 accordingly.
thank you
You can't in CSS1 and 2, but CSS3 supports the background-size property, which if you set to 100% should give you what you are looking for.
However, you probably should just resize the background image though, unless you have a compelling reason not to :)
CSS can only position the image, not adjust it. If you absolutely needed to resize the image through CSS, you'd have to have the image actually inserted as an img tag, then position it behind the content. It's best just to edit it.
no, the image will just appear to be cropped.