I have wrote CSS for div add background image that image visible on FF, CH, ... but, it doesn't show on IE 8
css file
#headerrotetor{
width: 100%;
max-width: 1600px;
max-height: 660px;
background-image: url(images/hm_bg.jpg);
background-repeat: no-repeat;
margin: 0 auto;
background-size:contain;
}
And I have maintain CSS for IE that file has
#headerrotetor{
height: 660px;
width: 1600px;
}
Background image size 340Kb, can someone help me, thank you
did you use the correct path ?
try applying background to the body tag. below code supports IE 4.0 upwards.
body {
background-image: url('paper.gif');
background-repeat: no-repeat;
background-position: right top;
}
Note: IE8 and earlier do not support multiple background images on one element.
Related
I'm trying to make a page design like this one: click
I made it, actually. Problem is that when I change the resolution of my webpage, the elements overlap, the background div and the PNG acts different and everything looks awful. (I've tried with position: absolute (PNG) and position: relative (background))
You can use the background-size and background-position CSS properties. You should try this way:
body {
background-image: url("your-bg-image.jpg");
background-size: cover;
background-position: center;
}
.responsive-image {
background-image: url("your-image.png");
background-size: contain;
background-position: center;
width: 100%;
height: 100%;
}
I am building a react app, and I am writing responsive sass code to make my site look nice. I am trying to make my background image scale, and I am trying to use the background-size: contain; property to do so.
I'm running into a bug I can't fix though... When the background size is set to "cover", the image shows no problem. When I change that property to "contain", the image doesn't show anymore. The image is being loaded according to the console, and I can see it in the inspector as a style on the body where I have it attached. What gives? Why won't the image show? Here's the relevant css.
body {
min-height: 100vh;
height: auto;
width: 100vw;
max-width: 100vw;
position: absolute;
left: 0;
top: 0;
margin: 0 auto;
background: center / contain no-repeat url("../img/boulder.jpg");
}
I am unsure with that syntax you are using in the background property but this seems to accomplish the desired result: https://codesandbox.io/s/goofy-nobel-tmvno?file=/src/styles.css:67-138
background-position: contain;
background: no-repeat center url("../img/boulder.jpg");
I have a large dimension image that i have to scaled down through css. But in IE image getting distorted. It seems background-size property is buggy in IE.
CSS:
.img{
height: 33px;
width: 65px;
display: inline-block;
background-size: 100%;
background-repeat: no-repeat;
float: left;
background-image:url("http://www.answerplot.com/ap/media/images/croplan_logo.gif");
}
I already tried background-size:100%/cover/contain.
Working example:http://codepen.io/Mishra-Praveen/pen/revjGJ
I am fed up with this issue tried many css properties but didn't help.
Not getting any solution.
So I have an image (w:1638px h:2048px) and I set it as my background using the background-image function and then trying to give it width: 100%; and height: 100%; attributes. It stretches the image across the screen horizontally but then it makes me scroll down for the rest of it. I want no scrolling. Is there a way to crop/position a portrait orientated image to look proportional and fill the screen as a background properly? Should I make it a different size in Photoshop, something landscape orientated?
I have a regular <div class="bgimage></div> in the html and the css looks like this:
.bgimage {
height: 100%;
width: 100%;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
Is there something I'm missing or not doing correctly? I'm using Dreamweaver CS6 and viewing it in the latest versions of Firefox/Safari.
Thank you.
If you're setting the background for the whole page, just style the body element instead:
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
http://jsbin.com/rugom/2
I have the following HTML:
<section id="infopic" class="grid_5 prefix_1" style="height: 500px;">
<div id="login-image"></div>
</section>
and this CSS:
#infopic {
background-image: url("/Images/login.png");
}
I have a few different ways to make my image stretch to fit the boundaries of the #infopic but still cannot get this to work right. Right now it repeats in the code above the image (which is smaller than 500px square) just repeats.
try adding background-size property.
Some examples: http://www.css3.info/preview/background-size/
Use like this:
img {
background-size: 100%;
max-width: 100%;
}
Reference:
Fliud Images
You could try the background-size declaration:
background-size: 100% 100%;
This will work in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+. I don't think it can be done in older browsers. Perhaps:
#infopic {
background-image: url("/Images/login.png") 50% 50% no-repeat;
background-size: 100% 100%;
}
for backwards compatibility?
You can use the CSS3 property background-size: 100%; to stretch your image over the entire element:
#infopic {
height: 500px;
width: 1000px;
background-image: url("http://placehold.it/250x250");
background-repeat: no-repeat;
background-size: 100%;
}
This is a CSS3 property so it's not supported in older browsers (I'm not even sure of IE support) but it's useful for modern browsers.
As an additional note, mixing external and inline CSS is a terrible idea, that's why I moved the height declaration to the external CSS.
:)
http://jsfiddle.net/x4w7V/