Re: [css-d] Background images for element within MQ ?

[Tom Livingston]

No. This...

body {
 background-image: url('my300pximage.jpg');
}

@media and (min-width: 700px) {
 body {
  background-image: url('my700pximage.jpg');
 }
}

...is not Sass, but it does what you described.


-- 

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 images for element within MQ ?

[Crest Christopher]

Yes, knowing that SaSS is the solution ;-)

Tom Livingston wrote:
>
> On Fri, Aug 5, 2016 at 3:05 PM, Chris Rockwell 
> wrote:
>
>>
>> If I understand you correctly, no.
>>
>> You can do:
>> body {
>>   background-image: url('my300pximage.jpg');
>> }
>> @media and (min-width: 700px) {
>>   body {
>> background-image: url('my700pximage.jpg');
>>   }
>> }
>>
>
>
>
> This accomplishes what you were describing.
>
__
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 images for element within MQ ?

[Tom Livingston]

On Fri, Aug 5, 2016 at 3:05 PM, Chris Rockwell 
wrote:

> If I understand you correctly, no.
>
> You can do:
> body {
>   background-image: url('my300pximage.jpg');
> }
> @media and (min-width: 700px) {
>   body {
> background-image: url('my700pximage.jpg');
>   }
> }
>


This accomplishes what you were describing.


-- 

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 images for element within MQ ?

[Chris Rockwell]

Note that it still compiles to the first example.

On Fri, Aug 5, 2016 at 3:18 PM Crest Christopher 
wrote:

