Re: [css-d] Background-Image overrides background color
On Jan 11, 2015, at 2:02 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: 2015-01-11, 9:48, Karl DeSaulniers wrote: I would suggest a little trip to WC3. I wonder what that means. it means study time See here: http://www.w3schools.com/css/css_background.asp The w3schools site, unreliable and with rather low information/noise ratio, intentionally wants to be confused with the Word Wide Web Consortium, W3C. Please do not contribute to this confusion. Matter of opinion Yucca, but I hear ya. For the level christopher is at it will do just fine getting him in line with how things on a basic level work. Did not mean to add to the confusion of W3Schools being WC3 itself. @Christopher, don't confuse W3Schools with WC3... Ok? They are not the same. One is lucifer and the other is God. There I uncontributed. The W3C material on CSS is as authoritative as you can get in the area of CSS, but it’s mostly not suitable for use as tutorials. The Mozilla Development Network material https://developer.mozilla.org/en-US/docs/Web/CSS and there you have it! a real contribution. is much more suitable as learning material. And it links to W3C material, so that you can check it too, after learning the basics and getting an idea of how various CSS features are used. I would suggest you google every css attribute you can so you familiarize yourself with it before using. There are no attributes in CSS. Googling every CSS property (which is what you are probably referring to) would be rather pointless. There are about 1,000 different properties in CSS specifications, drafts, and browser-specific documentation. Yes. sorry not attributes, properties and NO don't go read them all that would be silly. That should read ... every css proplerty you need to so you... There. better? I'm trying here Yucca I really am man. Thank God for your technicalities! We all would be lost without them. :) Yucca Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
2015-01-11, 9:48, Karl DeSaulniers wrote: I would suggest a little trip to WC3. I wonder what that means. See here: http://www.w3schools.com/css/css_background.asp The w3schools site, unreliable and with rather low information/noise ratio, intentionally wants to be confused with the Word Wide Web Consortium, W3C. Please do not contribute to this confusion. The W3C material on CSS is as authoritative as you can get in the area of CSS, but it’s mostly not suitable for use as tutorials. The Mozilla Development Network material https://developer.mozilla.org/en-US/docs/Web/CSS is much more suitable as learning material. And it links to W3C material, so that you can check it too, after learning the basics and getting an idea of how various CSS features are used. I would suggest you google every css attribute you can so you familiarize yourself with it before using. There are no attributes in CSS. Googling every CSS property (which is what you are probably referring to) would be rather pointless. There are about 1,000 different properties in CSS specifications, drafts, and browser-specific documentation. Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
Tom Livingston wrote: For someone at the OPs level, I'd not recommend a site with such a bad reputation. He won't know if what he is reading is correct. While that site may be improved as of late, why start learning at such a poorly regarded source. There are much more reputable places to learn the basics. Csstricks.com Moz sites Html5doctor I would personally treat with the greatest suspicion any site claiming to offer guidance on W3C standards that does not itself validate : http://validator.w3.org/check?uri=http://html5doctor.com/ Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
I'm amazed it took this long for a link to the W3 validator to creep into the conversation. Maybe if we keep at it the list archives will trump w3schools in search results? Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com On 11 January 2015 at 16:22, Tom Livingston tom...@gmail.com wrote: It appears that the errors are for things that are not yet part of the spec the validator is based on. I would not call that bad code. On Sun, Jan 11, 2015 at 11:17 AM Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: For someone at the OPs level, I'd not recommend a site with such a bad reputation. He won't know if what he is reading is correct. While that site may be improved as of late, why start learning at such a poorly regarded source. There are much more reputable places to learn the basics. Csstricks.com Moz sites Html5doctor I would personally treat with the greatest suspicion any site claiming to offer guidance on W3C standards that does not itself validate : http://validator.w3.org/check?uri=http://html5doctor.com/ Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
For someone at the OPs level, I'd not recommend a site with such a bad reputation. He won't know if what he is reading is correct. While that site may be improved as of late, why start learning at such a poorly regarded source. There are much more reputable places to learn the basics. Csstricks.com Moz sites Html5doctor On Sun, Jan 11, 2015 at 3:43 AM Karl DeSaulniers k...@designdrumm.com wrote: On Jan 11, 2015, at 2:02 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: 2015-01-11, 9:48, Karl DeSaulniers wrote: I would suggest a little trip to WC3. I wonder what that means. it means study time See here: http://www.w3schools.com/css/css_background.asp The w3schools site, unreliable and with rather low information/noise ratio, intentionally wants to be confused with the Word Wide Web Consortium, W3C. Please do not contribute to this confusion. Matter of opinion Yucca, but I hear ya. For the level christopher is at it will do just fine getting him in line with how things on a basic level work. Did not mean to add to the confusion of W3Schools being WC3 itself. @Christopher, don't confuse W3Schools with WC3... Ok? They are not the same. One is lucifer and the other is God. There I uncontributed. The W3C material on CSS is as authoritative as you can get in the area of CSS, but it’s mostly not suitable for use as tutorials. The Mozilla Development Network material https://developer.mozilla.org/en-US/docs/Web/CSS and there you have it! a real contribution. is much more suitable as learning material. And it links to W3C material, so that you can check it too, after learning the basics and getting an idea of how various CSS features are used. I would suggest you google every css attribute you can so you familiarize yourself with it before using. There are no attributes in CSS. Googling every CSS property (which is what you are probably referring to) would be rather pointless. There are about 1,000 different properties in CSS specifications, drafts, and browser-specific documentation. Yes. sorry not attributes, properties and NO don't go read them all that would be silly. That should read ... every css proplerty you need to so you... There. better? I'm trying here Yucca I really am man. Thank God for your technicalities! We all would be lost without them. :) Yucca Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
w3school is at the top for so many searches. It would be great if they would just clean up their site. -- Registered Linux User: #480675 Registered Linux Machine: #408606 Linux since June 2005 On Sun, Jan 11, 2015 at 10:30 AM, Barney Carroll barney.carr...@gmail.com wrote: I'm amazed it took this long for a link to the W3 validator to creep into the conversation. Maybe if we keep at it the list archives will trump w3schools in search results? Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com On 11 January 2015 at 16:22, Tom Livingston tom...@gmail.com wrote: It appears that the errors are for things that are not yet part of the spec the validator is based on. I would not call that bad code. On Sun, Jan 11, 2015 at 11:17 AM Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: For someone at the OPs level, I'd not recommend a site with such a bad reputation. He won't know if what he is reading is correct. While that site may be improved as of late, why start learning at such a poorly regarded source. There are much more reputable places to learn the basics. Csstricks.com Moz sites Html5doctor I would personally treat with the greatest suspicion any site claiming to offer guidance on W3C standards that does not itself validate : http://validator.w3.org/check?uri=http://html5doctor.com/ Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
Schoolboy errors, which indicate (to my mind) the level of care (or lack thereof) that went into the preparation of the material : Error Line 453, Column 88: did not start a character reference. ( probably should have been escaped as amp;.) …ancybar.net/ac/fancybar.js?zoneid=1502serve=C6ADVKEplacement=html5doctor id… ✉ Error Line 453, Column 102: did not start a character reference. ( probably should have been escaped as amp;.) Philip Taylor In a URL string like that, I personally would not look down on the dev for that. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
Tom Livingston wrote: In a URL string like that, I personally would not look down on the dev for that. We could debate this forever, Tom, and I suspect would never reach agreement. My position (with which you may well disagree) is that I look on it as being similar to a developer who elects to use (say) the Qt library in his/her work and then, when challenged that something does not work as it should, responds It's a bug in Qt. If a developer elects to use something from without his/her control, then it is his/her responsibility to ensure that it /does/ work as intended (i.e., in this case, validates). A bad workman blames his tools; a good workman chooses the correct tools and therefore never needs to try to ascribe blame. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
It appears that the errors are for things that are not yet part of the spec the validator is based on. I would not call that bad code. On Sun, Jan 11, 2015 at 11:17 AM Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: For someone at the OPs level, I'd not recommend a site with such a bad reputation. He won't know if what he is reading is correct. While that site may be improved as of late, why start learning at such a poorly regarded source. There are much more reputable places to learn the basics. Csstricks.com Moz sites Html5doctor I would personally treat with the greatest suspicion any site claiming to offer guidance on W3C standards that does not itself validate : http://validator.w3.org/check?uri=http://html5doctor.com/ Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
Tom Livingston wrote: It appears that the errors are for things that are not yet part of the spec the validator is based on. I would not call that bad code. Schoolboy errors, which indicate (to my mind) the level of care (or lack thereof) that went into the preparation of the material : Error Line 453, Column 88: did not start a character reference. ( probably should have been escaped as amp;.) …ancybar.net/ac/fancybar.js?zoneid=1502serve=C6ADVKEplacement=html5doctor id… ✉ Error Line 453, Column 102: did not start a character reference. ( probably should have been escaped as amp;.) Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
On Sun, Jan 11, 2015 at 12:24 PM, Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: In a URL string like that, I personally would not look down on the dev for that. We could debate this forever, Tom, and I suspect would never reach agreement. My position (with which you may well disagree) is that I look on it as being similar to a developer who elects to use (say) the Qt library in his/her work and then, when challenged that something does not work as it should, responds It's a bug in Qt. If a developer elects to use something from without his/her control, then it is his/her responsibility to ensure that it /does/ work as intended (i.e., in this case, validates). A bad workman blames his tools; a good workman chooses the correct tools and therefore never needs to try to ascribe blame. Philip Taylor I'll agree to disagree with you. While I agree your code should validate, there are *some* things that can be overlooked. It's been said many time on this list. It's like vendor prefixes or zoom:1; in the CSS validator. It's an error, but if you know why it's an error and know it's there on purpose, you can let it go. I'm not saying you are wrong, Philip. I'm just a little more lenient. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
Try making the background color the last item in the list. On Sat, Jan 10, 2015 at 11:59 PM, Crest Christopher crestchristop...@gmail.com wrote: The background image should sit on-top of the background color, instead the background color is overriding my background image ? background-color:#343630;/*#b7b7b7;*/ background:url(/wdp/wip/overlay_bg.png); background-position:top; background-blend-mode: overlay; margin:0; padding:0; font:100%/1.3 arial, helvetica, sans-serif; Christopher __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background-Image overrides background color
The background image should sit on-top of the background color, instead the background color is overriding my background image ? background-color:#343630;/*#b7b7b7;*/ background:url(/wdp/wip/overlay_bg.png); background-position:top; background-blend-mode: overlay; margin:0; padding:0; font:100%/1.3 arial, helvetica, sans-serif; Christopher __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
2015-01-11, 6:59, Crest Christopher wrote: The background image should sit on-top of the background color, Yes, if both are specified. instead the background color is overriding my background image ? background-color:#343630;/*#b7b7b7;*/ background:url(/wdp/wip/overlay_bg.png); background-position:top; background-blend-mode: overlay; margin:0; padding:0; font:100%/1.3 arial, helvetica, sans-serif; Can you please provide a complete example? This code can hardly produce the effect described. The background shorthand sets background-color to transparent, so there is either the background image alone or, if it does not exist, no background, i.e. the enclosing element’s background will shine thru. If you replace background by background-image, the situation changes. Then, if the image exists, it will be blended with the background color, as specified by background-blend-mode: overlay (on supporting browsers). Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background-Image overrides background color
I would suggest a little trip to WC3. You have posted this a lot. it should be background-image: if your just setting the url attribute to your background image. background: if your setting the url, position, size, origin, color, etc as the shorthand notation. See here: http://www.w3schools.com/css/css_background.asp I would suggest you google every css attribute you can so you familiarize yourself with it before using. That's what I did. Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jan 10, 2015, at 10:59 PM, Crest Christopher crestchristop...@gmail.com wrote: background:url(/wdp/wip/overlay_bg.png); __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background image on body appears to be in viewport or HTML
I've been playing around with a few menu design ideas, and mocked up a site to try them out. The
menus are OK as far as they go, but I'm having trouble with a background image.
I have been trying to set up a background image in the body (or in body class='plain'), but
when I do so it appears outside the body, as if it were attached to the viewport or perhaps the
HTML. If I move the background image to appear in the header there's no problem. I've tried
several variants without success.
CSS is like this:
body {
background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 0;
}
body.plain {
max-width: 900px;
border: 0;
border: 1px dashed red; /*(temporary)*/
border-radius: 5px;
}
div#outer {
/* background-color: #DFEFFF; */
width: 100%;
margin: 0 auto;
padding: 0.25em 0.25em;
padding: 0;
}
/* HEADER */
header#banner {
/* when the background image is set here, all is well */
/* background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;*/
margin-bottom: 1em;
width: 100%;
float: left;
}
I can live with the background being in the header if necessary, but I would like to know why
it doesn't work correctly in the body. I suspect it may be very simple, but I can no longer
see the wood for the trees. Any suggestions, please ?
It can be seen at http://www.webadit.co.uk/newhmi
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
Hi - I think you have to give it a position and include a z-index
instruction to tell it to put the image at the back, eg
background-attachment: fixed;
background-position: 50% 60px;
margin: 30px 0px 0px 0px;
z-index: 1;
}
That, above, is taken from a very old style sheet; I wouldn't use pixels
doing this now.
Rachel
On 09/02/2014 19:02, Tim Dawson wrote:
I've been playing around with a few menu design ideas, and mocked up a
site to try them out. The menus are OK as far as they go, but I'm
having trouble with a background image.
I have been trying to set up a background image in the body (or in
body class='plain'), but when I do so it appears outside the body,
as if it were attached to the viewport or perhaps the HTML. If I move
the background image to appear in the header there's no problem.
I've tried several variants without success.
CSS is like this:
body {
background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 0;
}
body.plain {
max-width: 900px;
border: 0;
border: 1px dashed red; /*(temporary)*/
border-radius: 5px;
}
div#outer {
/*background-color: #DFEFFF; */
width: 100%;
margin: 0 auto;
padding: 0.25em 0.25em;
padding: 0;
}
/* HEADER */
header#banner {
/* when the background image is set here, all is well */
/*background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;*/
margin-bottom: 1em;
width: 100%;
float: left;
}
I can live with the background being in the header if necessary, but
I would like to know why it doesn't work correctly in the body. I
suspect it may be very simple, but I can no longer see the wood for
the trees. Any suggestions, please ?
It can be seen at http://www.webadit.co.uk/newhmi
Tim Dawson
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
oThis has never come up for me, so I can't explain (yet) why this happens,
but it appears, at least in Chrome, that some style attributes don't honor
widths, margins, [and other things I don't know of] of the body element.
The reason this has never come up for me, is that I would always use a
wrapper of sorts so that styling of the body element was not necessary:
body
div class=wrapper !-- -- style this --
/div
/body
On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson t...@ramasaig.com wrote:
I've been playing around with a few menu design ideas, and mocked up a
site to try them out. The menus are OK as far as they go, but I'm having
trouble with a background image.
I have been trying to set up a background image in the body (or in body
class='plain'), but when I do so it appears outside the body, as if it
were attached to the viewport or perhaps the HTML. If I move the background
image to appear in the header there's no problem. I've tried several
variants without success.
CSS is like this:
body {
background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 0;
}
body.plain {
max-width: 900px;
border: 0;
border: 1px dashed red; /*(temporary)*/
border-radius: 5px;
}
div#outer {
/* background-color: #DFEFFF; */
width: 100%;
margin: 0 auto;
padding: 0.25em 0.25em;
padding: 0;
}
/* HEADER */
header#banner {
/* when the background image is set here, all is well */
/* background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;*/
margin-bottom: 1em;
width: 100%;
float: left;
}
I can live with the background being in the header if necessary, but I
would like to know why it doesn't work correctly in the body. I suspect
it may be very simple, but I can no longer see the wood for the trees. Any
suggestions, please ?
It can be seen at http://www.webadit.co.uk/newhmi
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Chris Rockwell
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
Interesting Chris. I'v always styled the body with margins, positioning,
sometimes padding...etc and it always has an effect.
Rachel, Tim will need to give his element a position of absolute, relative (and
maybe fixed but I'm sure about that one) for z-index to kick in.
Eric
On February 9, 2014 at 2:54 PM Chris Rockwell ch...@chrisrockwell.com wrote:
oThis has never come up for me, so I can't explain (yet) why this happens,
but it appears, at least in Chrome, that some style attributes don't honor
widths, margins, [and other things I don't know of] of the body element.
The reason this has never come up for me, is that I would always use a
wrapper of sorts so that styling of the body element was not necessary:
body
div class=wrapper !-- -- style this --
/div
/body
On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson t...@ramasaig.com wrote:
I've been playing around with a few menu design ideas, and mocked up a
site to try them out. The menus are OK as far as they go, but I'm having
trouble with a background image.
I have been trying to set up a background image in the body (or in body
class='plain'), but when I do so it appears outside the body, as if it
were attached to the viewport or perhaps the HTML. If I move the background
image to appear in the header there's no problem. I've tried several
variants without success.
CSS is like this:
body {
background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 0;
}
body.plain {
max-width: 900px;
border: 0;
border: 1px dashed red; /*(temporary)*/
border-radius: 5px;
}
div#outer {
/* background-color: #DFEFFF; */
width: 100%;
margin: 0 auto;
padding: 0.25em 0.25em;
padding: 0;
}
/* HEADER */
header#banner {
/* when the background image is set here, all is well */
/* background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;*/
margin-bottom: 1em;
width: 100%;
float: left;
}
I can live with the background being in the header if necessary, but I
would like to know why it doesn't work correctly in the body. I suspect
it may be very simple, but I can no longer see the wood for the trees. Any
suggestions, please ?
It can be seen at http://www.webadit.co.uk/newhmi
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Chris Rockwell
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
Interesting Chris. I'v always styled the body with margins, positioning, sometimes padding...etc and it always has an effect. But have you applied colors, images to that? This pen shows what I'm referring to (and I've never experienced because of my mark-up conventions): http://codepen.io/anon/pen/fkyEF. Notice the border and padding honor the width, but not the color. I wonder why... __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
Thanks Chris, and others.
I'd agree about the 'wrapper'. It just happens I was rather throwing a page together for my menu
tests, and slipped the background image onto the body. I've moved it now (in my local version
only) to my 'wrapper', which is div#outer, and that works too, and looks much as I had expected
it to on the body.
I see Eric Meyer puts a background image on the body in his Definitive Guide, so I feel I'm in
good company. Just doesn't work for me yet.
Rachel: Yes, positioning works, but it only positions wrt the viewport (or HTML) where it is
appearing. My thought is that it shouldn't be there in the first place.
Tim
On 09/02/2014 19:54, Chris Rockwell wrote:
oThis has never come up for me, so I can't explain (yet) why this happens, but
it appears, at
least in Chrome, that some style attributes don't honor widths, margins, [and
other things I
don't know of] of the body element.
The reason this has never come up for me, is that I would always use a wrapper
of sorts so that
styling of the body element was not necessary:
body
div class=wrapper !-- -- style this --
/div
/body
On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson t...@ramasaig.com
mailto:t...@ramasaig.com wrote:
I've been playing around with a few menu design ideas, and mocked up a site
to try them out.
The menus are OK as far as they go, but I'm having trouble with a
background image.
I have been trying to set up a background image in the body (or in body
class='plain'),
but when I do so it appears outside the body, as if it were attached to the
viewport or
perhaps the HTML. If I move the background image to appear in the header
there's no
problem. I've tried several variants without success.
CSS is like this:
body {
background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 0;
}
body.plain {
max-width: 900px;
border: 0;
border: 1px dashed red; /*(temporary)*/
border-radius: 5px;
}
div#outer {
/* background-color: #DFEFFF; */
width: 100%;
margin: 0 auto;
padding: 0.25em 0.25em;
padding: 0;
}
/* HEADER */
header#banner {
/* when the background image is set here, all is well */
/* background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;*/
margin-bottom: 1em;
width: 100%;
float: left;
}
I can live with the background being in the header if necessary, but I
would like to know
why it doesn't work correctly in the body. I suspect it may be very
simple, but I can no
longer see the wood for the trees. Any suggestions, please ?
It can be seen at http://www.webadit.co.uk/__newhmi
http://www.webadit.co.uk/newhmi
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [css-d@lists.css-discuss.org
mailto:css-d@lists.css-discuss.org]
http://www.css-discuss.org/__mailman/listinfo/css-d
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.__com/
http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/__policies.html
http://css-discuss.org/policies.html
Supported by evolt.org http://evolt.org --
http://www.evolt.org/help___support_evolt/
http://www.evolt.org/help_support_evolt/
--
Chris Rockwell
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
On 2/9/14, 12:11 PM, Chris Rockwell wrote:
Interesting Chris. I'v always styled the body with margins,
positioning, sometimes padding...etc and it always has an effect. But have
you applied colors, images to that? This pen shows what I'm referring to (and
I've never experienced because of my mark-up conventions):
http://codepen.io/anon/pen/fkyEF.
Notice the border and padding honor the width, but not the color. I wonder
why...
__
I believe that's because backgrounds on body propagate to the viewport -
that's the root (html) element. Unless, that is, you have a background
specified for html.
Try adding this to your pen's CSS:
html { background-color: white; }
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
That did it, so is this reverse cascading :)?
On Sun, Feb 9, 2014 at 3:53 PM, David Hucklesby huckle...@gmail.com wrote:
On 2/9/14, 12:11 PM, Chris Rockwell wrote:
Interesting Chris. I'v always styled the body with margins,
positioning, sometimes padding...etc and it always has an effect. But
have
you applied colors, images to that? This pen shows what I'm referring to
(and
I've never experienced because of my mark-up conventions):
http://codepen.io/anon/pen/fkyEF.
Notice the border and padding honor the width, but not the color. I wonder
why...
__
I believe that's because backgrounds on body propagate to the viewport -
that's the root (html) element. Unless, that is, you have a background
specified for html.
Try adding this to your pen's CSS:
html { background-color: white; }
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Chris Rockwell
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
On Sun, Feb 9, 2014 at 3:53 PM, David Hucklesby huckle...@gmail.com wrote: I believe that's because backgrounds on body propagate to the viewport - that's the root (html) element. Unless, that is, you have a background specified for html. Backgrounds on root elements are special :) http://www.w3.org/TR/css3-background/#special-backgrounds -- Jon Reece jon.re...@gmail.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
Backgrounds on root elements are special :) http://www.w3.org/TR/css3-background/#special-backgrounds Perfect - thanks for the link Jon! -- Chris Rockwell __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image on body appears to be in viewport or HTML
On 09/02/2014 20:53, David Hucklesby wrote:
On 2/9/14, 12:11 PM, Chris Rockwell wrote:
Interesting Chris. I'v always styled the body with margins,
positioning, sometimes padding...etc and it always has an effect. But have
you applied colors, images to that? This pen shows what I'm referring to (and
I've never experienced because of my mark-up conventions):
http://codepen.io/anon/pen/fkyEF.
Notice the border and padding honor the width, but not the color. I wonder
why...
__
I believe that's because backgrounds on body propagate to the viewport -
that's the root (html) element. Unless, that is, you have a background
specified for html.
Try adding this to your pen's CSS:
html { background-color: white; }
YES ! It worked for me too. So that's the problem solved, thank you. Just leaves me wondering
why I've never come across that before.
Tim
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Wed, Jun 19, 2013 at 10:58 AM, COM j...@coffeeonmars.com wrote: On Jun 18, 2013, at 6:38 PM, David Laakso laakso.davi...@gmail.com wrote: Anything is possible. Scalable Vector Graphics [svg images], CSS rgba transparency, and CSS linear-gradients --among other contemporary methods ... open a lot of new doors and windows that do not require PhotoShop. Thank you..this is good to hear. Let me make sure I expressed my request clearly when I say on top..picture a header 960x100px which has a background image. imagine that same header with a color applied to the entire 960x100px dimension as opposed to: a header with a background image and a background color above it in the sense of closer to the top edge of the view port. I fiddled yesterday and got nothing other than I can vary the opacity of my color but not so that the background image's color is affected by that of the color above it (above it in z-space) Thank you! JOhn John, For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. Transparency is determined by the code but it is dependent on the hue, saturation, value of the elements proper-- their z-index, the type of monitor used to view the page, ambient light when viewed... and god only knows what else. For what its worth this is a site in progress that uses various combinations of svg images, linear-gradients, and rgba-transparency in the header, navigation, sidebar, and footer: http://ccstudi.com/ Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote: For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. A link to the page in question is here: http://coffeeonmars.com/test/flextest/flextest.html the part I'm talking about is at top, where it says heading one and heading two; behind them in the header is a jpg of what looks like some light texture. in the css is also a background color for that element: a red at 0.4 alpha. my goal is to have the texture image's color influenced by that background color, IOW, by varying the opacity of the color, the image would have more or less of a reddish cast to it. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Wed, Jun 19, 2013 at 11:51 AM, COM j...@coffeeonmars.com wrote:
On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote:
For those among us who dwell in the visual world, one picture is worth
a thousand words... a click able link to your coded page would help.
A link to the page in question is here:
http://coffeeonmars.com/test/flextest/flextest.html
the part I'm talking about is at top, where it says heading one and
heading two; behind them in the header is a jpg of what looks like some
light texture. in the css is also a background color for that element: a red
at 0.4 alpha.
my goal is to have the texture image's color influenced by that background
color, IOW, by varying the opacity of the color, the image would have more
or less of a reddish cast to it.
Thank you!
John
John,
rgba coding error...
Change this:
header{
background-color:rgba(240,0,0 0.4);
}
to this:
header{
background-color:rgba(240,0,0,.04);
}
or this:
header{
background-color:rgba(240,0,0,.4);
}
Note the last comma.
Not tested.
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
Tested on safari 6.0.5...
background-color: rgba(240,0,0,0.4);
althought it looks like rgba(240,0,0,0.2) might be better suited. :)
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
On Jun 19, 2013, at 12:17 PM, David Laakso wrote:
On Wed, Jun 19, 2013 at 11:51 AM, COM j...@coffeeonmars.com wrote:
On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote:
For those among us who dwell in the visual world, one picture is worth
a thousand words... a click able link to your coded page would help.
A link to the page in question is here:
http://coffeeonmars.com/test/flextest/flextest.html
the part I'm talking about is at top, where it says heading one and
heading two; behind them in the header is a jpg of what looks like some
light texture. in the css is also a background color for that element: a red
at 0.4 alpha.
my goal is to have the texture image's color influenced by that background
color, IOW, by varying the opacity of the color, the image would have more
or less of a reddish cast to it.
Thank you!
John
John,
rgba coding error...
Change this:
header{
background-color:rgba(240,0,0 0.4);
}
to this:
header{
background-color:rgba(240,0,0,.04);
}
or this:
header{
background-color:rgba(240,0,0,.4);
}
Note the last comma.
Not tested.
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Jun 19, 2013, at 10:31 AM, Karl DeSaulniers k...@designdrumm.com wrote: Tested on safari 6.0.5... background-color: rgba(240,0,0,0.4); althought it looks like rgba(240,0,0,0.2) might be better suited. :) weird…no change for me at all, tho when I refresh, I do see the reduced-opacity red flash for just a second, right before the .jpg loads….. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. HTH — Sent from Mailbox for iPhone On Wed, Jun 19, 2013 at 11:54 AM, COM j...@coffeeonmars.com wrote: On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote: For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. A link to the page in question is here: http://coffeeonmars.com/test/flextest/flextest.html the part I'm talking about is at top, where it says heading one and heading two; behind them in the header is a jpg of what looks like some light texture. in the css is also a background color for that element: a red at 0.4 alpha. my goal is to have the texture image's color influenced by that background color, IOW, by varying the opacity of the color, the image would have more or less of a reddish cast to it. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Jun 19, 2013, at 10:35 AM, Tom Livingston tom...@gmail.com wrote: You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. confirmed…here's what worked for me, aside from David and Karl's correction of my code: To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% just for grins and NOW the influence of that red is taking effect on the PNG texture occupying the same element. link:http://coffeeonmars.com/test/flextest/flextest.html weird…my connection shows the red load first and then s-l-o-w-l-y replace by the texture.. Thank you for the code corrections and ideas about png/opacity Spoze the CSS consortium is considering giving us some photoshop-like layers? Compared to the many other effects CSS is now handling, it doesn't seem far-fetched.. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
Sorry Tom L. Sent this to you instead of the list. Anyway, you need an overlay div if you're trying to simulate layers. Makes for css that is easier to read, in my opinion. Greg -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston Sent: Wednesday, June 19, 2013 10:36 AM To: COM Cc: CSS-Discuss Subject: Re: [css-d] background image AND background color? You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. HTH — Sent from Mailbox for iPhone On Wed, Jun 19, 2013 at 11:54 AM, COM j...@coffeeonmars.com wrote: On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote: For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. A link to the page in question is here: http://coffeeonmars.com/test/flextest/flextest.html the part I'm talking about is at top, where it says heading one and heading two; behind them in the header is a jpg of what looks like some light texture. in the css is also a background color for that element: a red at 0.4 alpha. my goal is to have the texture image's color influenced by that background color, IOW, by varying the opacity of the color, the image would have more or less of a reddish cast to it. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Wed, Jun 19, 2013 at 1:46 PM, COM j...@coffeeonmars.com wrote: confirmed…here's what worked for me./.. To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% just for grins and NOW the influence of that red is taking effect on the PNG texture occupying the same element. link:http://coffeeonmars.com/test/flextest/flextest.html John The red-like color is opaque: no texture whatsoever seen in Windows 7 any browser. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Jun 19, 2013, at 11:43 AM, David Laakso laakso.davi...@gmail.com wrote: The red-like color is opaque: no texture whatsoever seen in Windows 7 any browser. well that blows a hole right through that technique..thank you for telling me that, David. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
You have to set up a special alpha CSS for IE. Also you may need PNG fix for it to work in IE older browsers, but it can be done. just search for transparency in IE and PNG fix for IE HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jun 19, 2013, at 12:46 PM, COM wrote: On Jun 19, 2013, at 10:35 AM, Tom Livingston tom...@gmail.com wrote: You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. confirmed…here's what worked for me, aside from David and Karl's correction of my code: To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% just for grins and NOW the influence of that red is taking effect on the PNG texture occupying the same element. link:http://coffeeonmars.com/test/flextest/flextest.html weird…my connection shows the red load first and then s-l-o-w-l-y replace by the texture.. Thank you for the code corrections and ideas about png/opacity Spoze the CSS consortium is considering giving us some photoshop-like layers? Compared to the many other effects CSS is now handling, it doesn't seem far-fetched.. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image AND background color?
Fiddling with trying to combine a background image with background color applied to the same element and hoping to vary either one or both opacity. Is this possible to do…I guess what I'm looking for is to do with CSS, images and color what you can do with Photoshop layers. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
Background: #cco url('image.png') 0 0 no-repeat;
—
Sent from Mailbox for iPhone
On Tue, Jun 18, 2013 at 8:22 PM, COM j...@coffeeonmars.com wrote:
Fiddling with trying to combine a background image with background color
applied to the same element and hoping to vary either one or both opacity.
Is this possible to do…I guess what I'm looking for is to do with CSS, images
and color what you can do with Photoshop layers.
Thank you!
John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Tue, Jun 18, 2013 at 8:22 PM, COM j...@coffeeonmars.com wrote: Fiddling with trying to combine a background image with background color applied to the same element and hoping to vary either one or both opacity. Is this possible to do…I guess what I'm looking for is to do with CSS, images and color what you can do with Photoshop layers. Thank you! John Anything is possible. Scalable Vector Graphics [svg images], CSS rgba transparency, and CSS linear-gradients --among other contemporary methods ... open a lot of new doors and windows that do not require PhotoShop. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image of entire ul tag change on hover... not the li tags under it?
Hi everyone, I am trying to solve a css puzzle and thought I'd see if I could find help. I am building a navigation that is composed of three ul elements, each with a background image. I would like for the background image to change when the user hovers over anywhere within the ul element, and for the li elements underneath it to change color when they are hovered over. Please check out the attached images and consider the following html: ulPermanent powder liavailable colors/li lihow to use/li lifaq/li liwhere to buy/li liorder now/li /ul When mouse is all-together away from the ul: http://bigen-usa.com/2013stage_v2/_images/samplenav-a.jpg When mouse is over ul and over lihow to use/li: http://bigen-usa.com/2013stage_v2/_images/samplenav-b.jpg Any ideas on how to make this work? Thanks in advance for any insight! - Matthew __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image not appearing
Wait..so…you're saying that the .css document is making the call for the background image and NOT the HTML page? so, if the styles were in the html document head, THEN it would be one up? No, what he is saying is the code you have got is dependent on where exactly your CSS file is located. If it is located in the same folder as your index.html and referenced accrodingly in the index file then it won't find your background image because it is looking for a folder image at the same level. However, by putting the dots and slash infront of the word image then it goes one step up to look for the folder image. Also, make sure that image Image IMAGE. Hope this gives you the idea in a nutshell. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image not appearing
given the code below and that my bricktile.jpg is 1 level up from my
index.html in a folder named image can anyone tell me why my background-image
refuses to appear?
I've been looking at it for half hour and I am baffled. thank you for any clues.
John
body{
font-size:100%;
font-family:Helvetica Neue, Verdana, Arial, sans-serif;
background-image:url(image/bricktile.jpg);
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image not appearing
COM wrote:
given the code below and that my bricktile.jpg is 1 level up from
my index.html in a folder named image can anyone tell me why my
background-image refuses to appear?
Because it is one level up, not one level down.
Philip Taylor
I've been looking at it for half hour and I am baffled. thank you for
any clues.
John
body{ font-size:100%; font-family:Helvetica Neue, Verdana, Arial,
sans-serif; background-image:url(image/bricktile.jpg); }
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ --
http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html Supported by evolt.org --
http://www.evolt.org/help_support_evolt/
--
If I can't see the start of your reply without scrolling, there is a
99.9% probability that your message will be ignored. And if all that I
can see is recycled text from earlier messages in the thread, the
probability will increase to 100%.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image not appearing
Howdy, On Fri, Apr 26, 2013 at 3:50 PM, COM j...@coffeeonmars.com wrote: given the code below and that my bricktile.jpg is 1 level up from my index.html in a folder named image can anyone tell me why my background-image refuses to appear? Have you tried: background-image:url(../image/bricktile.jpg); __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image not appearing
On Apr 26, 2013, at 4:04 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: Have you tried: background-image:url(../image/bricktile.jpg); That works, but I don't get it because for the css, THIS works: css/hwthreestyles.css where css is the folder where the .css file lives. why the leading ../ for the image but not needed for the css? thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image not appearing
Background images are relative to the CSS not the HTML — Sent from Mailbox for iPhone On Fri, Apr 26, 2013 at 7:12 PM, COM j...@coffeeonmars.com wrote: On Apr 26, 2013, at 4:04 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: Have you tried: background-image:url(../image/bricktile.jpg); That works, but I don't get it because for the css, THIS works: css/hwthreestyles.css where css is the folder where the .css file lives. why the leading ../ for the image but not needed for the css? thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image not appearing
On Apr 26, 2013, at 4:14 PM, Tom Livingston tom...@gmail.com wrote: Background images are relative to the CSS not the HTML I get that but here's a screen grab showing that the image is 1 folder up and that the .css file is, too 1 folder up ergo, the same relationship from html file to css file as from html file to image file. Isn't it? Different folders, yes, but 1 up? link: http://coffeeonmars.com/screenshots/imagecsshtml.jpg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image not appearing
On Apr 26, 2013, at 4:26 PM, COM j...@coffeeonmars.com wrote: Background images are relative to the CSS not the HTML Wait..so…you're saying that the .css document is making the call for the background image and NOT the HTML page? so, if the styles were in the html document head, THEN it would be one up? Sorry, I just really need to get this straight in my head, who's lookin for what in this hierarchy.. thank you, John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image not appearing
On Apr 26, 2013, at 4:29 PM, Tom Livingston tom...@gmail.com wrote: Right so you have to back out of the CSS dir then go into the image dir to get your background image, where as the HTML just had to go into the CSS dir to get the sheet. OK..alright…this is a key bit of learning for Johnny today..thank you. J __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image not appearing
Correct — Sent from Mailbox for iPhone On Fri, Apr 26, 2013 at 7:29 PM, COM j...@coffeeonmars.com wrote: On Apr 26, 2013, at 4:26 PM, COM j...@coffeeonmars.com wrote: Background images are relative to the CSS not the HTML Wait..so…you're saying that the .css document is making the call for the background image and NOT the HTML page? so, if the styles were in the html document head, THEN it would be one up? Sorry, I just really need to get this straight in my head, who's lookin for what in this hierarchy.. thank you, John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image Not Showing in IE7/IE8
Hi Isabel,
Thanks for your suggestion but it still didn't work. I guess there is no
difference in writing the rule incrementally since I need the bkg-pattern.png
image to tile and that one must be written last in the rule, when using
multiple background images so I cannot change the order, in order to target the
older browsers. Just don't understand why IE7/8 aren't picking up the image yet
they are picking up the blue background color that was stated in the IE
stylesheet.
Here is my conditional comment in case you were wondering:
!--[if lt IE 9]
link rel=stylesheet type=text/css href=?php
bloginfo('template_directory'); ?/css/ie.css /
![endif]--
Elli Vizcaino
Helping entrepreneurs and businesses build
a brand that helps them engage, delight and
interact more profitably with their customers.
http://www.e7flux.com
From: Isabel Santos unboun...@gmail.com
To: Elli Vizcaino elli...@yahoo.com
Cc: CSS Discuss css-d@lists.css-discuss.org
Sent: Wednesday, November 14, 2012 9:04 PM
Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
Hi Elli,
I cannot find the conditional comment on your code, not on the ie developer
tools, nor on firebug, (I gess it has to do with a onload js script) so I'm
not sure I'm seeing the right css files, but you do not really need a
conditional code for the multiple backgrounds if you write the rule
incrementally.
I can see this code on style.css:
body {
background: url(images/fancy-tag-bkg-med.png) no-repeat center 50px,
url(images/bkg-pattern.png) rgb(146, 212, 210); height: 100%; color:
rgb(255, 255, 255); font-family: Caviar Dreams, Helvetica, Arial,
sans-serif;
}
If you write it as:
body {
background-image: url(images/fancy-tag-bkg-med.png),
(images/bkg-pattern.png);
background-repeat: no-repeat, repeat;
background-position: 50% 50px;
background-color: #92d4d2;
...
}
older browsers, that do not support multiple backgrounds, will still render
the first background.
You can also play with rewriting rules to serve the correct background to
older browsers if the background you want to serve them is not the first in
the rule.
The only drawback of this tecnique is that it is possible some browsers
will download files that wont be used because of the rewriting..
Hope it helps,
isabel
On Wed, Nov 14, 2012 at 9:54 PM, Elli Vizcaino elli...@yahoo.com wrote:
Hello CSS Discuss,
I'm using conditional statement to target an ie specific stylesheet to
browsers IE7 8 since neither of them support CSS3 multiple backgrounds.
While IE7 8 are both picking up the stylesheet's bacgkround color
property it's not loading the background image. I'm not sure why. Maybe my
directory path is wrong? Can someone please help out.
TIA,
Elli Vizcaino
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image Not Showing in IE7/IE8
Am 15.11.2012 15:27 schrieb Elli Vizcaino:
Here is my conditional comment in case you were wondering:
!--[if lt IE 9]
link rel=stylesheet type=text/css href=?php bloginfo('template_directory');
?/css/ie.css /
![endif]--
At the page that you link to, I see this:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=http://www.e7flux.com/wp-content/themes/e7flux?1352988876; /
![endif]--
Are sure you have actually posted the link to the page you have the
problem with?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image Not Showing in IE7/IE8
Hi Markus,
Yes I have. I started to experiment and rewrite the php in the conditional
comment but I've since put it back. You should find the direct url to the IE
stylesheet:
http://www.e7flux.com/wp-content/themes/e7flux/css/ie.css
Elli Vizcaino
Helping entrepreneurs and businesses build
a brand that helps them engage, delight and
interact more profitably with their customers.
http://www.e7flux.com
- Original Message -
From: Markus Ernst derer...@gmx.ch
To: Elli Vizcaino elli...@yahoo.com
Cc: CSS Discuss css-d@lists.css-discuss.org; Isabel Santos
unboun...@gmail.com
Sent: Thursday, November 15, 2012 9:43 AM
Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
Am 15.11.2012 15:27 schrieb Elli Vizcaino:
Here is my conditional comment in case you were wondering:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=?php bloginfo('template_directory');
?/css/ie.css /
![endif]--
At the page that you link to, I see this:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=http://www.e7flux.com/wp-content/themes/e7flux?1352988876; /
![endif]--
Are sure you have actually posted the link to the page you have the problem
with?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image Not Showing in IE7/IE8
On 11/15/2012 9:43 AM, Markus Ernst wrote:
Am 15.11.2012 15:27 schrieb Elli Vizcaino:
Here is my conditional comment in case you were wondering:
!--[if lt IE 9]
link rel=stylesheet type=text/css href=?php
bloginfo('template_directory'); ?/css/ie.css /
![endif]--
At the page that you link to, I see this:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=http://www.e7flux.com/wp-content/themes/e7flux?1352988876; /
![endif]--
Are sure you have actually posted the link to the page you have the
problem with?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Try using absolute path for the background image
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image Not Showing in IE7/IE8
- Original Message -
From: HMW Sales sa...@hallmarcwebsites.com
To: css-d@lists.css-discuss.org
Cc:
Sent: Thursday, November 15, 2012 9:56 AM
Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
On 11/15/2012 9:43 AM, Markus Ernst wrote:
Am 15.11.2012 15:27 schrieb Elli Vizcaino:
Here is my conditional comment in case you were wondering:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=?php bloginfo('template_directory');
?/css/ie.css /
![endif]--
At the page that you link to, I see this:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=http://www.e7flux.com/wp-content/themes/e7flux?1352988876; /
![endif]--
Are sure you have actually posted the link to the page you have the problem
with?
Try using absolute path for the background image
Tried that too and did it again just now. Maybe I'm having a cache problem? Ok
tried something else. I deleted the ie.css file from server and in my header
file within the conditional comments I am calling a stylesheet named
iestyles.css which actually doesn't exist on the server and nothing has
changed. Do you think it's a cache problem or maybe it's my conditional comment?
Elli
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image Not Showing in IE7/IE8
Ok resolved it. Added an absolute path, changed stylesheet name, uploaded it
and it works in IE 7 / 8
Thanks everyone!
Elli
From: Elli Vizcaino elli...@yahoo.com
To: HMW Sales sa...@hallmarcwebsites.com; css-d@lists.css-discuss.org
css-d@lists.css-discuss.org
Sent: Thursday, November 15, 2012 10:14 AM
Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
- Original Message -
From: HMW Sales sa...@hallmarcwebsites.com
To: css-d@lists.css-discuss.org
Cc:
Sent: Thursday, November 15, 2012 9:56 AM
Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
On 11/15/2012 9:43 AM, Markus Ernst wrote:
Am 15.11.2012 15:27 schrieb Elli Vizcaino:
Here is my conditional comment in case you were wondering:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=?php bloginfo('template_directory');
?/css/ie.css /
![endif]--
At the page that you link to, I see this:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=http://www.e7flux.com/wp-content/themes/e7flux?1352988876;; /
![endif]--
Are sure you have actually posted the link to the page you have the
problem
with?
Try using absolute path for the background image
Tried that too and did it again just now. Maybe I'm having a cache problem? Ok
tried something else. I deleted the ie.css file from server and in my header
file within the conditional comments I am calling a stylesheet named
iestyles.css which actually doesn't exist on the server and nothing has
changed. Do you think it's a cache problem or maybe it's my conditional
comment?
Elli
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image Not Showing in IE7/IE8
On 11/15/2012 10:14 AM, Elli Vizcaino wrote:
- Original Message -
From: HMW Sales sa...@hallmarcwebsites.com
To: css-d@lists.css-discuss.org
Cc:
Sent: Thursday, November 15, 2012 9:56 AM
Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
On 11/15/2012 9:43 AM, Markus Ernst wrote:
Am 15.11.2012 15:27 schrieb Elli Vizcaino:
Here is my conditional comment in case you were wondering:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=?php bloginfo('template_directory');
?/css/ie.css /
![endif]--
At the page that you link to, I see this:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=http://www.e7flux.com/wp-content/themes/e7flux?1352988876; /
![endif]--
Are sure you have actually posted the link to the page you have the problem
with?
Try using absolute path for the background image
Tried that too and did it again just now. Maybe I'm having a cache problem? Ok
tried something else. I deleted the ie.css file from server and in my header
file within the conditional comments I am calling a stylesheet named
iestyles.css which actually doesn't exist on the server and nothing has
changed. Do you think it's a cache problem or maybe it's my conditional comment?
Elli
Works fine on my end now. Could be a cache issue, not sure.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image Not Showing in IE7/IE8
Am 15.11.2012 16:14 schrieb Elli Vizcaino:
- Original Message -
From: HMW Sales sa...@hallmarcwebsites.com
To: css-d@lists.css-discuss.org
Cc:
Sent: Thursday, November 15, 2012 9:56 AM
Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
On 11/15/2012 9:43 AM, Markus Ernst wrote:
Am 15.11.2012 15:27 schrieb Elli Vizcaino:
Here is my conditional comment in case you were wondering:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=?php bloginfo('template_directory');
?/css/ie.css /
![endif]--
At the page that you link to, I see this:
!--[if lt IE 9]
link rel=stylesheet type=text/css
href=http://www.e7flux.com/wp-content/themes/e7flux?1352988876; /
![endif]--
Are sure you have actually posted the link to the page you have the problem
with?
Try using absolute path for the background image
Tried that too and did it again just now. Maybe I'm having a cache problem? Ok
tried something else. I deleted the ie.css file from server and in my header
file within the conditional comments I am calling a stylesheet named
iestyles.css which actually doesn't exist on the server and nothing has
changed. Do you think it's a cache problem or maybe it's my conditional comment?
It looks like IE is not finding or not interpreting the stylesheet at
all. To control this, you can do some very obvious change in the IE
stylesheet, such as body {background:yellow} - then you see very well if
the browser gets the stylesheet or not.
I am not quite familiar with the impacts of the media attribute. But I
noticed that in the link element for your main stylesheet you have
media=projection, screen. Maybe you try to add that in the link for
the ie stylesheet, too, or remove it at all.
(Anyway, the stylesheet you provided a link to does not seem to exist:
http://www.e7flux.com/wp-content/themes/e7flux/css/ie.css)
HTH
Markus
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background Image Not Showing in IE7/IE8
Hello CSS Discuss, I'm using conditional statement to target an ie specific stylesheet to browsers IE7 8 since neither of them support CSS3 multiple backgrounds. While IE7 8 are both picking up the stylesheet's bacgkround color property it's not loading the background image. I'm not sure why. Maybe my directory path is wrong? Can someone please help out. TIA, Elli Vizcaino Helping entrepreneurs and businesses build a brand that helps them engage, delight and interact more profitably with their customers. http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image Not Showing in IE7/IE8
Hi Elli,
I cannot find the conditional comment on your code, not on the ie developer
tools, nor on firebug, (I gess it has to do with a onload js script) so I'm
not sure I'm seeing the right css files, but you do not really need a
conditional code for the multiple backgrounds if you write the rule
incrementally.
I can see this code on style.css:
body {
background: url(images/fancy-tag-bkg-med.png) no-repeat center 50px,
url(images/bkg-pattern.png) rgb(146, 212, 210); height: 100%; color:
rgb(255, 255, 255); font-family: Caviar Dreams, Helvetica, Arial,
sans-serif;
}
If you write it as:
body {
background-image: url(images/fancy-tag-bkg-med.png),
(images/bkg-pattern.png);
background-repeat: no-repeat, repeat;
background-position: 50% 50px;
background-color: #92d4d2;
...
}
older browsers, that do not support multiple backgrounds, will still render
the first background.
You can also play with rewriting rules to serve the correct background to
older browsers if the background you want to serve them is not the first in
the rule.
The only drawback of this tecnique is that it is possible some browsers
will download files that wont be used because of the rewriting..
Hope it helps,
isabel
On Wed, Nov 14, 2012 at 9:54 PM, Elli Vizcaino elli...@yahoo.com wrote:
Hello CSS Discuss,
I'm using conditional statement to target an ie specific stylesheet to
browsers IE7 8 since neither of them support CSS3 multiple backgrounds.
While IE7 8 are both picking up the stylesheet's bacgkround color
property it's not loading the background image. I'm not sure why. Maybe my
directory path is wrong? Can someone please help out.
TIA,
Elli Vizcaino
Helping entrepreneurs and businesses build
a brand that helps them engage, delight and
interact more profitably with their customers.
http://www.e7flux.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image not displaying in correct position
On Thu, 2012-03-01 at 20:56 -0800, David Hucklesby wrote:
On 3/1/12 11:36 AM, Erica Cavin wrote:
On this page: http://www.risingstarquilters.org/join_update.html
the small arrow that should appear next to Back to questions
displays far to the left in Chrome and Safari. It displays properly
in Firefox and IE. Any thoughts as to why?
I think that it does not display correctly in Firefox and IE. :\
You are applying the image to the list marker, which I'd expect to be to
the left of the list item and hanging off the edge, as any other list
marker. For some odd reason, Firefox and IE seem to apply the list
marker to the enclosed anchor/link!
I suggest a quick fix:
1. Add float: right; to the rule for li.backquestions
2. Add overflow: hidden; to a rule that targets the enclosing UL.
Example:
#answers ul { overflow: hidden; }
This second step will enclose the floated LI, preserving the spacing.
First, thanks to those who replied. Vince's suggestion to set
list-style-position:inside worked! So I didn't move on to the floating.
But why would floating be used when what I was trying to do is align the
text to the right, not place it next to something else?
Thanks again. It was a small thing but it was really bothering me.
Erica
--
Attic Windows Web Design
http://atticwindowswebdesign.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background image not displaying in correct position
On this page: http://www.risingstarquilters.org/join_update.html the small arrow that should appear next to Back to questions displays far to the left in Chrome and Safari. It displays properly in Firefox and IE. Any thoughts as to why? CSS here: http://www.risingstarquilters.org/styles2.css Thanks! Erica -- Attic Windows Web Design http://atticwindowswebdesign.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image not displaying in correct position
On Fri, Mar 2, 2012 at 3:36 AM, Erica Cavin ecav...@verizon.net wrote: On this page: http://www.risingstarquilters.org/join_update.html the small arrow that should appear next to Back to questions displays far to the left in Chrome and Safari. It displays properly in Firefox and IE. Any thoughts as to why? It looks like IE9 displays the same as Chrome and Safari, but IE8 displays the same as Firefox For starters, it's not a background-image. It's a list-style-image, so the background-position property doesn't have any affect. The list-item is as wide as the block and the text is aligned to the right. It looks like Firefox puts the bullet to the left of the text and the others put it to the left of the block. I hate to say it, but I think Firefox's presentation is wrong in this case. The spec says The marker box is outside the principal block box.. Since the left of the list item's principal block box is all the way over on the left, that's where the bullet should be. For the desired effect, you should set list-style-position:inside. This will have no effect in Firefox, but the others will render the bullet as the first inline box in the principal block box as defined in the spec. Ref: http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com CSS here: http://www.risingstarquilters.org/styles2.css Thanks! Erica -- Attic Windows Web Design http://atticwindowswebdesign.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image not displaying in correct position
On 3/1/12 11:36 AM, Erica Cavin wrote:
On this page: http://www.risingstarquilters.org/join_update.html
the small arrow that should appear next to Back to questions
displays far to the left in Chrome and Safari. It displays properly
in Firefox and IE. Any thoughts as to why?
I think that it does not display correctly in Firefox and IE. :\
You are applying the image to the list marker, which I'd expect to be to
the left of the list item and hanging off the edge, as any other list
marker. For some odd reason, Firefox and IE seem to apply the list
marker to the enclosed anchor/link!
I suggest a quick fix:
1. Add float: right; to the rule for li.backquestions
2. Add overflow: hidden; to a rule that targets the enclosing UL.
Example:
#answers ul { overflow: hidden; }
This second step will enclose the floated LI, preserving the spacing.
HTH
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image not displaying in correct position
This bug was reported in January 2000: https://bugzilla.mozilla.org/show_bug.cgi?id=25291 After twelve years and only 13 comments, I'd guess that no one cares enough to fix it :( -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com On Fri, Mar 2, 2012 at 12:17 PM, Ghodmode ghodm...@ghodmode.com wrote: On Fri, Mar 2, 2012 at 3:36 AM, Erica Cavin ecav...@verizon.net wrote: On this page: http://www.risingstarquilters.org/join_update.html the small arrow that should appear next to Back to questions displays far to the left in Chrome and Safari. It displays properly in Firefox and IE. Any thoughts as to why? It looks like IE9 displays the same as Chrome and Safari, but IE8 displays the same as Firefox For starters, it's not a background-image. It's a list-style-image, so the background-position property doesn't have any affect. The list-item is as wide as the block and the text is aligned to the right. It looks like Firefox puts the bullet to the left of the text and the others put it to the left of the block. I hate to say it, but I think Firefox's presentation is wrong in this case. The spec says The marker box is outside the principal block box.. Since the left of the list item's principal block box is all the way over on the left, that's where the bullet should be. For the desired effect, you should set list-style-position:inside. This will have no effect in Firefox, but the others will render the bullet as the first inline box in the principal block box as defined in the spec. Ref: http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com CSS here: http://www.risingstarquilters.org/styles2.css Thanks! Erica -- Attic Windows Web Design http://atticwindowswebdesign.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background-image needs to display when there is no content
Hello, I have a page that requires a background image to display when there is no content in the div. I have cobbled a transparent gif into the div in order to force the image to display. If the transparent gif is not there, the background image is cropped at the top of the div. I want to lose the transparent gif and achieve this using css. I tried to force the div to display by adding !important; to the css but that didn't work. Here is the effect I am looking for. The paint drips are the background image that needs to display on subsequent pages for continuity: http://www.thehalcyoncore.com After the animation loads subsequent pages should display the graphics statically, without the animation running. Here is the affected page with the background image broken: http://www.thehalcyoncore.com/thc-audios.html Thanks for your help. Norman --- www: http://www.normanfournier.com facebook: http://www.facebook.com/normanfournierdotcom linkedin: http://www.linkedin.com/profile/view?id=18127460 youtube: http://www.youtube.com/user/normanfournier __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background-image needs to display when there is no content
On Mon, Sep 12, 2011 at 9:53 PM, Norman Fournier nor...@normanfournier.comwrote: Hello, I have a page that requires a background image to display when there is no content in the div. I have cobbled a transparent gif into the div in order to force the image to display. If the transparent gif is not there, the background image is cropped at the top of the div. I want to lose the transparent gif and achieve this using css. I tried to force the div to display by adding !important; to the css but that didn't work. Here is the effect I am looking for. The paint drips are the background image that needs to display on subsequent pages for continuity: http://www.thehalcyoncore.com After the animation loads subsequent pages should display the graphics statically, without the animation running. Here is the affected page with the background image broken: http://www.thehalcyoncore.com/thc-audios.html Don't know why you need a transparent gif. However, if you want to remove the bit of paint drips that is seen in the above page, remove the top padding on #main. Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background-image needs to display when there is no content
On 2011-09-12, at 1:59 PM, Chetan Crasta wrote: On Mon, Sep 12, 2011 at 9:53 PM, Norman Fournier nor...@normanfournier.com wrote: Hello, I have a page that requires a background image to display when there is no content in the div. I have cobbled a transparent gif into the div in order to force the image to display. If the transparent gif is not there, the background image is cropped at the top of the div. I want to lose the transparent gif and achieve this using css. I tried to force the div to display by adding !important; to the css but that didn't work. Here is the effect I am looking for. The paint drips are the background image that needs to display on subsequent pages for continuity: http://www.thehalcyoncore.com After the animation loads subsequent pages should display the graphics statically, without the animation running. Here is the affected page with the background image broken: http://www.thehalcyoncore.com/thc-audios.html Don't know why you need a transparent gif. However, if you want to remove the bit of paint drips that is seen in the above page, remove the top padding on #main. Regards, Chetan Crasta Hello, Thanks for looking at that for me. What I would like is for the paint drips to display when there is no text or graphic content in the main div, not to remove them entirely. With a transparent.gif at 10px wide by 400px high the drips display but I don't want to use a transparent.gif at all. Norman --- www: http://www.normanfournier.com facebook: http://www.facebook.com/normanfournierdotcom linkedin: http://www.linkedin.com/profile/view?id=18127460 youtube: http://www.youtube.com/user/normanfournier __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background-image needs to display when there is no content
On Sep 13, 2011, at 5:50 AM, Norman Fournier wrote:
Here is the affected page with the background image broken:
http://www.thehalcyoncore.com/thc-audios.html
Thanks for looking at that for me. What I would like is for the paint drips
to display when there is no text or graphic content in the main div, not to
remove them entirely. With a transparent.gif at 10px wide by 400px high the
drips display but I don't want to use a transparent.gif at all.
Your image is attached to div#main. That div is empty and has a height of 10px
or so (padding-top: 10px) - you specify a height of 100% but that doesn't work
as percentage height on static elements only works if the parent element has a
know height.
If you specify a min-height for that div, your paint-drips will display
correctly.
#main { min-height: 500px; } /* adjust to taste or need*/
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background-image needs to display when there is no content
Thank you Phillipe! that worked beautifully.
Norman
On 2011-09-12, at 6:00 PM, Philippe Wittenbergh wrote:
On Sep 13, 2011, at 5:50 AM, Norman Fournier wrote:
Here is the affected page with the background image broken:
http://www.thehalcyoncore.com/thc-audios.html
Thanks for looking at that for me. What I would like is for the paint drips
to display when there is no text or graphic content in the main div, not to
remove them entirely. With a transparent.gif at 10px wide by 400px high the
drips display but I don't want to use a transparent.gif at all.
Your image is attached to div#main. That div is empty and has a height of
10px or so (padding-top: 10px) - you specify a height of 100% but that
doesn't work as percentage height on static elements only works if the parent
element has a know height.
If you specify a min-height for that div, your paint-drips will display
correctly.
#main { min-height: 500px; } /* adjust to taste or need*/
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
---
www: http://www.normanfournier.com
facebook: http://www.facebook.com/normanfournierdotcom
linkedin: http://www.linkedin.com/profile/view?id=18127460
youtube: http://www.youtube.com/user/normanfournier
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On Jun 29, 2011, at 1:11 AM, Alan Gresley a...@css-class.com wrote:
On 29/06/2011 1:55 PM, John D wrote:
On 29/06/2011 9:01 AM, Tom Livingston wrote:
List,
Is it possible to position a background image on the body of a page so
that the LEFT EDGE of the image is always at 50% of the viewport? Ive
googled a bit but not sure im using the right search terms...
Of course it is possible. put this code for your background:
background: white url(background_image.gif) repeat-y 50% 0;
In the above code everything is self explanatory except the following:
50% === background position x;
0 === background position y;
All that does is positions' the image at the center of the viewport. Tom
wants the _LEFT EDGE_ of the image positioned at 50% of the width of the
viewport. This is possible but you need to also use background-size (or
generated content, see below) which have some unexpected side affects. The
below solutions will work differently but some may or may not be what you are
after. It all depends on what the image is.
body {
background: url(image.jpg) 100% 0% no-repeat;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% 200px;
}
If you are using an image with width and height in absolute values like
pixels and you don't want scaling, then this is another solution.
html::before {
content: url(image.jpg);
position: absolute;
margin-right: -150px; /* equal width of image */
left: 50%;
}
body {
position: relative;
z-index: 1;
}
Thanks Alan and others who responded. I'll give Alan's suggestions a
run-through.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
List, I have a working example of what I am after: http://www.mlinc.com/tl-test/ In a capable browser, you can see how the large bg image is behaving. This is what I am after and I'm using a media query to achieve this. But I have a couple questions for you concerning the background image 1) Is the way I am achieving the effect completely bonkers? Am I overlooking a much simpler way? 2) Is there a better way to achieve what is happening? 3) Providing i'm not doing something completely insane, is it possible to get IE7 and 8 to play nicer (have the bg image not continue behind the content as the viewport decreases below 900px wide)? With a different method? Thanks a lot for your time. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
1) Is the way I am achieving the effect completely bonkers? Am I
overlooking a much simpler way?
That is exactly the way to do what you are trying to do except that I would fix
the image position like this:
#outer-wrap{background: #fff url(../Bokeh.jpg) no-repeat fixed 50% top; }
The altermnative to fixed is scroll but this is not necessary in your case as
you are not repeating the image (x nor y)
2) Is there a better way to achieve what is happening?
Not that I know of except the other respondents made it very scientific and
therefore very complicated IMO.
3) Providing i'm not doing something completely insane, is it possible
to get IE7 and 8 to play nicer (have the bg image not continue behind
the content as the viewport decreases below 900px wide)? With a
different method?
To make it liquid, use percentages instead of px. Try a width of 90% for
outer-wrap and remove the width for other divs.
You also need to make sure it validates because you don't have an opening
head and also an opening body. Always use the validation service just to
iron out basic mistakes and unbalanced html/css tags.
My 2 pence worth.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On 6/29/11 4:31 PM, Tom Livingston wrote: List, I have a working example of what I am after: http://www.mlinc.com/tl-test/ Keep it simple. And readable on landing. markup http://chelseacreekstudio.com/mmm.htm css http://chelseacreekstudio.com/mmm_files/style000.css Folds to 400 in FF, Safari, Opera, and Chrome. Folds to 600 in IE 7/8. IE 9 not checked. Not corrected for nor checked in IE 6. ~d -- http://chelseacreekstudio.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On Wed, Jun 29, 2011 at 6:04 PM, John D xfs...@hotmail.com wrote:
1) Is the way I am achieving the effect completely bonkers? Am I
overlooking a much simpler way?
That is exactly the way to do what you are trying to do except that I would
fix the image position like this:
#outer-wrap{background: #fff url(../Bokeh.jpg) no-repeat fixed 50% top; }
The altermnative to fixed is scroll but this is not necessary in your case as
you are not repeating the image (x nor y)
2) Is there a better way to achieve what is happening?
Not that I know of except the other respondents made it very scientific and
therefore very complicated IMO.
3) Providing i'm not doing something completely insane, is it possible
to get IE7 and 8 to play nicer (have the bg image not continue behind
the content as the viewport decreases below 900px wide)? With a
different method?
To make it liquid, use percentages instead of px. Try a width of 90% for
outer-wrap and remove the width for other divs.
You also need to make sure it validates because you don't have an opening
head and also an opening body. Always use the validation service just to
iron out basic mistakes and unbalanced html/css tags.
My 2 pence worth.
I fixed the missing opening head, embarrassingly, but I see no issue
with the opening body. It's in conditional comments.
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
Keep it simple. And readable on landing. markup http://chelseacreekstudio.com/mmm.htm css http://chelseacreekstudio.com/mmm_files/style000.css Folds to 400 in FF, Safari, Opera, and Chrome. Folds to 600 in IE 7/8. IE 9 not checked. Not corrected for nor checked in IE 6. ~d While I appreciate your time, I was not looking to change the way the page reacts to the viewport, just whether or not there is a better way to do what I was already doing and if it is possible to have IE7 and 8 react the same way as capable browsers. Thanks again for your time. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
While I appreciate your time, I was not looking to change the way the
page reacts to the viewport, just whether or not there is a better way
to do what I was already doing and if it is possible to have IE7 and 8
react the same way as capable browsers.
I think Lasko got it dead right. You can also try to investigate the
possibility of creating two divs of 50% each like this:
div id=headerheader/div
div id=wrapper
div id=leftLeft/div
div id=rightRight/div
/div
div id=footerfooter/div
The DIVS left and Right would be left floated to make them display side by side
and the width of each is 50%. The rough and dirty CSS looks like this:
#wrapper {
width: 900px;
height: 90%;
margin: 0 auto;
text-align: left;
height: 100%;
}
#left {
width: 46%;
margin: 2%;
float: left;
}
#right {
width: 50%;
float: left;
margin: 2% 0;
background-image: url('http://www.mlinc.com/tl-test/Bokeh.jpg');
}
#footer {
clear: left;
width: 900px;
height: 5%;
margin: 0 auto;
text-align: center;
}
The CSS and layout can be improved dramatically but I leave it to you to think
about this. Lasko's method is pretty neat.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On 30/06/2011 6:31 AM, Tom Livingston wrote: List, I have a working example of what I am after: http://www.mlinc.com/tl-test/ In a capable browser, you can see how the large bg image is behaving. This is what I am after and I'm using a media query to achieve this. But I have a couple questions for you concerning the background image 1) Is the way I am achieving the effect completely bonkers? Am I overlooking a much simpler way? Possibly yes and possibly no to the former and later. There is an issue with accessibly where someone who can only use a keyboard. First they must tab to the inner overflow section, scroll down with the arrows and once they reach the bottom of what is hidden in the outer overflow (the viewport), they must tab to get this into focus, use the arrows keys to scroll to the overflowing portion in the viewport, then press tab again to return to the inner overflow so again they can use the arrow key to scroll the inner overflow. Now if the content of the inner overflow is very long, this procedure has to be done over and over. They may even decide to return to the top of the content and in which case they have to do the reverse. It your choice if you think this is wise. Also, do you want this to happen? http://css-class.com/x/tom.png 2) Is there a better way to achieve what is happening? Depends on what you want to happen in respect to the above two issues. The later is solved my using min-width on a container div that contain the header 'div#outer-wrap' and the footer. 3) Providing i'm not doing something completely insane, is it possible to get IE7 and 8 to play nicer (have the bg image not continue behind the content as the viewport decreases below 900px wide)? With a different method? Thanks a lot for your time. You need to Google this string 'html5 elements ie8 ie7' (not quoted) or wait for someone to give the solution offlist since it involves JS. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background image position
List, Is it possible to position a background image on the body of a page so that the LEFT EDGE of the image is always at 50% of the viewport? Ive googled a bit but not sure im using the right search terms... TIA -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
Of course it is possible. put this code for your background: background: white url(background_image.gif) repeat-y 50% 0; In the above code everything is self explanatory except the following: 50% === background position x; 0 === background position y; List, Is it possible to position a background image on the body of a page so that the LEFT EDGE of the image is always at 50% of the viewport? Ive googled a bit but not sure im using the right search terms... __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On Wed, Jun 29, 2011 at 4:31 AM, Tom Livingston tom...@gmail.com wrote: Is it possible to position a background image on the body of a page so that the LEFT EDGE of the image is always at 50% of the viewport? Ive googled a bit but not sure im using the right search terms... background: url(image.png) no-repeat 50% 0; The above CSS will cause the image to be centered. For the *left edge* to be at the center, you need to double the width of the image by adding a transparent region on the left. For example, if you have an image of width 200px, using an image editor add a 200px transparent region to the left of the image. The new width of the image will be 400px. Now apply the above CSS to align the left edge of the image to the center of the viewport. Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On 29/06/2011 1:55 PM, John D wrote:
On 29/06/2011 9:01 AM, Tom Livingston wrote:
List,
Is it possible to position a background image on the body of a page so
that the LEFT EDGE of the image is always at 50% of the viewport? Ive
googled a bit but not sure im using the right search terms...
Of course it is possible. put this code for your background:
background: white url(background_image.gif) repeat-y 50% 0;
In the above code everything is self explanatory except the following:
50% === background position x;
0 === background position y;
All that does is positions' the image at the center of the viewport. Tom
wants the _LEFT EDGE_ of the image positioned at 50% of the width of the
viewport. This is possible but you need to also use background-size (or
generated content, see below) which have some unexpected side affects.
The below solutions will work differently but some may or may not be
what you are after. It all depends on what the image is.
body {
background: url(image.jpg) 100% 0% no-repeat;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% 200px;
}
If you are using an image with width and height in absolute values like
pixels and you don't want scaling, then this is another solution.
html::before {
content: url(image.jpg);
position: absolute;
margin-right: -150px; /* equal width of image */
left: 50%;
}
body {
position: relative;
z-index: 1;
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image rendering issue - a safari bug for iPad or CSS ?
Philipe, Thank you. And that is exactly how CSS is designed to work. You outer boxes (static, inflow boxes) are as wide as the viewport, OK, I fully get it now. This is the first layout I ever did that goes beyond 980px (thus the cut off part is not something I saw before in iPad/iPhone), then there were confusion on viewport, device width and expectation on how iOS Safari downsize works. Still I have one question: you mentioned 100% for outer divs are not necessary - but this is what I thought how iOS Safari downsize works, that it shrinks everything inside the 100% to viewport size, meaning the 100% width for outer box is the starting point for the browser to calculate the content within, so the 1014 is not the 1014 but in relation to the width of the outer box. If my outer box has a width of 95%, the 1014px will be calculated based on the 95%. Also, if it can't downsize correctly due to Pixel not being relative unit, should we not expect it will downsize to viewport if relative unit declare? But I don't see this happening. and don't expand because one inner container is set to be wider. Instead, the wider box will overflow (on a desktop browser, you'll see a horizontal scrollbar). The viewport is similarly just a static, inflow block box that won't expand because the content is wider. [1] here is an absolutely minimal reduction of your page: http://dev.l-c-n.com/_temp/tee2.html Open in any recent desktop browser, and scroll to the right, look at the background-colors. ) I assume your desktop monitor is less than 4000px wide (or that your browser window is not full screen) … I didn't try to narrow the desktop browser window until this email of yours arrived. The first reply of your, didn't arrived at my desktop computer but iPad's Mail, and I forgot to check it the next day from desktop's browser. I can see it clearly the background images got cut off when the window is narrower than 1014px. Another test case: you don't expect the lime green box to expand, do you ? http://dev.l-c-n.com/_temp/tee3.html The two examples' structure where widths are concerned in the divs' order are not quite the same as mine but you made the point. No, I don't. The overflow:hidden that I use so very often has fooled me thinking what I always saw is the correct browser behavior :) tee Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image rendering issue - a safari bug for iPad or CSS ?
On Jun 11, 2011, at 10:42 AM, tee wrote:
Still I have one question: you mentioned 100% for outer divs are not
necessary - but this is what I thought how iOS Safari downsize works, that
it shrinks everything inside the 100% to viewport size, meaning the 100%
width for outer box is the starting point for the browser to calculate the
content within, so the 1014 is not the 1014 but in relation to the width of
the outer box. If my outer box has a width of 95%, the 1014px will be
calculated based on the 95%.
Also, if it can't downsize correctly due to Pixel not being relative unit,
should we not expect it will downsize to viewport if relative unit declare?
But I don't see this happening.
width:100% won't change anything, it will only say: make this block as wide as
the width of the parent block (in this case body the root element). That is
the default behaviour for block level elements, as noted earlier. And it won't
really help iOS devices scale your content.
And it doesn't say much about the width of descendant element.
In your case, you could avoid the issue by giving a min-width to your outermost
wrapper, say #sitewrap { min-width: 1024px }
(the way Mobile Safari computes the scaling is of course more complicated, as
it based on the whole page)
That is why you have the 'viewport' meta element, to give Mobile Safari a
guideline on how to go about scaling, or tell it not to scale
(viewport=device-width).
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image rendering issue - a safari bug for iPad or CSS ?
Philippe,
Thanks for checking.
That is what I would expect :-)
Unless specified MobileSafari assumes a viewport width of 980px. In your
case, the page overflows (#container being 1014 wide).
But iOS Safari able to resize (downsize) a webpage to its viewport when no
viewport declared. Why is it not the background image? You probably has already
noticed, the contents are downsized to fit the viewport 768; also for landscape
view, the viewport is 1024, and since the container that holds the bg image is
1024 it shouldn't cut off the image, but it does. This is the reason I thought
it's a bug.
Tee
2.With viewport which includes a media queries for portrait, the
landscape view renders correctly (no media queries )
meta content=width=device-width; initial-scale=1.0; name=viewport
http://jsbin.com/apeti4/10/
I serve a 768px wide background for portrait view but it's not working
correctly, the bg image shows up fine but not the page's layout, the page
doesn't scale down like #1, furthermore, desktop safari is picking up this
queries.
@media all and (orientation:portrait) {
#container-wrap{width:100%;text-align: left;background:transparent
url(bg-hdr-768.jpg) no-repeat center top;}
#container, .quick-access-wrap{width:99%}
#content, #footer, {width:100%}
}
Normal that desktopSafari would pick that query up, assuming that your
browser window is taller than wider.
Normal that Mobile Safari won't scale your design (that is what
initial-scale=1.0 does)
and thus again, that overflow.
3. Same as above except desktop Safari.
@media only screen and (device-width: 768px)
http://jsbin.com/iziqi3
@media only screen and (device-width: 768px) {
#container-wrap{width:100%;text-align: left;background:transparent
url(bg-hdr-768.jpg) no-repeat center top;}
#container, .quick-access-wrap{width:99%}
#content, #footer, {width:100%}
}
Same as above
4. background-size treatment
with 100% auto; it shrinks (to 50% of original size I think) and with
100% 100%; it doubles the size (no screenshot example for this).
The first one is the correct behaviour, the second one I'm not sure I
understand, I'd ned to test.
—
All this has nothing to do with a background image, and everything with the
concept of viewport. You could reproduce the same issues width a desktop
browser. Open any of your pages in desktop Safari or Firefox, with a window
width of, say, 600px. Then scroll to view your content to the right. See how
your background is not present ?
maybe just this:
meta name=viewport content=width=1024px;
or a variant there of.
(tested with your http://jsbin.com/aholi4/ on my local server - I removed the
'width:100%' on #sitewrap and #container-wrap, both which are completely
un-needed)
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image rendering issue - a safari bug for iPad or CSS ?
On Jun 9, 2011, at 9:26 PM, Tee wrote: But iOS Safari able to resize (downsize) a webpage to its viewport when no viewport declared. Why is it not the background image? You probably has already noticed, the contents are downsized to fit the viewport 768; Oh but Mobile Safari downsized your page all right, to its viewport width of 980px; but then that downsized page overflows, and cause the gap you noticed. Mobile Safari is kind enough to show everything what's on your page, without clipping. Luckily, as otherwise some contents maybe inaccessible, due to your use of overflow:hidden. also for landscape view, the viewport is 1024, and since the container that holds the bg image is 1024 it shouldn't cut off the image, but it does. This is the reason I thought it's a bug. Wrong, the viewport is still 980px (unless otherwise specified); don't confuse it with device width / height. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image rendering issue - a safari bug for iPad or CSS ?
Philippe, Oh but Mobile Safari downsized your page all right, to its viewport width of 980px; but then that downsized page overflows, and cause the gap you noticed. Mobile Safari is kind enough to show everything what's on your page, without clipping. Luckily, as otherwise some contents maybe inaccessible, due to your use of overflow:hidden. I needed the overflow:hidden to make the bg image shows up. In my early test, I did consider this maybe the cause but my tests showed that it wasn't the case. It's absolutely possible I overlooked and still not seeing the obvious with the newest test which has the overflow:hidden. I even changed the 1014px to 63.375em hoping Mobile Safari is kinder to em unit. http://jsbin.com/iyedi3/ (no viewport nor media queries) The layout uses quite a number of absolute positioning with relative positions for the their wrapper divs, maybe this causes the issue? also for landscape view, the viewport is 1024, and since the container that holds the bg image is 1024 it shouldn't cut off the image, but it does. This is the reason I thought it's a bug. Wrong, the viewport is still 980px (unless otherwise specified); don't confuse it with device width / height. Alright. Good reminder! However from what is presented in the iPad Safari, I am still not convinced this is the overflow issue for two reasons: 1) The 1500px background is outside the #container which has 1014px width and previously with overflow:hidden. It belongs to #container-wrap which has a 100% width. 2) In my previous test (http://jsbin.com/aholi4/) which contained the overflow:hidden, in which the upper top green bar is a repeated background image with 100% width declared, and belongs to #sitewrap, which you commented unnecessary, so in the newest test I removed the 100%. Both the #container-wrap and #sitewrap are the the outer divs for #container, so they should not be cut off in my understand of how CSS works. Thanks! tee Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image rendering issue - a safari bug for iPad or CSS ?
On Jun 10, 2011, at 8:29 AM, weblist99 wrote: Alright. Good reminder! However from what is presented in the iPad Safari, I am still not convinced this is the overflow issue for two reasons: 1) The 1500px background is outside the #container which has 1014px width and previously with overflow:hidden. It belongs to #container-wrap which has a 100% width. 2) In my previous test (http://jsbin.com/aholi4/) which contained the overflow:hidden, in which the upper top green bar is a repeated background image with 100% width declared, and belongs to #sitewrap, which you commented unnecessary, so in the newest test I removed the 100%. Both the #container-wrap and #sitewrap are the the outer divs for #container, so they should not be cut off in my understand of how CSS works. 1. The fact that you specified 'overflow: hidden' on one container doesn't relate to your original issue at all. It would just make it harder (not impossible) for the iPad user to scroll to the right part of that container if it where clipped by the right edge of the device. 2. Did you try, as I suggested in my original reply, to open your page in a ~600px wide window on desktop Safari / Firefox / Chrome / IE 8+ ? And scroll to the right ? You'll see exactly the same issue as what you see on your iPad… [1]. And that is exactly how CSS is designed to work. You outer boxes (static, inflow boxes) are as wide as the viewport, and don't expand because one inner container is set to be wider. Instead, the wider box will overflow (on a desktop browser, you'll see a horizontal scrollbar). The viewport is similarly just a static, inflow block box that won't expand because the content is wider. [1] here is an absolutely minimal reduction of your page: http://dev.l-c-n.com/_temp/tee2.html Open in any recent desktop browser, and scroll to the right, look at the background-colors. ) I assume your desktop monitor is less than 4000px wide (or that your browser window is not full screen) … Another test case: you don't expect the lime green box to expand, do you ? http://dev.l-c-n.com/_temp/tee3.html Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image rendering issue - a safari bug for iPad or CSS ?
Anybody here more experience with CSS issue for iPad? I am running out of idea
what might be the cause for this but to think it's a Safari rendering bug in
iOS..
In the examples below, the page uses a 1500px wide background image, and it has
this structure to make the visual displays properly.
div id=sitewrap --100% width with repeated bg imgage
div id=container-wrap --100% width with bg-hdr-1500.jpg
div id=container -- width:1014px
I need to keep the zoom feature enabled for iPad device, and ideally I want no
viewport nor media queries treatment, and if this is not possible (my tests
show that this is the case), I want to target the portrait view only (with the
condition that no futher treatment is needed for landscape view)
1. With no viewport nor media queries, the #container-wrap bg image got
cut off in both landscape and portrait.
http://jsbin.com/aholi4/
2. With viewport which includes a media queries for portrait, the
landscape view renders correctly (no media queries )
meta content=width=device-width; initial-scale=1.0; name=viewport
http://jsbin.com/apeti4/10/
I serve a 768px wide background for portrait view but it's not working
correctly, the bg image shows up fine but not the page's layout, the page
doesn't scale down like #1, furthermore, desktop safari is picking up this
queries.
@media all and (orientation:portrait) {
#container-wrap{width:100%;text-align: left;background:transparent
url(bg-hdr-768.jpg) no-repeat center top;}
#container, .quick-access-wrap{width:99%}
#content, #footer, {width:100%}
}
3. Same as above except desktop Safari.
@media only screen and (device-width: 768px)
http://jsbin.com/iziqi3
@media only screen and (device-width: 768px) {
#container-wrap{width:100%;text-align: left;background:transparent
url(bg-hdr-768.jpg) no-repeat center top;}
#container, .quick-access-wrap{width:99%}
#content, #footer, {width:100%}
}
4. background-size treatment
with 100% auto; it shrinks (to 50% of original size I think) and with 100%
100%; it doubles the size (no screenshot example for this).
background-size treatment affects both landscape and portrait.
http://jsbin.com/uworu3/
!-- bacgkround image ( bg-hdr-1500.jpg) loads from the desktop style --
#container-wrap{
width:100%;background-position: center top;
-webkit-background-size:100% auto;
-moz-background-size:100% auto;
-o-background-size:100% auto;}
Thanks!
tee
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image rendering issue - a safari bug for iPad or CSS ?
On Jun 9, 2011, at 11:07 AM, tee wrote:
1.With no viewport nor media queries, the #container-wrap bg image got
cut off in both landscape and portrait.
http://jsbin.com/aholi4/
That is what I would expect :-)
Unless specified MobileSafari assumes a viewport width of 980px. In your case,
the page overflows (#container being 1014 wide).
2.With viewport which includes a media queries for portrait, the
landscape view renders correctly (no media queries )
meta content=width=device-width; initial-scale=1.0; name=viewport
http://jsbin.com/apeti4/10/
I serve a 768px wide background for portrait view but it's not working
correctly, the bg image shows up fine but not the page's layout, the page
doesn't scale down like #1, furthermore, desktop safari is picking up this
queries.
@media all and (orientation:portrait) {
#container-wrap{width:100%;text-align: left;background:transparent
url(bg-hdr-768.jpg) no-repeat center top;}
#container, .quick-access-wrap{width:99%}
#content, #footer, {width:100%}
}
Normal that desktopSafari would pick that query up, assuming that your browser
window is taller than wider.
Normal that Mobile Safari won't scale your design (that is what
initial-scale=1.0 does)
and thus again, that overflow.
3. Same as above except desktop Safari.
@media only screen and (device-width: 768px)
http://jsbin.com/iziqi3
@media only screen and (device-width: 768px) {
#container-wrap{width:100%;text-align: left;background:transparent
url(bg-hdr-768.jpg) no-repeat center top;}
#container, .quick-access-wrap{width:99%}
#content, #footer, {width:100%}
}
Same as above
4. background-size treatment
with 100% auto; it shrinks (to 50% of original size I think) and with 100%
100%; it doubles the size (no screenshot example for this).
The first one is the correct behaviour, the second one I'm not sure I
understand, I'd ned to test.
—
All this has nothing to do with a background image, and everything with the
concept of viewport. You could reproduce the same issues width a desktop
browser. Open any of your pages in desktop Safari or Firefox, with a window
width of, say, 600px. Then scroll to view your content to the right. See how
your background is not present ?
maybe just this:
meta name=viewport content=width=1024px;
or a variant there of.
(tested with your http://jsbin.com/aholi4/ on my local server - I removed the
'width:100%' on #sitewrap and #container-wrap, both which are completely
un-needed)
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image randomly showing in IE6 and IE7
Hi Chetan,
Thanks, but this doesn't solve the problem. Image is still randomly
showing/not showing :(
Anything else I could try?
Thanks,
Albert
On 10-12-2010 14:33, Chetan Crasta wrote:
You have to give div#rightbackground hasLayout. You can use the
proprietary zoom:1 to do this:
!--[if lte IE7]
style type=text/css
div#rightbackground
{
zoom:1;
}
/style
![endif]--
~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image randomly showing in IE6 and IE7
Thanks, but this doesn't solve the problem. Image is still randomly showing/not showing :( Anything else I could try? Sorry about that. It worked when I applied zoom using the web developer tool. I noticed that div#rightbackground is empty and has a min-height of 854px. Did you try height: 854px ? Also, instead of having a separate div for the background image, why don't you put it in the body or div#container or div#view? You could use background: url(image.jpg) top right; ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image randomly showing in IE6 and IE7
Ok, I think it is fixed: http://roughtech.com/t/debannehome.html I put the background image in the div#container (look at the inline style). ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image randomly showing in IE6 and IE7
Hi Chetan, Thank's a lot for your feedback! Your solution seems to work better, although I didn't yet test it in all browsers. Will let you know what the results are :) Thanks again, Albert On 13-12-2010 15:38, Chetan Crasta wrote: Ok, I think it is fixed: http://roughtech.com/t/debannehome.html I put the background image in the div#container (look at the inline style). ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background image randomly showing in IE6 and IE7
Hi all,
Please have a look at this site: http://www.debanne.nl/
For some reason the large background photo on the right sometimes shows
and sometimes not in IE6 and IE7. There are different pictures on every
page which is accomplished by overruling the css with an extra style
element in the header (generated by the CMS):
styletype=text/css media=screen#rightbackground {
background-image:url(uploads/media/hp-foto-new.jpg); }/style
Any idea what causes this?
Thanks,
Albert
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image randomly showing in IE6 and IE7
You have to give div#rightbackground hasLayout. You can use the
proprietary zoom:1 to do this:
!--[if lte IE7]
style type=text/css
div#rightbackground
{
zoom:1;
}
/style
![endif]--
~Chetan
On Fri, Dec 10, 2010 at 5:23 PM, Albert van der Veen
albert.lijs...@xs4all.nl wrote:
Hi all,
Please have a look at this site: http://www.debanne.nl/
For some reason the large background photo on the right sometimes shows and
sometimes not in IE6 and IE7. There are different pictures on every page
which is accomplished by overruling the css with an extra style element in
the header (generated by the CMS):
styletype=text/css media=screen#rightbackground {
background-image:url(uploads/media/hp-foto-new.jpg); }/style
Any idea what causes this?
Thanks,
Albert
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image - repeat, flip horizontal and vertically
Hi, Ok I have an image for my background. It's repeating but because it's not a tiling pattern it looks odd if you are zoomed out so far that you can't see it. One option could be to remove the repeating and have some kind of effect, e.g. gradient, that dissolves the image into a suitable background colour. But I don't really want to do that. What I'd like is to flip the image horizontally and vertically when it is repeated so that the images are seamless (mirrored). I have found some CSS that will flip an image but not that's not really what I want. I think it's going to involve some javascript and CSS so can anyone help with pointers? TY, CB __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image - repeat, flip horizontal and vertically
Hi, Since that took a while I have done some research. Flipping it seems impossible so I went for the 100% width, maintain aspect ratio idea. The answer isn't great here too but there is some hope in the way of CSS3 background-size: 100%; (that will keep the aspect ratio). Only supported by Safari, there is a firefox one (-mozilla blah blah blah) but I couldn't get it to work. It'll need javascript but I couldn't even find an answer with that that didn't involve adding wrappers, even tables!. Case closed :-( BR, CB On 13/07/2010, at 5:22 PM, Chris Blake wrote: Hi, Ok I have an image for my background. It's repeating but because it's not a tiling pattern it looks odd if you are zoomed out so far that you can't see it. One option could be to remove the repeating and have some kind of effect, e.g. gradient, that dissolves the image into a suitable background colour. But I don't really want to do that. What I'd like is to flip the image horizontally and vertically when it is repeated so that the images are seamless (mirrored). I have found some CSS that will flip an image but not that's not really what I want. I think it's going to involve some javascript and CSS so can anyone help with pointers? TY, CB __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image - repeat, flip horizontal and vertically
On Tuesday, July 13, 2010 7:24:41 am Chris Blake wrote: Hi, Since that took a while I have done some research. Flipping it seems impossible so I went for the 100% width, maintain aspect ratio idea. The answer isn't great here too but there is some hope in the way of CSS3 background-size: 100%; (that will keep the aspect ratio). Only supported by Safari, there is a firefox one (-mozilla blah blah blah) but I couldn't get it to work. It'll need javascript but I couldn't even find an answer with that that didn't involve adding wrappers, even tables!. Case closed :-( What about just doubling the image? Go into any simple graphics program, select all, copy, make the image bigger, paste, flip, and then you have something you can repeat. It would make the image twice as big, which could be a problem depending on your target audience's bandwidth. But it would be a lot easier than the other options you presented. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
