I have an empty div which contain a background image that is bigger than the size of the container. I fix this one by background-image property with the value (100% 100%). That's fine until you open the example in IE8 and IE7. Any solutions for that, even a javascript script or jquery plugin?
i.e: http://jsbin.com/imirer/1/edit
i.e: http://jsfiddle.net/bPTzE/
HTML:
<div class="container">
<div class="background"></div>
</div>
CSS:
.container {
/* an example width for responsive perpose */
width: 500px;
}
.background {
height: 27px;
background: url("http://s18.postimage.org/jhbol7zu1/image.png") no-repeat scroll 100% 100% transparent;
/* not working in IE8 and IE7 */
background-size: 100% 100%;
}
since background-size is CSS3 specific which is not supported to IE you have to do something like this for it to work in IE
set your html and body to
html {overflow-y:hidden}
body {overflow-y:auto}
wrap the image you want fullscreened with a div #page-background
#page-background {position:absolute; z-index:-1}
then put this in your html file
<div id="page-background">
<img src="/path/to/your/image" width="100%" height="100%">
</div>
** you will have to use some sort of reset to remove the margins and paddings, something like this
html, body {height:100%; margin:0; padding:0;}
background-size not supported by ie7 and ie8.
the alternative way you can use put 'tag' in div tag and add width 100% to it. It is full scalable.
try this code:
<div class="container">
<img src="http://s18.postimage.org/jhbol7zu1/image.png" width="100%" />
</div>
or
html:
<div class="container">
<img src="http://s18.postimage.org/jhbol7zu1/image.png" />
</div>
css:
.container img {
width:100%
}
Related
I need to use css style like max-width:90% and max-height:90% to define image size not overflow the windows. However, this work well on Safari but not work on Chrome. Here is the demo I write on jsfiddle: http://jsfiddle.net/hello2pig/rdxuk7kj/
<style>
div{
padding: 0;
margin: 0;
}
.slide{
text-align:center;
background-size: 100% 100%;
}
.user-img{
max-height: 80%;
max-width: 90%;
}
</style>
<body>
<div class="slide">
<div id="container0" class="container slideDown front">
<div class="image-container">
<img src="http://people.cs.clemson.edu/~bli2/hiOne/image/userImage/1.jpg" class="user-img" ></img>
</div>
</div>
</div>
</body>
If you open this demo in safari, whole image can be displayed, but image overflow the window on Chrome. Any method to fix the problem? Thanks for your help!
Some times using percentages for fluidity in layouts is tricky because you have to deal with containers and border-type things.
You might prefer to use viewport units. You can learn about them on css-tricks and caniuse will show you how well it's supported.
Essentially you can say:
<div style="height: 55vh;">Hi</div>
meaning a div element of 55vh height where 1vh is defined as the value of 1% of the viewport's height. Something that is 100vh will be 100% of the viewport's height.
You need to give an explicit value for the container. This would work:
.image-container {
width: 500px;
height: 300px;
}
In your case, the % is taken from the <html> element in the fiddle.
From MDN:
percentage
The percentage is calculated with respect to the height of
the containing block. If the height of the containing block is not
specified explicitly, the percentage value is treated as none.
I'm aware that similar questions have been asked over and over, but I have yet to come across a solution that actually works for me. Picture the following problem.
Situation:
The body has a non-fixed background image that repeats both vertically and horizontally.
There is supposed to be a second transparent background image laid over the first.
Constraints:
The second background is supposed to stretch across the document, just like the background on the body. Mind: Not just the viewport, the entire document.
Even when the body height is smaller than the document height (i.e. no scrollbar), the second background must stretch to the bottom of the viewport (so any solution working with 100% html and/or body height is out of the question).
The second background's position cannot be fixed, because that would cause some sort of parallax effect when scrolling. The illusion that both images are actually one must be upheld.
It is possible for the body to have margin and/or padding. Both backgrounds should cover the entire document regardless.
Using a second background image on the body ("background-image: url(), url();") is not an option for backward compatibility reasons.
No JavaScript.
No actually merging the two images into one, obviously. :)
I have brooded over this problem for a while now and have gotten to the conclusion that this is impossible using only HTML and CSS2. I'd very much like to be proven wrong.
You should place a background image for two separate which covers each the whole document :
<html>
<head>
<style>
.firstbackground {
position:absolute;
left:0;
top : 0;
width : 100%;
min-height : 100%;
background: url('first.png') repeat;
}
.secondbackground {
width : 100%;
min-height : 100%;
background:url('second.png'); /* may be transparent, but why add a background then ;-) */
}
</style>
</head>
<body>
<div class="firstbackground">
<div class="secondbackground">
long content
</div>
</div>
</body>
</html>
CSS3 allows multiple backgrounds that are separated by commas, for eg:
background: url('topNonFixedBG.png'), #000 url('mainBG.png') no-repeat fixed top center;
http://jsfiddle.net/hs2WT/1/
Just use multiple divs...
CSS:
html {
height: 100%;
}
body { height: 100%;}
.wrapper1 {
width: 100%;
height: 100%;
background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/hixs_pattern_evolution.png');
}
.wrapper2 {
width: 100%;
height: 100%;
background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/yellow1.png');
}
.content { color: #fff; }
HTML:
<div class="wrapper1">
<div class="wrapper2">
<div class="content">
<p>Some Content</p>
</div>
</div>
</div>
let the secend background to have the position:absolute;
body{
background:url("http://jsfiddle.net/css/../img/logo.png") #000;
}
#secBg{
background:url("http://placehold.it/350x150") ;
position:absolute;
min-height:500%;
min-width:100%;
}
<html>
<body>
<div id="secBg">
</div>
</body>
</html>
http://jsfiddle.net/5sxWB/
I have a set height footer div that fills the bottom of the screen, 100px wide, with a black background it sits over a body Back ground image. There are a few pages with not a lot of content. The footer rises up the page and because it has a fixed height, under the footer you see the body BG image. How would I go about using CSS to make sure that the whole screen below the raised footer is black, without having to extend the set height of the footer div?
You can give "min-height" to the pages that .So, although content is little, the footer will be same.Since content area has "min-height"
You can have a look at here for "min-height"
And here is sample code;
.content {
min-height: 600px;
}
There are some published solutions to this. The core of them all seems to be applying minimum heights (including some hacks for earlier versions of IE) to a block-level element that wraps all non-footer content and has a padding equal to the footer's height. The footer then has its height and negative top margin set explicitly (to the same value as the wrapper's bottom-padding.
Code example from the CSS Sticky Footer solution.
HTML:
<body>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
So if the parent div's height is 100% then you can set the child to 100% and it will work.
But if the parent's height is decided by content then the height attribute doesn't seem to work.
Is there a decent workaround that would work on most browsers?
<html>
<head>
<style>
#content img
{
display: block;
}
#left
{
float: left;
}
#right
{
float: left;
width: 200px;
border: thin solid;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
<img src="images/dc_logo.png"/>
<img src="images/dc_logo.png"/>
<img src="images/dc_logo.png"/>
</div>
<div id="right">
stretch full height plz
</div>
</div>
</body>
</html>
No, there isn't, and it's a shame. There are little tricks to emulate the effect, but those are situational. For example, if you have a sidebar and a main content area, you can surround them in a container, and give the container a background the repeats vertically to look like it's the sidebar. Or you can use JavaScript to dynamically calculate the size onload. But unfortunately, purely CSS-wise you're stuck.
How can I build a fixed footer like facebook application design? Examples with css appreciated.
Duplicate of Facebook like status div
One way is given here:
In HTML:
<div id="container">
<div id="content"></div>
<div id="footer"></div>
</div>
In CSS:
#container {
position:absolute;
min-height:100%;
}
#content {
margin-bottom:100px; /* same as footer height */
}
#footer {
position:absolute;
bottom:0;
height:100px; /* same as content margin-bottom */
}
Edit: That link was based on this which has some exceptions
Facebook's footer stays in place as you scroll. To accomplish this, you'll need HTML like this:
<body>
<div id="content">
[content]
</div>
<div id="footer">
[footer]
</div>
</body>
and CSS like this:
#footer {
position: fixed;
bottom: 0;
width: 100%;
background: #f00;
}
The CSS position: fixed instructs the browser to keep this element's position fixed, regardless of scrolling.
I have found CSS Play a really helpful site.
http://www.cssplay.co.uk/
More specifically, http://www.cssplay.co.uk/layouts/, for layouts.
More examples at CSS Sticky Footer.
Edit: Another example with slightly cleaner CSS