> I knew probably SaSS could do it although I don't use SaSS atleast I was
> right ;-)
>
> Chris Rockwell wrote:
>
>
> If I understand you correctly, no.
>
> You can do:
> body {
>   background-image: url('my300pximage.jpg');
> }
> @media and (min-width: 700px) {
>   body {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> With sass you can do this:
> body {
>   background-image: url('my300pximage.jpg');
>   @media and (min-width: 700px) {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> On Fri, Aug 5, 2016 at 3:02 PM Crest Christopher
>
> > wrote:
>
> Is it possible to do conditions within a rule for an element;
>
>p; similar to
>
>
> MQ.  For example, you may have a break point that if the screen is
> 300px
> and 700px then a background image of 300px width or close will be
> displayed, otherwise a background image of a 700px width will be
> displayed ?
> __
> 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 images for element within MQ ?

[Crest Christopher]

I knew probably SaSS could do it although I don't use SaSS atleast I was
right ;-)

Chris Rockwell wrote:
>
> If I understand you correctly, no.
>
> You can do:
> body {
>   background-image: url('my300pximage.jpg');
> }
> @media and (min-width: 700px) {
>   body {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> With sass you can do this:
> body {
>   background-image: url('my300pximage.jpg');
>   @media and (min-width: 700px) {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> On Fri, Aug 5, 2016 at 3:02 PM Crest Christopher
> > wrote:
>
> Is it possible to do conditions within a rule for an element;
> similar to
> MQ.  For example, you may have a break point that if the screen is
> 300px
> and 700px then a background image of 300px width or close will be
> displayed, otherwise a background image of a 700px width will be
> displayed ?
> __
> 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 images for element within MQ ?

[Chris Rockwell]

If I understand you correctly, no.

You can do:
body {
  background-image: url('my300pximage.jpg');
}
@media and (min-width: 700px) {
  body {
background-image: url('my700pximage.jpg');
  }
}

With sass you can do this:
body {
  background-image: url('my300pximage.jpg');
  @media and (min-width: 700px) {
background-image: url('my700pximage.jpg');
  }
}

On Fri, Aug 5, 2016 at 3:02 PM Crest Christopher 
wrote:

> Is it possible to do conditions within a rule for an element; similar to
> MQ.  For example, you may have a break point that if the screen is 300px
> and 700px then a background image of 300px width or close will be
> displayed, otherwise a background image of a 700px width will be
> displayed ?
> __
> 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 images for element within MQ ?

[Crest Christopher]

Is it possible to do conditions within a rule for an element; similar to
MQ.  For example, you may have a break point that if the screen is 300px
and 700px then a background image of 300px width or close will be
displayed, otherwise a background image of a 700px width will be
displayed ?
__
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

[Karl DeSaulniers]

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

[Jukka K. Korpela]

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

[Philip Taylor]

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

[Barney Carroll]

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

[Tom Livingston]

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

[Wade Smart]

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

[Tom Livingston]

 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

[Philip Taylor]

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

[Tom Livingston]

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

[Philip Taylor]

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

[Tom Livingston]

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

[John Andrews]

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

[Crest Christopher]

   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

[Jukka K. Korpela]

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

[Karl DeSaulniers]

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

[Tim Dawson]

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

[Rachel Mawhood]

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

[Chris Rockwell]

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

[Eric]

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

[Chris Rockwell]

 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

[Tim Dawson]

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

[David Hucklesby]

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

[Chris Rockwell]

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

[Jon Reece]

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

[Chris Rockwell]

 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

[Tim Dawson]

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 doesn't show up on iOS

[nom nom nom]

Thanks Chris,

I know what you're talking about. What I did was I have an image that's
partially transparent, and then I set a bg color which shows behind it. The
js that I assume you speak of was setting an initial bgcolor. Subsequently,
the bgcolor is changed as you mouseover the menu items. I have removed the
initial jquery color, which means that CSS alone should be controlling
bgimage on page load. But I still don't see the image on iOS.

Oddly, I have never had a problem seeing it on Safari Mac -- that was one
of the first things I checked. Still works fine.

Any other ideas?

Thanks
josh
__
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 doesn't show up on iOS

[Chris Williams]

Just grasping at straws here, but I wonder if Safari is getting confused
by setting an image, and then later changing the color (which overrides
the inherent transparent of the background)??  Maybe if you tested
making that JS code that specifies the changing color also respecify the
image spec again (e.g. style=background: # url('bg.gif') x y)???
Again just a toss in the dark?

On 1/15/14 1:33 PM, nom nom nom snackdetec...@gmail.com wrote:

Thanks Chris,

I know what you're talking about. What I did was I have an image that's
partially transparent, and then I set a bg color which shows behind it.
The
js that I assume you speak of was setting an initial bgcolor.
Subsequently,
the bgcolor is changed as you mouseover the menu items. I have removed the
initial jquery color, which means that CSS alone should be controlling
bgimage on page load. But I still don't see the image on iOS.

Oddly, I have never had a problem seeing it on Safari Mac -- that was one
of the first things I checked. Still works fine.

Any other ideas?

Thanks
josh
__
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 doesn't show up on iOS

[Karl DeSaulniers]

On Jan 11, 2014, at 5:42 PM, nom nom nom snackdetec...@gmail.com wrote:

 http://bit.ly/1dcFzaf
 
 My page background shows up in chrome  safari on my computer, also works
 in android. Doesn't load in safari or the Perfect Browser in iOS 5 or 7.
 
 Can anyone help me understand why?
 
 Thanks in advance for your eyes!
 
 josh

Josh,
I checked it on safari on my iphone5 with 7.0.4 with safari dev tools on my 
desktop and it looks like safari mobile doesn't like your gif file.
Try re-exporting it or try changing it to a png. My guess is that whatever 
compression you did on the gif, safari mobile doesn't like.

Best,

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 doesn't show up on iOS

[+josh+]

Thanks, that did it! 
Josh 



 On Jan 15, 2014, at 5:22 PM, Karl DeSaulniers k...@designdrumm.com wrote:
 
 
 On Jan 11, 2014, at 5:42 PM, nom nom nom snackdetec...@gmail.com wrote:
 
 http://bit.ly/1dcFzaf
 
 My page background shows up in chrome  safari on my computer, also works
 in android. Doesn't load in safari or the Perfect Browser in iOS 5 or 7.
 
 Can anyone help me understand why?
 
 Thanks in advance for your eyes!
 
 josh
 
 Josh,
 I checked it on safari on my iphone5 with 7.0.4 with safari dev tools on my 
 desktop and it looks like safari mobile doesn't like your gif file.
 Try re-exporting it or try changing it to a png. My guess is that whatever 
 compression you did on the gif, safari mobile doesn't like.
 
 Best,
 
 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 doesn't show up on iOS

[Karl DeSaulniers]

Good Deal. Glad I could help.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Jan 15, 2014, at 7:54 PM, +josh+ snackdetec...@gmail.com wrote:

 Thanks, that did it! 
 Josh 
 
 
 
 On Jan 15, 2014, at 5:22 PM, Karl DeSaulniers k...@designdrumm.com wrote:
 
 
 On Jan 11, 2014, at 5:42 PM, nom nom nom snackdetec...@gmail.com wrote:
 
 http://bit.ly/1dcFzaf
 
 My page background shows up in chrome  safari on my computer, also works
 in android. Doesn't load in safari or the Perfect Browser in iOS 5 or 7.
 
 Can anyone help me understand why?
 
 Thanks in advance for your eyes!
 
 josh
 
 Josh,
 I checked it on safari on my iphone5 with 7.0.4 with safari dev tools on my 
 desktop and it looks like safari mobile doesn't like your gif file.
 Try re-exporting it or try changing it to a png. My guess is that whatever 
 compression you did on the gif, safari mobile doesn't like.
 
 Best,
 
 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/

__
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 doesn't show up on iOS

[Chris Williams]

FWIW, I don't see it on my safari on OSX either.

One of your many JS files is adding an element style on the body tag that
has a background-color that overrides everything else specified there.
Haven't had time to figure out which one.  Try playing around in Firebug
(or some such) and see which one it is.  When I turn off that body
style= tag in Firebug, the image comes back.

Or just disabling JS files one by one and see which one it is.

On 1/11/14 3:42 PM, nom nom nom snackdetec...@gmail.com wrote:

http://bit.ly/1dcFzaf

My page background shows up in chrome  safari on my computer, also works
in android. Doesn't load in safari or the Perfect Browser in iOS 5 or 7.

Can anyone help me understand why?

Thanks in advance for your eyes!

josh
__
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 doesn't show up on iOS

[nom nom nom]

http://bit.ly/1dcFzaf

My page background shows up in chrome  safari on my computer, also works
in android. Doesn't load in safari or the Perfect Browser in iOS 5 or 7.

Can anyone help me understand why?

Thanks in advance for your eyes!

josh
__
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?

[David Laakso]

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?

[COM]

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?

[David Laakso]

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?

[Karl DeSaulniers]

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?

[COM]

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?

[Tom Livingston]

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?

[COM]

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?

[Greg Gamble]

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?

[David Laakso]

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?

[COM]

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?

[Karl DeSaulniers]

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?

[COM]

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?

[Tom Livingston]

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?

[David Laakso]

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 displays locally, but not remotely

[Ron Zisman]

http://ricochet.org/evolutionery.com/index.html

stupidly simple, a background image with 2 links… only the links show (not bg 
imgs)
styles in the head of doc.

thanks in advance
ron
__
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 displays locally, but not remotely

[Karl DeSaulniers]

Looks like index.jpg isn't in that folder.
404 not found for me anyways.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Jun 12, 2013, at 12:17 PM, Ron Zisman wrote:

 http://ricochet.org/evolutionery.com/index.html
 
 stupidly simple, a background image with 2 links… only the links show (not bg 
 imgs)
 styles in the head of doc.
 
 thanks in advance
 ron
 __
 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 displays locally, but not remotely

[Tim Arnold]

On Wed, Jun 12, 2013 at 1:17 PM, Ron Zisman ronzis...@me.com wrote:
 http://ricochet.org/evolutionery.com/index.html

 stupidly simple, a background image with 2 links… only the links show (not bg 
 imgs)
 styles in the head of doc.

 thanks in advance
 ron

The path to the images that do show up:
http://ricochet.org/evolutionery.com/images/contact.jpg  Great!
Works!
The path to the image referenced in the css:
http://ricochet.org/evolutionery.com/images/index.jpg  Not Great!
File Not Found!

Move that index.jpg image up to the same directory that
contact.jpg is in and it should work.

tim



-- 

tim.arn...@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 displays locally, but not remotely

[Hahnel, Fred (DET-MRM)]

Css file not found  in  Web Developer console

http://ricochet.org/evolutionery.com/stylesheets/floradise.css



-Fred Hahnel

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Ron Zisman
Sent: Wednesday, June 12, 2013 1:17 PM
To: CSS List
Subject: [css-d] background displays locally, but not remotely

http://ricochet.org/evolutionery.com/index.html

stupidly simple, a background image with 2 links... only the links show (not bg 
imgs) styles in the head of doc.

thanks in advance
ron
__
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/
This message contains information which may be confidential and privileged. 
Unless you are the intended recipient (or authorized to receive this message 
for the intended recipient), you may not use, copy, disseminate or disclose to 
anyone the message or any information contained in the message.  If you have 
received the message in error, please advise the sender by reply e-mail, and 
delete the message.  Thank you very much.

__
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?

[lobo]

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

[John D]

 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

[COM]

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

[Philip TAYLOR]

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

[Micky Hulse]

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

[COM]

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

[Tom Livingston]

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

[COM]

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

[COM]

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

[COM]

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

[Tom Livingston]

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

[Elli Vizcaino]

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

[Markus Ernst]

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

[Elli Vizcaino]

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

[HMW Sales]

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

[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?

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

[Elli Vizcaino]

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

[HMW Sales]

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

[Markus Ernst]

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

[Elli Vizcaino]

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

[Isabel Santos]

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 shorthand definition

[Isabel Santos]

(It seams I keep doing the same mistake:
Clicking on reply instead of reply to all,
so I'll repeat my previous answer to Philippe at the end of this one.)


Alan,

Philippe was right, and his suggestion is handy and makes a lot of sense.
Yet it doesn't feel right to me to use the media queries in this way,
it probably has no unintended consequences, and it is certainly valid,
but it feels kind of funny, bad memmories from dead old hacks, I don't know,
so I just decided to take out the corner from the pngs and address opera
mini directly.
Anyway, your suggestion comes really handy for another reason:

Opera isn't behaving properly after all:
On really wide resolutions it cuts the background, it only stretches so
much,
no matter the backgrounds real aspect ratio in relation to the element or
even real width.
And give it a prefixed background just for opera (cover)
only works if there is no other unprefixed declaration, before or after.
(They say on google that Opera 12 solved it, but I'll keep 11.64 untill I
fix this.)

I had previously added the
' preserveAspectRatio=none '
for webkits sake, but it has no effect on Opera.
(Opera actually reports an error on this svg 1.1 files,
and it didn't report errors on svg tiny ones:
enable-background:new 0 0 1600 64;)

So I'll try svgs with no dimensions,
I'll let you know if it works :)

Thank you so much,
isabel


previous reply, sent to Philippe but not to the list:

Philippe,

thank you so much.

Strange that they decided to wait.
I gess for that, this browsers probably
do deserve the media queries,
but for some reason it just doesn't feel right.
I decided to take out the corner from the pngs
and deal with opera-mini separatly
(doesn't feel right too,
I'm detecting opera mini and serving it the cornerd png,
I'll probably make a proper cornerd svg just for omini).
Anyway seams desktop opera has trouble
calcutating the stretch on wider windows after all,
(seems to interpret 100% 100% as cover based on height),
so its back to vector editing.

Thank you again,
best

isabel
__
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 shorthand definition

[Isabel Santos]

:)
ok Alan,
quoting
Philippe has already provided reasons why this is and a possible solution
but this could also be solved by creating a SVG with no intrinsic size or
ratio. Like so.
http://css-class.com/test/svg/ellipse/intrinsic-none.svg
/quoting

I'm not sure about my sintax, its a lot easier to make svgs in a vector
graphics application,
but I took out the entity references and the viewbox and style definitions
and converted every measure to relative units.
It does work on Opera, and on the rest of the recent browsers, looks the
same and gives me no errors!

no url for now, but it follows the working intrinsic-test.svg for one of
the images:

?xml version=1.0 encoding=utf-8?
!DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN 
http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd;
svg version=1.1 xmlns=http://www.w3.org/2000/svg;
  x=0px y=0px width=100% height=100% xml:space=preserve
preserveAspectRatio=none
 defs
  linearGradient id=gradBase gradientUnits=userSpaceOnUse x1=50%
y1=100% x2=50% y2=0%
   stop  offset=0 style=stop-color:#D0D1C5/
   stop  offset=0.6 style=stop-color:#B3B4AA/
   stop  offset=1 style=stop-color:#9D9E94/
  /linearGradient
 /defs
 rect id=base fill=url(#gradBase) width=100% height=100%/
 defs
  linearGradient id=anguloMinuto gradientUnits=userSpaceOnUse
x1=50.75% y1=230% x2=49.25% y2=-130%
   stop  offset=0.1 style=stop-color:#D0D1C5;stop-opacity:0/
   stop  offset=0.9 style=stop-color:#80807C;stop-opacity:0.5/
  /linearGradient
 /defs
 rect id=escureceEsq fill=url(#anguloMinuto) width=100%
height=100%/
 defs
  linearGradient id=gradDistancia gradientUnits=userSpaceOnUse
x1=50% y1=100% x2=50% y2=0%
   stop  offset=0 style=stop-color:#FFFEF4;stop-opacity:0.09/
   stop  offset=1 style=stop-color:#FAFAFF;stop-opacity:0.06/
  /linearGradient
 /defs
 rect id=distancia fill=url(#gradDistancia) width=100%
height=100%/
/svg

:)
Thank you all,
best,
isabel
__
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 shorthand definition

[Isabel Santos]

Hi all,

I seem to have come accross a strange problem in gecko and webkit browsers,
and I cannot find info on this anywhere, so I'm turning to your infinit
wisdom :)

I'm using an svg on a background, and providing a fallback png element for
older browsers.
(I'm treating ie versions lower then 9 via conditional comments for extra
css files).

Since svg background support is way better then rounded corners,
(kind of cutting corners to save code)
the fallback .png has the top right corder already rounded.
The background images are subtle overlayed gradients,
so I prefere to see them cut in older browsers then to see them stretched.

But for newer browsers I need the svg backgrounds to behave accordingly.
Also, opera mini reports support for background features that doesn't
support,
so I'm opting to ignore modernizr classes on background features.

Because I need the background to be sized auto for the pngs and 100% 100%
for the svgs,
in subsequent rules, I need to use the shorthand definition, and thats
where it breaks:

I'm doing:

#encontra, #minuto, #estendal {background:#bab9a9;}
for good practice sake,
#minuto {background:url(img/bgtopnavPlanoMedio.png) right top no-repeat;}
for less capable browsers
and trying options on the svg.

It seams I cannot use background size if I give no position
(the spec is kind of ambiguos on it, it does not work with nothing before
the slash,
and giving no slash with percentages or auto is interpreted as position)

so if I do:

#minuto {background:url(img/bgtopnavPlanoMedio.svg) top right / 100% 100%;}

Ie9 and Opera 11.64 both get it pretty right,
but Google Chrome 0.3.1, Safari 5.1.7
and most notably Firefox 12 all give me the background:#bab9a9;

When I say notably for firefox, it is because they have the shorthand
defined at
https://developer.mozilla.org/en/CSS/background
as:
[ background-image || background-position [ / background-size ]? ||
background-repeat || background-attachment || background-clip ]
so it really should work!

Also, I can find tons of css shorthand background exemples googling for it,
but nothing that includes a background size with only one background.

I'm getting kind of confused, does this mean the new shorthand only applies
to multiple backgrounds?

Sorry for the extension, I cannot provide an url for the time being.
Thank you,

isabel
__
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 shorthand definition

[Philippe Wittenbergh]

Le 17 juin 2012 à 08:32, Isabel Santos a écrit :

 #minuto {background:url(img/bgtopnavPlanoMedio.svg) top right / 100% 100%;}

That is the correct way of writing css3 background-shorthand

 
 Ie9 and Opera 11.64 both get it pretty right,

Yes.

 but Google Chrome 0.3.1, Safari 5.1.7
 and most notably Firefox 12 all give me the background:#bab9a9;

Right. The background-size part is not yet hooked up to the background 
shorthand in Firefox. You're looking at this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=570326

As for Webkit based browsers: Safari 5.1.7 doesn't support it yet (it already 
works in nightly builds, so Safari next will support it. It is a pretty recent 
addition to the WebKit code; I think Google Chrome 19.x should support it (or 
else Chrome 20).

 I'm getting kind of confused, does this mean the new shorthand only applies
 to multiple backgrounds?

No, it works just as well with only one background-layer, it is just that those 
browsers haven't implemented it. Yet.

You can do something like this, in addition to the code you have:
@media screen and (-webkit-min-device-pixel-ratio: 1),
screen and (min--moz-device-pixel-ratio: 1) {
E { background: url(path/to/image.svg) top right no repeat; 
background-size: 100% 100%; }
}

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 shorthand definition

[Alan Gresley]

On 17/06/2012 9:32 AM, Isabel Santos wrote:


so if I do:

#minuto {background:url(img/bgtopnavPlanoMedio.svg) top right / 100% 100%;}

Ie9 and Opera 11.64 both get it pretty right,
but Google Chrome 0.3.1, Safari 5.1.7
and most notably Firefox 12 all give me the background:#bab9a9;


Philippe has already provided reasons why this is and a possible 
solution but this could also be solved by creating a SVG with no 
intrinsic size or ratio. Like so.


http://css-class.com/test/svg/ellipse/intrinsic-none.svg

This would allow you to the SVG is possibly more browsers. It will work 
in Firefox but WebKit (Safari and Chrome) does have a bug with SVGs with 
no intrinsic size or ratio with background-size that are not auto.


I believe you are attempting to use the slash shorthand as a filter for 
browsers that don't support it. Maybe wrong. :-)



I'm getting kind of confused, does this mean the new shorthand only applies
to multiple backgrounds?


No. The can be single backgrounds. Here is one test with multiple 
background layers that shows the potential of CSS. Working in IE9 and 
Opera 11.64.


http://css-class.com/test/css/3/backgrounds/background-slash-shorthand.htm


--
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 color for 3 column layout

[J.C. Berry]

Hi all,
I have a three-column layout, all three of which have a white background.
The page background is black and I need the div containing the three
columns to expand with its white background down the page. I need the
longest of the three columns (2 or 3) to determine how high the containing
div is. I also have footer that clears the three columns fine. How can I do
this? Thanks!

-- 
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
portfolio: http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.

__
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 color for 3 column layout

[John D]

 I have a three-column layout, all three of which have a white background.
 The page background is black and I need the div containing the three
 columns to expand with its white background down the page. I need the
 longest of the three columns (2 or 3) to determine how high the containing
 div is. I also have footer that clears the three columns fine. How can I do
 this? Thanks!

By using the technique discussed here:



http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks



Good luck.



  
__
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 color for 3 column layout

[David Laakso]

On Thu, Mar 8, 2012 at 11:57 AM, J.C. Berry jcharlesbe...@gmail.com wrote:

  I need the
 longest of the three columns (2 or 3) to determine how high the containing
div is.

 J.C. Berry, M.A.

---

There are a number of ways to do that. One is a CSS Table [looks like
a table but its not].
Please see:
http://ccstudi.com/gs.html
Best,
~d
-- 
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 not displaying in correct position

[Erica Cavin]

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

[Erica Cavin]

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

[Ghodmode]

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

[David Hucklesby]

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

[Ghodmode]

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 color changes with comment on blog

[Eva Moon]

I can't track this down!

My blog is here: http://evamoon.net/blog/

It's fine except that when someone leaves a comment on a post, the background 
of the whole post area goes white. I can't figure out where this is coming from!

Here's an example: http://evamoon.net/blog/2011/09/04/clamhenge/

Thank you!

Eva
__
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 color changes with comment on blog

[Eva Moon]

I tracked it down to a plug in. Thanks anyway!

Eva

On Dec 8, 2011, at 12:23 PM, Eva Moon wrote:

 I can't track this down!
 
 My blog is here: http://evamoon.net/blog/
 
 It's fine except that when someone leaves a comment on a post, the background 
 of the whole post area goes white. I can't figure out where this is coming 
 from!
 
 Here's an example: http://evamoon.net/blog/2011/09/04/clamhenge/
 
 Thank you!
 
 Eva
 __
 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 fix...

[Michael Beaudoin]

On Nov 3, 2011, at 9:38 PM, Ed Goodson wrote:

I am working up a site that has different backgrounds/color per   
section. I have a background here that runs short. What am I  
missing  to get the color to fill the rest? Do I have to put the  
container in  another container? Check here: http://www.sdainteractive.com/davinci_test/school_camp.html



Answer: I think you can actually just get rid of height and width in  
#bkgdSchool

#containerSchool

Ed



Sorry, been out of the loop for a few days.

These worked great.

Thanks again for everyone's help.

Michael
__
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 fix...

[Michael Beaudoin]

Hi all.

I am working up a site that has different backgrounds/color per  
section. I have a background here that runs short. What am I missing  
to get the color to fill the rest? Do I have to put the container in  
another container?


Check here: http://www.sdainteractive.com/davinci_test/school_camp.html

Thanks,
Michael
__
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 fix...

[Ed Goodson]

I am working up a site that has different backgrounds/color per  
section. I have a background here that runs short. What am I missing  
to get the color to fill the rest? Do I have to put the container in  
another container?


Check here: http://www.sdainteractive.com/davinci_test/school_camp.html



Hi Michael
This seems to work, cheers Ed


#containerSchool {
   background-image: url(images/davinci_bkgd_school.gif);
   height: 1000px;
   margin: auto;
   width: 100%;
}

#containerSchool {
   background-image: url(images/davinci_bkgd_school.gif);
   height: 100%;
   margin: auto;
   width: 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 fix...

[Ed Goodson]

I am working up a site that has different backgrounds/color per  section. 
I have a background here that runs short. What am I missing  to get the 
color to fill the rest? Do I have to put the container in  another 
container? Check here: 
http://www.sdainteractive.com/davinci_test/school_camp.html



Answer: I think you can actually just get rid of height and width in 
#bkgdSchool

#containerSchool

Ed

__
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

[Norman Fournier]

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

[Chetan Crasta]

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/