I am trying to create a page with multiple background images, using this CSS code:
body {
background-image:url(../i/bg_bf.jpg), url(../../../../test.png) ;
background-position: top center, bottom left;
background-repeat:no-repeat;
padding-top:3px;
}
It works fine with Firefox, but does not show neither images in IE.
Any advice?
Multiple backgrounds/images aren't supported by IE, at least before IE9, they're a CSS3 feature, you can find them in the spec here with specifics here.
you might need to use wrappers
<body>
<div id="windowWrapper">
CSS:
body {
background-image:url(../i/bg_bf.jpg) no-repeat top center;
padding-top:3px;
}
#windowWrapper {
background-image:url(../i/test.jpg) no-repeat top center;
}
Related
I’ve been asked to create a CSS (non-HTML5) based site that has a filled div with a cutout that shows an image underneath it.
There are additional overlays and other images which makes using static images a pain. Plus, I suspect that I am going to need to be able to scale the background as the browser window changes size.
I realize that I can create an image of the GROW text and simply place it on top of the background image, but I would rather see if this effect can be accomplished “for real.”
This needs to work in IE8, 9, and FF 4. I can fallback to another effect for older browsers.
Any suggestions?
That affect can be achieved using CSS 3 image masking. However, at the moment, only webkit supports the property. I would implement something like this, then use a fallback for other browsers until everybody catches up to speed.
As a side note:You can also increase the CSS adoption be using ChromeFrame, or something similar
An Example from that link:
SVG images can be used as masks. For example, a partially transparent
circle can be applied as a mask like so:
<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">
I ended up using two images without any holes or transparency. It's a hack but works in all browsers.
html5 or something like a gpd as php gui. But html5 doesnt work with ie8 or before, at least if the client doesnt have the chrome frame of google inc.
If you can play with mix-blend-mode property, there is simple solution that work on all modern browsers.
http://codepen.io/sajijohn/pen/OXEgkj
HTML
<h1>SUPER-FLY</h1>
CSS
#import url(https://fonts.googleapis.com/css?family=Raleway:900);
*{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center;
background-size: cover;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: raleway, sans-serif;
font-size: 80px;
line-height: 60px;
text-align: center;
padding: 20px;
/*/////////MAGIC//HERE////////*/
background: #fff;
color: #000;
mix-blend-mode: color-dodge;
/*////////////////////////////*/
}
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
This question was asked before but the solution is not applicable in my case. I want to make sure certain background images are printed because they are integral to the page. (They are not images directly in the page because there are several of them being used as CSS sprites.)
Another solution on that same question suggests using list-style-image, which only works if you have a different image for every icon, no CSS sprites possible.
Aside from creating a separate page with the icons inline, is there another solution?
With Chrome and Safari you can add the CSS style -webkit-print-color-adjust: exact; to the element to force print the background color and/or image
Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this.
Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
}
I found a way to print the background image with CSS. It's a bit dependent on how your background is laid out, but it seems to work for my application.
Essentially, you add the #media print to the end of your stylesheet and change the body background slightly.
Example, if your current CSS looks like this:
body {
background:url(images/mybg.png) no-repeat;
}
At the end of your stylesheet, you add:
#media print {
body {
content:url(images/mybg.png);
}
}
This adds the image to the body as a "foreground" image, thus making it printable.
You may need to add some additional CSS to make the z-index proper. But again, its up to how your page is laid out.
This worked for me when I couldn't get a header image to show up in print view.
You have very little control over a browser's printing methods. At most you can SUGGEST, but if the browser's print settings have "don't print background images", there's nothing you can do without rewriting your page to turn the background images into floating "foreground" images that happen to be behind other content.
The below code works well for me (at least for Chrome).
I also added some margin and page orientation controls.(portrait, landscape)
<style type="text/css" media="print">
#media print {
body {-webkit-print-color-adjust: exact;}
}
#page {
size:A4 landscape;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0;
-webkit-print-color-adjust: exact;
}
</style>
Make sure to use the !important attribute. This dramatically increases the likelihood your styles are retained when printed.
#example1 {
background:url(image.png) no-repeat !important;
}
#example2 {
background-color: #123456 !important;
}
Like #ckpepper02 said, the body content:url option works well. I found however that if you modify it slightly you can just use it to add a header image of sorts using the :before pseudo element as follows.
#media print {
body:before { content: url(img/printlogo.png);}
}
That will slip the image at the top of the page, and from my limited testing, it works in Chrome and the IE9
-hanz
Use psuedo-elements. While many browsers will ignore background images, psuedo-elements with their content set to an image are technically NOT background images. You can then position the background image roughly where the image should have gone (though it's not as easy or precise as the original image).
One drawback is that for this to work in Chrome, you need to specify this behavior outside of your print media query, and then make it visible in the print media query block. So, something like this...
.image:before{
visibility:hidden;
position:absolute;
content: url("your/image/path");
}
#media print {
.image{
position:relative;
}
.image:before{
visibility:visible;
top:etc...
}
}
The drawback is that the image will often be downloaded on normal page loads, adding unnecessary bulk. You can avoid that by just using the same image/path you'd already used for the original, visible image.
it is working in google chrome when you add !important attribute to background image
make sure you add attribute first and try again, you can do it like that
.inputbg {
background: url('inputbg.png') !important;
}
Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this. Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
Note: It's not working on the entire body but you could speciy it for a inner element or a container div element.
You can use borders for fixed colors.
borderTop: solid 15px black;
and for gradient background you can use:
box-sizing: border-box;
border-style: solid;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-image: linear-gradient(to right, red, blue) 100%;
border-image-slice: 1;
border-width: 18px;
https://gist.github.com/danomanion/6175687 proposes an elegant solution, using a custom bullet in place of a background image. In this example, the aim is to apply a background image to an a element with class logo. (You should substitute these for the identifier of the element you wish to style.)
a.logo {
display: list-item;
list-style-image: url("../images/desired-background.png");
list-style-position: inside;
}
By including this within a
#media print {
}
block, I'm able to replace a white-on-transparent logo on the screen, rendered as a background-image, with a black-on-transparent logo for print.
You can do some tricks like that:
<style>
#page {
size: 21cm 29.7cm;
size: landscape
/*margin: 30mm 45mm 30mm 45mm;*/
}
.whater{
opacity: 0.05;
height: 100%;
width: 100%;
position: absolute;
z-index: 9999;
}
</style>
In body tag:
<img src="YOUR IMAGE URL" class="whater"/>
I've got a problem with IE 8 CSS.
* {
margin: 0;
padding: 0; }
img, fieldset { border:none; }
body {
font-family: Arial, Helvetica, sans-serif;
}
In the page:
<body style="background:#FFFFFF url(../public/img/s5_fa_bot_bg.png) no-repeat bottom center">
The png image is displaying correctly in Firefox and Safari but on top in IE8
This is an IE8 bug, your png background image needs to be at least 4x4px.
More info # http://stevelove.org/2009/07/10/png-background-repeat-bug-in-internet-explorer-7-and-8/
Your shorthand is wrong, it should be:
background:#FFFFFF url(../public/img/s5_fa_bot_bg.png) no-repeat center bottom;
Notice that I have switched the horizontal and the vertical position at the end.
It was actually an HTML problem, an unclosed div caused the png to show on top of the page.
Thanks for your time and effort.
i'm making a splash image div that changes the background with different css class, here's rules i defined:
#splash {
height: 130px;
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
this works fine in firefox and chrome, but the background somehow doesn't show up in ie 6. The weird thing is, it works for the homepage class but not the projectspage class. so ie 6 seems to interpret these almost identical rule differently. i tried clear the cache, didn't help. i'm quite new to css and ie 6 hacks, so am i missing anythings here?
also another problem that's slightly related to this, it seems it doesn't work in firefox when there is space before the class, like "#splash .homepage", but somehow i see other people's websites using the css with a space. what could be the problem?
update:
i tried to reverse the order of the #splash.homepage and #splash.projectspage, then now projectspage works but not the homepage. It seems whatever is immediately followed by #splash is used.
here are some relevant css & htmls:
#splash {
height: 130px;
}
#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
padding: 53px;
height: 40px;
width: 450px;
}
#splashtext h2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
font-style: italic;
}
#splashtext p {
color: #FFFFAA;
font-family: Calibri, Arial, san-serif;
font-size: 14px;
font-weight: normal;
margin-top: 10px;
font-style: italic;
}
<!-- splash, this one does not show -->
<div id="splash" class="homepage">
<div id="splashtext">
<h2>some header</h2>
<p>some description</p>
</div>
</div>
<!-- splash, this one shows -->
<div id="splash" class="projectspage">
<div id="splashtext">
<h2>some other header</h2>
<p>some other description</p>
</div>
</div>
IE6 does not support multiple combined selectors to select elements (#id.class or .class.class, etc). IE6 will ONLY recognize the last class/ID in your chain.
Details and example
However, in this case, as long as you only have .homepage and .projectspage on one element on the page, the background image should be showing up on the correct element.
I noticed that you are probably using .homepage and .projectspage to differentiate between two PAGES and the same ELEMENT on those different pages. A good practice is to put the class on the <body> element so you can use it to differentiate each page and their descendants.
<body class="homepage">
<div id="splash">
Then your CSS would be:
body.homepage div#splash { blah }
body.projectspage div#splash { blah }
Added benefit: you can now target any elements on a per page basis, not just the ones that you add ".homepage" or ".projectspage" to.
It's possible you're having an issue with the .png image files. IE6 cannot handle the transparency layer that is part of .png images, it simply renders any pixel with a transparent marker as a grey background.
As for the second part of your question, #splash.background is a significantly different rule than #splash .background. The first one (no space) refers to the element with id splash that also has a background class. The second rule (with a space) refers to any element of class background that is a child of the element with id splash. Subtle, but important difference.
Try taking out the quotes around your URLs in the background specifiers, or changing them to single quotes.
Why are you worried about ie6? Anyway it works in ie7 and ie8.
Are you sure that is not a problem with png? Try with a jpg or gif image.
I would bet that the problem is specifically to do with the IE6 misshandling of .pngs
To test, try replacing these graphics with a gif or jpg and check to see if the selectors are working correctly.
Once you've identified that it is a problem with pngs try using the Supersleight jQuery plugin.
I think using min-height property will sometimes work.
Try the below code.
#splash {
min-height:130px; /* first */
height:auto !important; /* second */
height: 130px; /* third */
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
Note: Please use the same order of css in #splash selector.
(I guess your projectspage is under a sub-directory of home-page?)
Try using absolute paths to each image in the CSS (eg. url("/images/splash_projects.png")) - it chould be that IE6 resolves images relative to the containing page instead of the CSS file (depends whether your CSS is inline or in an external file I suppose.)
I've got the same problem, and it's not PNGs.
e.g.
column2menu li { border-bottom : 1px solid;}
column2menu li.goats { border-bottom-color : brown;}
...works in IE6, but...
td#menu { background-repeat:no-repeat;
background-position:bottom right;}
td#menu.goats { background-image :
url(../images/goats.jpg);}
...doesn't.
But I found a solution for ie6 that works so far in FF, i.e.:
.tdgoats { background-repeat:no-repeat;
background-position:bottom right;
background-image : url(../images/goats.jpg);}
...so you use:
...and ie6 is happy
Thsi post looks OK where I'm typing it, but the preview in the blue box is a bit odd.
Somehow lines 2 and 3 got <h1>'d
I've got some button rollovers that work fine in browsers other than IE. I'm not using JQuery and this isn't IE6 -- I haven't tested it in IE6 yet. It's in IE8.
You can see what's happening here (look at it in IE vs. Firefox):
http://www.brighttext.com/socialtech/index.html
I'm using the technique of showing one or another button in response to a rollover by changing the background-position. I've tried various solutions proposed for IE6 issues but nothing has worked. Can anyone see what's going on here? And why can we see the Home button in IE, but not the others?
Code:
<ul>
<li id="homeLink" class="ord">Home</li>
<li id="faqLink" class="current">FAQ</li>
<li id="speakersLink" class="ord">Speaker Info</li>
<li id="sponsorsLink" class="ord">Sponsor Info</li>
</ul>
css for the first two buttons (I did this for all four) inside the div, which is called mastheadLeft:
#mastheadLeft li#homeLink a {
height: 32px;
width: 86px;
display: block;
text-indent: -1000em;
background: url(../images/home_dual.jpg) no-repeat left top ;
border: none;
}
#mastheadLeft li#homeLink.current a {
background-position: left top;
}
#mastheadLeft li#homeLink.current a:hover {
background-position: left top;
}
#mastheadLeft li#homeLink.ord a {
background-position: left bottom;
}
#mastheadLeft li#homeLink.ord a:hover {
background-position: left top;
}
#mastheadLeft li#faqLink a {
height: 34px;
width: 75px;
display: block;
text-indent: -1000em;
background: url(../images/faq_dual.jpg) no-repeat left bottom;
border: none;
}
#mastheadLeft li#faqLink.current a {
background-position: left top;
}
#mastheadLeft li#faqLink.current a:hover {
background-position: left top;
}
#mastheadLeft li#faqLink.ord a {
background-position: left bottom;
}
#mastheadLeft li#faqLink.ord a:hover {
background-position: left top;
}
i've tried a lot of stuff including recreating your project (copying and pasting your source and css from the site given). from my side using my own images, it works perfectly in both IE 8 and firefox 3.
however i tried
http://www.brighttext.com/socialtech/images/faq_dual.jpg
in both browsers. and it opens the image in firefox but opens an unavailable image in IE 8. so maybe you should have a look at where your images are stored. like i said, with my test images, it seems to work perfectly.
however i tried
http://www.brighttext.com/socialtech/images/faq%5Fdual.jpg
in both browsers. and it opens the
image in firefox but opens an
unavailable image in IE 8.
I also had a problem with a jpg that did not open in IE but opened in other browsers it was due to the image being in CMYK rather then RGB.
Reference:
http://www.computerhope.com/issues/ch001283.htm
Well i think there are many reasons which cause this problem. I was having same problem and could not understand how to solve the issue then i realize i did not put a space between ")" and "left"
background:url(../images/sample.jpg)left top no-repeat
After adding a space between these two solved my issue in ie6,7 and 8.
Is there a reason some of the images are PNGs and some are JPGs? I'm curious if the missing-file issue has something to do with file type. Probably not, but I'm interested.
Also, when I do background images in anchor tags like this, the image has the no-hover half sitting on top of the hover half and do my CSS like this:
#mastheadLeft li a {
height: 34px;
display: block;
text-indent: -1000em;
border: none;
}
#mastheadLeft li a:hover, #mastheadLeft li.current a {
background-position:0 -34px;
}
#homeLink a {
width: 86px;
background: url(/images/home_dual.jpg) no-repeat;
}
#faqLink a {
width: 75px;
background: url(/images/faq_dual.jpg) no-repeat;
}
That makes the CSS a lot cleaner and sets the exact same rules for all elements except the ones that are unique which, in this case, is just the background image used and the width. That way if something's going wrong, it'll be wrong for all the images.
I also use exact pixels instead of depending on the generic "top," "left," etc. values in CSS. More exact control.
Perhaps not a final answer, but at least it'll clean up your CSS so it's easier to find the problem.