here is my page
here is my CSS
dot {
background:url("images/non_selected.png") repeat scroll 22px 22px transparent;
height:22px;
width:22px;
}
when i change it to
url("images/non_selected.png") norepeat scroll 22px 22px transparent
nothing displays...what gives
it's no-repeat not norepeat. let me know if that doesn't fix it.
edit #1: you are offsetting it too much...try
background: url(http://dev.posnation.com/build_system/css/images/non_selected.png) no-repeat 0px 0px;
It's because you've offset the background image by 22 pixels. The image starts outside of the range of dot, so it doesn't show up unless you repeat it. Instead, try:
background: url("images/non_selected.png") no-repeat scroll left top;
The important part is changing "22px 22px" to "left top".
Related
I have background images for fixed position menu items.
They appear correct on a desktop browser, but they become stretched and only show the center portion of the image when displayed on a mobile browser, and the image appears to be approx 4x original size.
I've attempted setting background-size:cover cover !important; to force the size to fill the container, but that has also had no effect.
I know there are issues with using fixed positioning and the viewport on mobile, but I've tried setting the elements to relative positioning with no effect.
HTML:
head:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0" />
menu:
<ul id="shortcuts" role="complementary" class="children-tooltip tooltip-right lulus">
<li class="current">Home</li>
<li>Events</li>
</ul>
css:
#shortcuts {
display: none;
position: fixed;
z-index: 998;
top: 44px;
left: 10px;
margin: 0;
width: 240px;
list-style-type: none;
padding: 15px 4px 5px 14px;
*padding-bottom: 25px;
border: 1px solid white;
background: #d9d9d9 url(../img/old-browsers/style/bg_shortcuts.png) repeat-x;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d9d9d9));
background: -webkit-linear-gradient( white, #d9d9d9 );
background: -moz-linear-gradient( white, #d9d9d9 );
background: -ms-linear-gradient( white, #d9d9d9 );
background: -o-linear-gradient( white, #d9d9d9 );
background: linear-gradient( white, #d9d9d9 );
-webkit-background-clip: padding-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
}
#shortcuts > li {
width: 70px;
height: 70px;
float: left;
margin: -5px 10px 25px 0;
}
.shortcut-dashboard { margin-left:0px !important; /*padding-bottom:65px; width:70px !important;*/ background-image: url(../img/standard/icons/Home_Icon.png) !important; background-position:center center !important; background-size:cover cover !important; }
.shortcut-agenda { margin-left:0px !important; /*padding-bottom:65px; width:70px !important;*/ background-image: url(../img/standard/icons/Calendar_Icon.png) !important; background-position:center center !important; }
I can't figure out why the background image is getting stretched and only on mobile browsers. This is the only place my background images are behaving badly. Any help would be nice... I'm not opposed to corporal punishment on these misbehaving children!
Quoting from "The Definitive Guide To HTML/XHTML 6th Edition":
"HTML and XHTML documents can wind up in the strangest places these days, such
as on cellular phones. To help the browser figure out the best way to render your documents,
include the media attribute within the tag. The value of this attribute is
the document’s intended medium, although it doesn’t preclude rendering by other
media. The default value is screen (computer display). Other values include tty (text
only), tv (television), projection (theaters), handheld (PDAs and cell phones), print
(ink on paper), braille (tactile devices), embossed (Braille printers), aural (audio;
speech synthesis, for instance), and all (many different types of media).
If you want to explicitly list several types of media, instead of specifying all, use a
quote-enclosed, comma-separated list of media types as the value of the media
attribute. For example:
tells the browser that your document contains CSS both for printing and for computer
displays.
Be careful specifying media, because the browser cannot apply the styles you define
unless the document is being rendered on one of your specified media. Thus, the
browser would not apply our example set of styles designed for media="screen,print"
if the user is, for instance, connected to the Web with a handheld computer.
How do you create different style definitions for different media without creating
multiple copies of your document? The CSS2 standard lets you define media-specific
stylesheets through its extension to the #import at-rule and through the #media atrule,
which we describe in section 8.1.5 later in this chapter."
PS, try to make your code more relative: instead of using 'px', specify the value in percentage.
My bad on this one, folks. I had a CSS file that was overriding the background-size to a predetermined pixel size. I removed this property from the CSS file and all is well.
On a side note, does anyone know of any apps or plugins that allow me to view the CSS of a page from a mobile browser? Something similar to built in desktop browsers' developer toolbar? This would have saved me a lot of headache...
I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.
Here is my CSS code:
.horizontalLines {
border-bottom: 2px solid #CCCCCC;
padding-top: 25px;
width: 100%;
}
This code only allows me to make only one line, how can i make multiple lines?
As an alternate solution, there's a beautiful lined paper effect written using CSS available here.
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be
displayed correctly even on those browsers (for example at the time of
writing, Gecko is quite buggy with radial gradients).
Using your way you have to insert multiple of these elements. You can't simply repeat them.
Another - and I guess more suitable way - would be using a background image that you repeat horizontally and vertically to achieve this effect.
body {
background: transparent url(path/filename) repeat 0 0;
}
Or, if you can use gradients, nikhita dkslfslg's answer (+1 for that) might help.
Here you go.
.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");
}
Just Encode an image in base64 and it works fine.
You can try encoding HERE.
You can do it with box shadows:
.lines{
width:500px;
height:400px;
background: red;
box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}
http://jsfiddle.net/7DkKc/
Or simply with images:
.lines{
background: transparent url(url) 0 0 repeat-x;
}
Or with gradients.
http://www.colorzilla.com/gradient-editor/
Having a small problem where the background image is not showing in any of the IE versions (except IE 9 I believe), not sure what is going wrong, any helps/thoughts/things I could try out?
Kind regards
http://www.trucknetuk.com/phpBB/viewforum.php?f=46 It is the Michelin banner(not the small sponsor) just above the new topic button
background: url("./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif") repeat-x scroll center 0 transparent;
Change this:
background: url('./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif')repeat-x scroll center 0 transparent;
To this:
background: url('./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif') repeat-x scroll center 0 transparent;
The difference is a space after the closing bracket and before the "repeat-x". IE is much pickier than other browsers regarding syntax.
Your background shorthand is wrong, transparent needs to come first
#page-body {
background: transparent url("./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif") repeat-x center 0;
clear: both;
padding: 4px 5px;
}
proper shorthand is : body {background:#ffffff url('img_tree.png') no-repeat right top;}
Not sure what you are trying to do with the scroll declaration
.button{
background: transparent url('../images/backrgound.jpg') no-repeat top center;
}
CSS Standard
background : color URL repeat-section and position
JPEG Images
Check whether images are of JPEG2000, if yes, then open any image editor and save it again with proper jpeg extension
If I have a button like this one:
a#settingsCloseButton {
background: url("img/my_account_sprite.png") no-repeat scroll 0 -155px transparent;
display: block;
height: 14px;
text-indent: -3000px;
width: 14px;
}
I use to write the :hover and :active like this:
a#settingsCloseButton:hover {
background: url("img/my_account_sprite.png") no-repeat scroll -14px -155px transparent;
}
a#settingsCloseButton:active {
background: url("img/my_account_sprite.png") no-repeat scroll -28px -155px transparent;
}
My Question is: If I will write it only with background-poistion like this would it get me better loading performence:
a#settingsCloseButton:hover {
background-posiiton: -14px -155px;
}
a#settingsCloseButton:active {
background-posiiton: -28px -155px;
}
It is easier for to duplicate the whole background properties because then I can tell where the image is being taken from (like the first example). but does it means it re-loads it? Is one option loads faster then the other or they are both the same?
thanks,
Alon
There is no performance penalty incurred in the form of extra loads or anything like that. Once a browser has loaded an image the first time, it has the image in memory and doesn't need to load it again every time it's referenced in a stylesheet.
Setting just the background-position property simply makes it clear that all that's really changing is the background position. It's not necessary to repeat the rest of the values (image, repeat, attachment) if they're not going to change in the :hover and :active states.
I honestly don't think it would affect performance, since the image is already cached when its loaded for the first time.
But, also - I don't see the use of setting "background" for both times.
I would just do
a#settingsCloseButton{
background-image: url('img/my_account_sprite.png');
background-repeat: no-repeat;
background-position: 0px 0px;
}
a#settingsCloseButton:hover{
background-position: -20px -20px;
}
Shai.
Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.
Check this out: CSS3 gradient Generator, pick the colors and generate the code, then add it to the body in your CSS (Or whatever element you want it on).
.body /*or element of your choice*/
-webkit-gradient(
{
linear,
left bottom,
left top,
color-stop(0.02, rgb(91,204,245)),
color-stop(0.76, rgb(5,37,70))
)
-moz-linear-gradient(
center bottom,
rgb(91,204,245) 2%,
rgb(5,37,70) 76%
)
}
For the shadow from your main content use:
.MyElement
{
box-shadow: 10px 10px 5px #888;
}
And also check out CSS3 Box-shadow.
Also, because not every browser supports the box-shadow yet (IE), you can use border images. But IE doesn't suppport that either so, what I did on a site was to just make a 1px high PNG image of the shadow and set it as the background to my wrapper div, repeated it down/up (can't remember if that's X or Y) and it worked fine :)
Hope some of that helps.
img.shady
{
display: inline-block;
webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
padding: 10px;
margin-bottom: 5px !important;
min-height: 240px;
width: 630px;
border: 1px solid #D7D7D7
}
Your sidebar should use a png image that has an opacity/transparency, then the shaded sidebar will work with gradient background. (Note, IE6 wont like this solution, so you have to find an IE6PNG hack solution which can be found almost everywhere nowadays)
For gradient background, either create a background image or use the css3 gradient