Re: [css-d] Background image position
On Jun 29, 2011, at 1:11 AM, Alan Gresley a...@css-class.com wrote:
On 29/06/2011 1:55 PM, John D wrote:
On 29/06/2011 9:01 AM, Tom Livingston wrote:
List,
Is it possible to position a background image on the body of a page so
that the LEFT EDGE of the image is always at 50% of the viewport? Ive
googled a bit but not sure im using the right search terms...
Of course it is possible. put this code for your background:
background: white url(background_image.gif) repeat-y 50% 0;
In the above code everything is self explanatory except the following:
50% === background position x;
0 === background position y;
All that does is positions' the image at the center of the viewport. Tom
wants the _LEFT EDGE_ of the image positioned at 50% of the width of the
viewport. This is possible but you need to also use background-size (or
generated content, see below) which have some unexpected side affects. The
below solutions will work differently but some may or may not be what you are
after. It all depends on what the image is.
body {
background: url(image.jpg) 100% 0% no-repeat;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% repeat-y;
background-size: 50% auto;
}
or
body {
background: url(image.jpg) 100% 0% repeat-y;
background-size: 50% 200px;
}
If you are using an image with width and height in absolute values like
pixels and you don't want scaling, then this is another solution.
html::before {
content: url(image.jpg);
position: absolute;
margin-right: -150px; /* equal width of image */
left: 50%;
}
body {
position: relative;
z-index: 1;
}
Thanks Alan and others who responded. I'll give Alan's suggestions a
run-through.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS3 transitions only after load
I want to specify a transition for an element, but I only want it to
be used if a change is made to a property AFTER the page has loaded.
For example,
#foo {
font-size: 24pt;
transition: all 1s linear;
-moz-transition all 1s linear;
-webkit-transition all 1s linear;
}
I don't want the change to font-size from the default to 24pt to be animated.
I can get what I want by adding the transition from JavaScript after the load.
Is there a way to do this without using JavaScript?
--
R. Mark Volkmann
Object Computing, Inc.
__
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] CSS3 transitions only after load
On 6/29/11 11:38 AM, Mark Volkmann wrote:
I want to specify a transition for an element, but I only want it to
be used if a change is made to a property AFTER the page has loaded.
For example,
#foo {
font-size: 24pt;
transition: all 1s linear;
-moz-transition all 1s linear;
-webkit-transition all 1s linear;
}
One possibility is to trigger the transition on activating a link to
#foo using the :target selector:
http://reference.sitepoint.com/css/pseudoclass-target
Not sure if that's what you are after, though...
--
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 position
List, I have a working example of what I am after: http://www.mlinc.com/tl-test/ In a capable browser, you can see how the large bg image is behaving. This is what I am after and I'm using a media query to achieve this. But I have a couple questions for you concerning the background image 1) Is the way I am achieving the effect completely bonkers? Am I overlooking a much simpler way? 2) Is there a better way to achieve what is happening? 3) Providing i'm not doing something completely insane, is it possible to get IE7 and 8 to play nicer (have the bg image not continue behind the content as the viewport decreases below 900px wide)? With a different method? Thanks a lot for your time. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS3 transitions only after load
On Wednesday 2011-06-29 13:38 -0500, Mark Volkmann wrote:
I want to specify a transition for an element, but I only want it to
be used if a change is made to a property AFTER the page has loaded.
For example,
#foo {
font-size: 24pt;
transition: all 1s linear;
-moz-transition all 1s linear;
-webkit-transition all 1s linear;
}
I don't want the change to font-size from the default to 24pt to be animated.
This should be the way transitions work normally. Are you doing
something that causes the style not to be applied until just after
load?
-David
--
L. David Baron http://dbaron.org/
Mozilla Corporation http://www.mozilla.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
1) Is the way I am achieving the effect completely bonkers? Am I
overlooking a much simpler way?
That is exactly the way to do what you are trying to do except that I would fix
the image position like this:
#outer-wrap{background: #fff url(../Bokeh.jpg) no-repeat fixed 50% top; }
The altermnative to fixed is scroll but this is not necessary in your case as
you are not repeating the image (x nor y)
2) Is there a better way to achieve what is happening?
Not that I know of except the other respondents made it very scientific and
therefore very complicated IMO.
3) Providing i'm not doing something completely insane, is it possible
to get IE7 and 8 to play nicer (have the bg image not continue behind
the content as the viewport decreases below 900px wide)? With a
different method?
To make it liquid, use percentages instead of px. Try a width of 90% for
outer-wrap and remove the width for other divs.
You also need to make sure it validates because you don't have an opening
head and also an opening body. Always use the validation service just to
iron out basic mistakes and unbalanced html/css tags.
My 2 pence worth.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS3 transitions only after load
It turns out my issue was due to height and width animation, not
font-size animation. I had height and width values set to 100% which
are then calculated values. Those were being animated. I fixed it by
being more specfic about what should be animated ... only
-webkit-transform in my case. Thanks to Ghodmode for that suggestions!
On Wed, Jun 29, 2011 at 4:29 PM, L. David Baron dba...@dbaron.org wrote:
On Wednesday 2011-06-29 13:38 -0500, Mark Volkmann wrote:
I want to specify a transition for an element, but I only want it to
be used if a change is made to a property AFTER the page has loaded.
For example,
#foo {
font-size: 24pt;
transition: all 1s linear;
-moz-transition all 1s linear;
-webkit-transition all 1s linear;
}
I don't want the change to font-size from the default to 24pt to be animated.
This should be the way transitions work normally. Are you doing
something that causes the style not to be applied until just after
load?
--
R. Mark Volkmann
Object Computing, Inc.
__
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] transform-style set to preserve-3d
I'm pretty sure I understand what setting -webkit-transform-style to preserve-3d is supposed to do, but I see no difference between that and the value flat. Can someone point me to an example that demonstrates a 3d effect during a flip (rotate) transform? -- R. Mark Volkmann Object Computing, Inc. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On 6/29/11 4:31 PM, Tom Livingston wrote: List, I have a working example of what I am after: http://www.mlinc.com/tl-test/ Keep it simple. And readable on landing. markup http://chelseacreekstudio.com/mmm.htm css http://chelseacreekstudio.com/mmm_files/style000.css Folds to 400 in FF, Safari, Opera, and Chrome. Folds to 600 in IE 7/8. IE 9 not checked. Not corrected for nor checked in IE 6. ~d -- http://chelseacreekstudio.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On Wed, Jun 29, 2011 at 6:04 PM, John D xfs...@hotmail.com wrote:
1) Is the way I am achieving the effect completely bonkers? Am I
overlooking a much simpler way?
That is exactly the way to do what you are trying to do except that I would
fix the image position like this:
#outer-wrap{background: #fff url(../Bokeh.jpg) no-repeat fixed 50% top; }
The altermnative to fixed is scroll but this is not necessary in your case as
you are not repeating the image (x nor y)
2) Is there a better way to achieve what is happening?
Not that I know of except the other respondents made it very scientific and
therefore very complicated IMO.
3) Providing i'm not doing something completely insane, is it possible
to get IE7 and 8 to play nicer (have the bg image not continue behind
the content as the viewport decreases below 900px wide)? With a
different method?
To make it liquid, use percentages instead of px. Try a width of 90% for
outer-wrap and remove the width for other divs.
You also need to make sure it validates because you don't have an opening
head and also an opening body. Always use the validation service just to
iron out basic mistakes and unbalanced html/css tags.
My 2 pence worth.
I fixed the missing opening head, embarrassingly, but I see no issue
with the opening body. It's in conditional comments.
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
Keep it simple. And readable on landing. markup http://chelseacreekstudio.com/mmm.htm css http://chelseacreekstudio.com/mmm_files/style000.css Folds to 400 in FF, Safari, Opera, and Chrome. Folds to 600 in IE 7/8. IE 9 not checked. Not corrected for nor checked in IE 6. ~d While I appreciate your time, I was not looking to change the way the page reacts to the viewport, just whether or not there is a better way to do what I was already doing and if it is possible to have IE7 and 8 react the same way as capable browsers. Thanks again for your time. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS3 Resources Please
Hello CSS Discuss, Looking for some good CSS3 resources/sites. TIA 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] CSS3 Resources Please
On 6/29/11 6:57 PM, Elli Vizcaino wrote: Hello CSS Discuss, Looking for some good CSS3 resources/sites. TIA Elli http://www.css3.info/ view-source:http://www.css3.info/ http://css3please.com/ view-source:http://css3please.com/ http://www.w3.org/TR/css3-roadmap/ view-source:http://www.w3.org/TR/css3-roadmap/ http://www.slideshare.net/maxdesign/css3-media-queries/ view-source:http://www.slideshare.net/maxdesign/css3-media-queries/ http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries view-source:http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries http://protofluid.com/?c=mediaQueries view-source:http://protofluid.com/?c=mediaQueries http://www.standardista.com/css3/css3-selector-browser-support view-source:http://www.standardista.com/css3/css3-selector-browser-support Google is your friend. ~d -- http://chelseacreekstudio.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
While I appreciate your time, I was not looking to change the way the
page reacts to the viewport, just whether or not there is a better way
to do what I was already doing and if it is possible to have IE7 and 8
react the same way as capable browsers.
I think Lasko got it dead right. You can also try to investigate the
possibility of creating two divs of 50% each like this:
div id=headerheader/div
div id=wrapper
div id=leftLeft/div
div id=rightRight/div
/div
div id=footerfooter/div
The DIVS left and Right would be left floated to make them display side by side
and the width of each is 50%. The rough and dirty CSS looks like this:
#wrapper {
width: 900px;
height: 90%;
margin: 0 auto;
text-align: left;
height: 100%;
}
#left {
width: 46%;
margin: 2%;
float: left;
}
#right {
width: 50%;
float: left;
margin: 2% 0;
background-image: url('http://www.mlinc.com/tl-test/Bokeh.jpg');
}
#footer {
clear: left;
width: 900px;
height: 5%;
margin: 0 auto;
text-align: center;
}
The CSS and layout can be improved dramatically but I leave it to you to think
about this. Lasko's method is pretty neat.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS3 Resources Please
Hello CSS Discuss, Looking for some good CSS3 resources/sites. TIA Elli http://www.css3.info/ view-source:http://www.css3.info/ http://css3please.com/ view-source:http://css3please.com/ http://www.w3.org/TR/css3-roadmap/ view-source:http://www.w3.org/TR/css3-roadmap/ http://www.slideshare.net/maxdesign/css3-media-queries/ view-source:http://www.slideshare.net/maxdesign/css3-media-queries/ http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries view-source:http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries http://protofluid.com/?c=mediaQueries view-source:http://protofluid.com/?c=mediaQueries http://www.standardista.com/css3/css3-selector-browser-support view-source:http://www.standardista.com/css3/css3-selector-browser-support Google is your friend. ~d Thanks! I tried google but wasn't crazy about the search results that were coming up. I'll take a look at these... :)) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image position
On 30/06/2011 6:31 AM, Tom Livingston wrote: List, I have a working example of what I am after: http://www.mlinc.com/tl-test/ In a capable browser, you can see how the large bg image is behaving. This is what I am after and I'm using a media query to achieve this. But I have a couple questions for you concerning the background image 1) Is the way I am achieving the effect completely bonkers? Am I overlooking a much simpler way? Possibly yes and possibly no to the former and later. There is an issue with accessibly where someone who can only use a keyboard. First they must tab to the inner overflow section, scroll down with the arrows and once they reach the bottom of what is hidden in the outer overflow (the viewport), they must tab to get this into focus, use the arrows keys to scroll to the overflowing portion in the viewport, then press tab again to return to the inner overflow so again they can use the arrow key to scroll the inner overflow. Now if the content of the inner overflow is very long, this procedure has to be done over and over. They may even decide to return to the top of the content and in which case they have to do the reverse. It your choice if you think this is wise. Also, do you want this to happen? http://css-class.com/x/tom.png 2) Is there a better way to achieve what is happening? Depends on what you want to happen in respect to the above two issues. The later is solved my using min-width on a container div that contain the header 'div#outer-wrap' and the footer. 3) Providing i'm not doing something completely insane, is it possible to get IE7 and 8 to play nicer (have the bg image not continue behind the content as the viewport decreases below 900px wide)? With a different method? Thanks a lot for your time. You need to Google this string 'html5 elements ie8 ie7' (not quoted) or wait for someone to give the solution offlist since it involves JS. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] transform-style set to preserve-3d
On 30/06/2011 8:24 AM, Mark Volkmann wrote: I'm pretty sure I understand what setting -webkit-transform-style to preserve-3d is supposed to do, but I see no difference between that and the value flat. Can someone point me to an example that demonstrates a 3d effect during a flip (rotate) transform? Possibly here. http://css-3d.org/ Note that the branding does not have perspective, thus the occasional illusion where the cube distorts and spins in the reversed direction (right to left) before it switches back again. -- 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/
