i am trying to embed an image within an iframe, the size of which i am not sure.
i tried as below but it does not seem to work.
please let me know how to proceed.
what i exactly want to do is, the image should auto-fit into the page. image is smaller than the page, so when i remove no-repeat multiple instances of image are visible on the screen.
Please help thanks.
body{
background-image:url(someimageurl);
width:1400px;
height:1600px;
background-repeat:no-repeat;
}
Rodin is on the right track. In pure CSS you can only do it with CSS3 and only the latest versions of browsers are going to work. You can however fake it by putting an absolutely positioned image in the corner of the page with width and height set to 100%. Then some z-index work to put the content over the top of the image.
The HTML:
<img class="background" />
<div class="wrapper">
content goes here
</div>
The CSS:
img.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index}
div.wrapper{position:relative;z-index:1;}
See it here - http://jsfiddle.net/snkg8/
FYI - this won't work in IE6 without some extra CSS hacks, but I don't bother with IE6 anymore.
You have a css property for the background size:
background-size: 100%;
Unfortunately, it is a CSS3 property and only supported in the newest browsers (IE9, Firefox4)
By using css3,
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This works in all browsers and ie9+.
The following filters works in ie7 and ie8 too.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
Related
This is my page http://inogroup.it/preload/index.htm
Width of image boxes is responsive
How to set the height to be responsive too? Like 50% of the screen?
If I do this change:
.pattern{
background-size: contain;
margin-bottom:25px;
width:100%;
height:50%;
}
it's not working
Thank you very much!
background-size: needs to come AFTER background: I don't know if this is true of all browsers, but it's certainly a feature of Chrome that can drive you crazy.
This might be a bit late but in some cases it's necessary to add background-attachment: fixed; to get background-size: cover; working.
You need to use background-image property to define background image.
So this won't work
<img class="image" style="background: url(image.jpg);" />
.image { background-size: cover; }
because background is the shorthand code and takes default values for all omitted parameters.
But if you do this
<img class="image" style="background-image: url(image.jpg);" />
.image { background-size: cover; }
This wil solve the problem.
The height of the div can be set using css height property, or (by default) by the height of it's children elements. As the images are being set as background images the div is unable to determine the height it should be from that, and there is no pure css method of adjusting the height of a div to fit the dimensions of a background image. What you can do, is set the background images to be positioned in the centre of the div and have the background size as cover:
.pattern-container .pattern {
background-size: cover;
background-position: 50% 50%;
<!-- other rules here -->
}
Positioning the background images as 50% 50% vertically and horizontally centres it in the containing div regardless of the dimensions of the div. That said, the image itself may crop at the edges if the aspect ratio of the div is less than the aspect ratio of the image (e.g. if the div is 30px wide and 10px high, and the image is 40px wide and 10px high, then the image is going to lose 5px from both sides).
You can use ;
background: url('/path');
background-size: cover;
//in the style sheets
In some cases, there may be empty space in the edges of your image itself (e.g., an icon that is surrounded by 16px of blank white space on each side) making it seem like background-size: cover; is not working when it actually is.
Just a reminder to double-check your source image :)
The image boxes are responsive, but this does not mean that the corresponding images are. For a more fluid and dynamic structure, I recommend using a framework that does the work for you, like Bootstrap.
In the latest version of Bootstrap you could use the following code to make a responsive image (both in width and height):
<img src="images/my_img" class="img-responsive" />
In order for this to work, you will need to download the latest version of Bootstrap from their website (http://getbootstrap.com/) and reference in your code.
I've got the following code running on an element that spans 100% of the browser:
#section_white {
background-attachment:fixed;
background-image:url(image_url_here.jpg);
background-position:100% 100%;
background-repeat:no-repeat no-repeat;
background-size:cover;
}
What I need to do is to have the image span the entire width of the browser, while remaining fixed (thereby allowing the content to scroll on top of it).
It seems to work on all the browsers except Safari - any ideas what I'm missing?
I've tried setting the element height and min-height to 100%, with no joy.
A link to a demo page can be seen here: http://oscarsarc.tinygiantstudios.co.za/adopt/adopt-nationwide/
Turns out Safari for Windows is no longer supported (how did I miss this?!) and the one I'm using is far too old to be useful. Using OSX / Safari, things look peachy (according to Benjamin)
So this will help since background-size is partially supported in your version of safari you should use prefix just as below
html {
background: url(image_url_here.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this and let me know any issues.
SOURCE LINK
CHECK BROWSER SUPPORT
I have this CSS to show a water mark inside a div:
background-image: url("../Images/Watermark02.png") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
the behavior is shown in the below image, can somebody help me and tell me what is missing to get it to work on Chrome just like FF?
You can fix this by removing background-attachment: fixed. The "fixed" value is relative to the screen, not the you have the background image inside of. Granted it's possible this is due to something else, but I will need to see the rest of your CSS/HTML.
background-attachment: fixed; /* Remove this */
I've set up a jsfiddle for you here: http://jsfiddle.net/HkBh4/
I'm building a website that has a full width background image in the header that resizes with the page. There is an unusual flickering horizontal line that appears under the image when it is resized in Firefox. The line does not appear at full with, but blinks on and off when the size is changed. The line appears at the bottom of the background image, not the bottom of the header element.
It appears in the MacOS build of Firefox only when I tested it in OSX 10.8.4, Firefox 23.0. The problem did not appear with Windows 8, Firefox 23.0.1, or in other browsers that I have tested.
Here is the code on my header:
<header>
<h1><span>Sound Soups on Madison - Healthy & Convenient Alternatives for Your Busy Work Week</span><img src="images/sound-soups.jpg" id="logo" alt="Sound Soups"></h1>
<nav id="nav-main">
<?php echo makeLinks($nav1); ?>
</nav>
</header>
header{
padding:0 2.12765957% 35px;
overflow:hidden;
background-image:url('../images/bg-header.jpg');
background-repeat:no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
I've tried using cover instead of 100% for the background size, and putting padding or a border under the header. Googling the problem didn't turn up anything. Thanks in advance if anyone knows the answer here.
EDIT:
The issue seems to be related to how FireFox scales the background image. The following seems to fix it for me with FireFox 23.0.1 , OSX 10.8.4
In style.css, try changing the background-size property in the header rule from 100% auto to 99.99% auto, ie
header {
background-image: url("../images/bg-header.jpg");
background-repeat: no-repeat;
background-size: 99.99% auto;
margin: 0;
overflow: hidden;
padding: 0 2.12766% 35px;
}
If I'm understanding your question correctly, check the top of the stylesheet # http://soundsoups.julie-edwards.com/css/responsive.css
You have
header{
background-image:url('../images/none.png');
padding-bottom:15px;
border-bottom:2px solid #7a918c;
margin-bottom:20px;
}
I think the border-bottom is the cause of the problem.
Good luck!
Had the same problem for a background-sized image on the body element.
I fixed it by applying the background-sized image to a positioned div element.
If that can be of any help.
I solved this problem by converting my .jpg background image to a .png. In case anyone else runs into this and can't change background-size, try this.
I want to load an image via css that stretches to the entire screen. The css:
body {
background: url(images/reelgoodguide2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: auto;
margin: 0px;
padding: 0px;
}
Which works perfectly in Chrome and Firefox and IE9.
There is a conditional in the html to include an additional css file if the browser is IE8 or IE7. This css contains:
body{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale')";
}
But instead of alphaimageloader stretching the image to the entire screen, the image remains centered and it and does not resize.
Note: when I open developer tools I can see that the css file is there. When I disable the filter property, nothing happens. Any tips to what Im doing wrong?
Thanks in advance.
OKAY... After a grueling bit of fiddling, this is what i figured out:
First:
The filter path to an image is relative to the html document, not the css file. FRUSTRATING
Second:
I got this to work by applying the filter to html instead of body.
I had read that the IE workaround were not to be applied to html but what I noticed was that there was (after I had cleared up the image path problem) a stretched bacground image but it was behind everything else.
I think it's not possible with CSS alone. Search for supersized. You will find some JavaScript libs.
One more useful answer to solve IE8 background issue is:
Download backgroundsize.min.htc and put it inside your project.
Now simply add these lines in your css:
.class_name{
//your other properties
background-size: cover;
-ms-behavior: url(backgroundsize.min.htc);
}
NOTE: use the url according to your project setup.
Enjoy this simple solution. :)