In all browser I use the following css rules, and it works
// it fits the background image to container
background-size: contain;
background-size: cover;
Are there css rules to make it work in IE8 also, or should I use javascript?
In case of javascript I am using jquery.
What is the best way to active my goal?
I had also the same problem but by going through this below link my problem solved
http://css-tricks.com/perfect-full-page-background-image/
There's a jQuery plugin or this javascript fallback with filter
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Check the same page for more cross-browser methods
you can do it like this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="http://i47.photobucket.com/albums/f156/Bob_McBobBob/Awesome_Background_by_smirfy.jpg" class="bgimg" />
<div class="frame">
<div class="contents">
page contents
page contents
page contents
page contents
page contents
</div>
</div>
</body>
</html>
css:
html {
background:#000;
}
html, body {
padding:0;
margin:0;
overflow:hidden;
height:100%;
}
.bgimg {
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
.frame {
color:white;
width:100%;
height:100%;
overflow:auto;
}
.contents {
padding:10px;
}
demo site: http://jsbin.com/enevov/1/edit
you can achieve different effects by changing
width:100%;
height:100%;
on .bgimg, to accomplish different effects, depending on whether you want a distortion or not, for instance just width: 100% will make it touch across the top, etc...
hope this helps -ck
This works for me to stretch image on full window in IE8
http://css-tricks.com/perfect-full-page-background-image/
Related
earlier it was good but now when I put width and height 100% it doesn't really displays 100% instead a 10 px margin come on all four sides
here's what I tried
<html>
<head>
<style>
.cont img {
display: inline-block;
width :100%;
height : 100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
</html>
what can I do to make it 100% with in any browser?
have a look at this code, set margin:0px on body tag
<html>
<body style="margin:0px; ">
<div style="background-color:red; width:100%;">
hello
</div>
</body>
</html>
Question is not 100% clear, but are you looking for a solution like this?
.container {
height:100%;
width: 100%;
border: 1px red solid;
margin:0;
padding:0;
line-height: 0;
}
.container .imgmy{
height:100%;
width: 100%;
margin:0;
padding:0;
}
Are you sure it was good earlier?
The margins around the image have nothing to do with the image itself.
Browsers define default styles in a so called User Agent Stylesheet. In this case, the white border is the 8px margin (that is in Chrome) on the body.
Luckily you can easily override these user agent stylesheets, and you should in this case.
You can add margin:0 to the body, as mentioned above by Shreya.
But to avoid similar 'errors' it is a good idea to include a reset.css or normalize.css. These files "make browsers render all elements consistently and in line with modern standards" (http://cdnjs.com/libraries/normalize). You don't have to write one yourself, others have done this for you, like Nicolas Gallagher: http://necolas.github.io/normalize.css/
Read more about User Agent Stylesheets here: What is user agent stylesheet
Assuming HTML
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
CSS
.cont img {
max-width: 100%;
max-height: 100%;
}
I am using fullpage.js for parallax scrolling. Is it possible to make the background images responsive in nature when i re-size my window.
https://github.com/alvarotrigo/fullPage.js
Below is the example i am using.
https://github.com/alvarotrigo/fullPage.js/blob/master/examples/backgrounds.html
If you notice each of my section has the background-size property with cover, but its still not responsive when i re-size.
#section0,
#section1,
#section2,
#section3{
background-size: cover;
}
Look i don't know too much about fullpage.js
But i don know about resizing image according to your window size.....
first of all download any image and i named it sa.jpg
<html>
<head>
<style type="text/css">
#box{
width:100%;
}
<!--This class is added to img element to make it responsive -->
img.responsive{
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<div id="box">
<img src ="sa.jpg" class="responsive"></img>
</div>
</body>
</html>
In above code we kept image within #box div. and we also added responsive named class to img element.Assign it a max-width value of 100%. This allows the width
to adjust to the browser width changes. Next, add a dynamic height property to the class.
Above code is responsive for img element..
Now if you want to use background image css property and resize your image according to screen size
<html>
<head>
<style style type="text/css">
#box{
width:100%;
height:100%;
background-image:url("sa.jpg");
background-size:100% auto;
background-repeat: no-repeat;
}
<!--img.responsive{max-width:100%;height:auto}-->
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
This one works best for me
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
FadeIn!
<div class="midbox" id="example" style="display:none;">
Lorum ipsum<br>
<br>
[Close]
</div>
.midbox{
display:block;
position:absolute;
top:50%;
left:35%;
padding: 8px;
}
I've searched through many topics on Google and here on Stackoverflow, but i can't seem to find my answer.
I put the midbox classes just before the end of the body tag (</body>). Now i click on this link to fade the box in, but it isn't showing up in the middle, it shows up without the css i gave it and at the bottom of the page.
Why is it doing this? Can you guys help me?
Thanks.
Here you go:
.midbox{
display:block;
position:absolute;
top:50%;
left:50%;
width:600px;
height:400px;
margin-left:-300px; /* half of width */
margin-top:-200px; /* half of height */
padding: 8px;
}
DEMO
As you can see in this example, your script is working.
Note that your midbox element is positioned absolute, butabsolutely positioned elements are positioned relative to the first parent that has a position different than static.
This case is shown here.
Please check if this is not your case.
Hope this helps!
Try putting this code in the css
body, html{
height:100%;
width:100%;
}
Put the styles in the head of the page:
<head>
<style type="text/css">
<!--Your styles here-->
.midbox{
display:block;
position:absolute;
top:50%;
left:35%;
padding: 8px;
}
</style>
</head>
or better create an external css file and link it to the html file.
<link rel="stylesheet" type="text/css" href="path/to/your.css">
<html>
<head>
<style>
html{ overflow:hidden;}
body{ overflow:hidden; height:100%; background-color:blue; margin:0px;}
div{ height:3000px; background-color:red; margin:30px;}
</style>
</head>
<body>
<div>dasdasd</div>
</body>
</html>
Here is the html code. When it running on a standard browser, the div tag keep showing in the window.
But it run in ie, when you select the words "dasdasd" and drag down, the body tag will scroll and the words "dasdasd" will hide unless you disable the select function.
Could someone give me other solution?
Like Spudley's answer,the DOCTYPE cause the problem,but when in the standard mode,the body tag still scroll, anyone can solve the problem?
The problem is that you're missing the <!DOCTYPE> declaration.
When IE sees HTML code without a DOCTYPE, it goes into quirks mode.
In quirks mode, the browser is effectively rendering the page to be backward compatible with IE5. It changes the way it renders the basic box layout, and removes support for a lot of standard CSS.
Add the following doctype to the top of your page (above the <html> tag), and you should see things come right:
<!DOCTYPE html>
Try this:
body {
background-color: blue;
height: 100%;
margin: 0 auto;
overflow: auto;
}
div {
background-color: red;
margin: 30px;
overflow: auto;
}
Hope it works...Best Luck.
Me and a guy from work are working on a web application for our clients to log on and manage there details. One of the sections asks the user to upload there company logo but as we all know the html browes button or the tag as its also known is a hard cookie to style. this is how I want it to look:
But the reality is if I put a plain old file tag in there it would look bland, generic and out of place so I Googled for the solution and after a it of hunting I came across this code which yielded the image below the code (Which I also show the file upload without the opacity set to zero):
#divinputfile
{
height:85px;
width:250px;
margin:0px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#divinputfile #filepc
{
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:16px;
cursor: pointer;
}
#filepc
{
margin-top: 12px;
}
#fakeinputfile
{
margin-top:-28px;
}
#fakeinputfile #fakefilepc
{
width:250px;
height:22px;
font-size:18px;
font-family:Arial;
}
<body>
<br />
<div id="divinputfile">
<div id="fakeinputfile">
<br />
<input name="fakefilepc" type="text" id="fakefilepc" />
</div>
<div align="right">
<input name="filepc" type="file" size="1" id="filepc" onchange="document.getElementById('fakefilepc').value = this.value;"/>
</div>
</div>
</body>
This is a basic hack and when I select the styled button I'm really selecting the invisible upload button, then the value of the upload is passed into the test box above to look like its really part of the upload. Two problem with this method and I hoping you'll be able to help me here is
a) Only the button can be click to upload. In most browsers(not including Chrome) you can click into the text box as well as the button to upload the image. Sure with this method the text of the file path is added to the textbox but any alteration to that box wont change the file eg: if you selected file1.jpg to upload but you really wanted file2.jpg, changing the file path in the textbox wont change a thing to the ACTUAL upload element
b) Some browers like Chrome and Opera add the \fakepath\ filepath to the textbox and this is just ugly, so any if statement that can strip this out also would be hugely useful.
Hope you guys can help me with this, if not via code hints then if anyone knows a good JavaScript plug that saves the day.
Thanks
You already have javascript for the textbox to display the new filepath value on change.
That’s where you will have to also remove any /fakepath/ parts etc.
You can also add a click event to the text-box which will activate the file-browse click event.
I can instantly tell you that’s rather easy with jQuery, but I don’t know how one would do it with plain JS.
/e:
In fact, it seems file-input actions can not be triggered. See related question In JavaScript can I make a "click" event fire programmatically for a file input element?
Question a:
No firing the click event. Security and all that. You could add a second invisible upload button just like the first. If one changes, clear out the other. And the hacks pile up...
Question b:
See Kissaki's answer. You'll need some JS to clear out that 2nd invisible field anyhow...
Here is a solution.
Question A is solved by making the <input type="file" /> the full size of your widget, and using divisions to create non-clickable areas.
Question B is solved using the trick I found here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Style the File Upload Input - Example</title>
<style type="text/css">
#file-upload {
position:relative;
top:0px;
left:0px;
width:250px;
height:65px;
overflow:hidden;
padding-top:15px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#file-upload input[type='file'] {
width:250px;
height:65px;
font-size:65px;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
top:15px;
left:0px;
z-index:9;
}
#file-upload input {
width:97%;
}
#file-upload #no-click {
position:absolute;
bottom:0px;
left:0px;
z-index:10;
width:125px;
height:40px;
}
</style>
</head>
<body>
<div id="file-upload">
<input size="0" name="filepc" type="file" id="filepc" onchange="var clone = this.cloneNode(true);clone.type='text';document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;" />
<div id="fake-file-upload">
<input name="fakefilepc" type="text" id="fakefilepc" />
<div id="no-click"></div>
</div>
</div>
</body>
You might want to worry about graceful degradation... here's the same with the HTML, CSS and JavaScript more cleanly separated which should degrade cleanly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Style the File Upload Input - Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").addClass("js");
$("#file-upload").append("<div id=\"fake-file-upload\">" +
"<input name=\"fakefilepc\" type=\"text\" id=\"fakefilepc\" />" +
"<div id=\"no-click\"></div>" +
"</div>");
$("#file-upload input[type='file']").change(function() {
var clone = this.cloneNode(true);
clone.type='text';
document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;
});
});
</script>
<style type="text/css">
#file-upload {
position:relative;
top:0px;
left:0px;
width:250px;
height:65px;
}
body.js #file-upload {
overflow:hidden;
padding-top:15px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
body.js #file-upload input[type='file'] {
width:250px;
height:65px;
font-size:65px;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
top:15px;
left:0px;
z-index:9;
}
body.js #file-upload input {
width:97%;
}
body.js #file-upload #no-click {
position:absolute;
bottom:0px;
left:0px;
z-index:10;
width:125px;
height:40px;
}
</style>
</head>
<body>
<div id="file-upload">
<input size="0" name="filepc" type="file" id="filepc" />
</div>
</body>
I was using the following image as the image images/upload_file.gif (and its respective dimensions for everything related thereto)
I believe the following link might help you: "Ajax Upload; A file upload script with progress-bar, drag-and-drop".
Not really ajax, just a clever use of an iframe.
Hope it helps. Code well!
It's tough to do and even tougher to do cross-browser. Webkit (safari/chrome) has a very different way of handling this than the IEs and Mozilla. As shown, you'll end up resorting to a ton of hacks which you'll constantly need to check against each browser as they get released.
One way I've found is to progressively enhance to use a flash plug-in. You only need to check for flash being present and flashblock not blocking the element.
For example: http://www.uploadify.com/demos/ (although this doesn't seem to check for flashblock!)