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
Related
I created the following image to be rendered under all h1 title tags in my website. Trouble is, every tutorial I find online discusses border image property as a all around border.
All I want to achieve is to get this one small image underneath the title, once. No repeat. centered. According to this http://www.css3.info/preview/border-image/ there is a property called border-bottom-image. But I can't seem to get it to display properly.
Google chrome developer tools tells me that this is an unknown property name. If I can't achieve this with the following css3, how can I achieve it?
.entry-title{
border-bottom-image: url(images/title-borderbottom.jpg);
}
Here are two options that allow you to do what you want without resorting to border-image, which is not really built for what you want to do.
background-image + :after
This uses a pseudo-element (:after) to "insert" a block with your given image as the background-image. I think this is probably better than the next option, since it's least disruptive to the element's styling.
.entry-title:after {
content: "";
display: block;
height: 70px;
background-image: url(http://placehold.it/350x65);
background-repeat: no-repeat;
background-position: center bottom;
}
http://jsfiddle.net/mh66rvbo/2/
background-image + padding
This uses padding-bottom to make space for the image, then sticks the image along the bottom of the element, positioning in the center.
.entry-title {
padding-bottom: 70px;
background-image: url(http://placehold.it/350x65);
background-repeat: no-repeat;
background-position: center bottom;
}
http://jsfiddle.net/mh66rvbo/1/
work for me ....
.entry-title{
border-bottom: 20px solid #000;
border-image:url('bottom.jpeg');
border-image-repeat: round;
border-image-slice: 300;
text-align: center;
margin: 0px auto;
width:70%;
}
From the link you provided (http://www.css3.info/preview/border-image/)
border-image currently works in Safari and Firefox 3.1 (Alpha).
Per my understanding, "border-bottom-image" still doesn't work in the latest version of Google Chrome (natively). But "border-image" does. And you can define width for each individual portion using the (top right bottom left) protocol:
.entry-title{
border-image: url(images/title-borderbottom.jpg);
border-image-width: 0 0 10px 0;
border-image-repeat: stretch;
}
Details: http://www.w3schools.com/cssref/css3_pr_border-image.asp
I am in a design issue please help me to find a solution.
here is my page
This is working fine in Google chrome but background-color: transparent; in header is not working on Mozilla and IE and it shows a white background on my header.
I have tried by giving position:static but is not working for me.
please help me.
Add overflow: hidden to your #header_main class and it eliminates the issue.
So.. it would look like this:
#header_main{
z-index: 1;
border-top: 3px solid #FFF;
background: url("http://australian.webeteerprojects.com/wp-content/uploads/2015/04/header-back.png") no-repeat scroll center top / 100% 100% transparent;
overflow: hidden;
}
another solution could be to fake the background and create a 1px transparent gif:
background:url(transparent.gif);
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/
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.
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".