I am using Jquery to add a class to a div like so...
somediv.addClass('correct').removeClass('wrong');
The CSS is as follows
.correct {
background-color: #CDF596;
border: 1px solid #75EE3B;
background-image: url('images/ok32.png') no-repeat right top;
}
The problem is that everything is rendered ok except the image that is not displayed at all.
After some firebugging i found that the line with the image is in strikethrough like so..
background-image: url('images/ok32.png') no-repeat right top;
What is going on here? What am i doing wrong?
You are trying to set background-repeat and background-position inside the background-image property. Either define the no-repeat and right top in their own properties, or use the background shorthand (in which case you should merge background-color into it and add scroll after no-repeat).
Related
I just trying to solve the problem.
CSS:
.default-img > img {
height: 100px;
width: 100%;
background: url('bg.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
border: 10px solid black;
}
I have a white "Border" (Inner Border?) in the Image tag and i cant remove it.
The Black Border is set manually to show you the Problem and the Red Content is the included image.
How can i remove the white inner border from img tag
Open up a image editing software. Re-crop / re-save your source image
being rendering from 'background: url('bg.png');' background
property. So, the 'bg.png'.
Another thing you can do if you don't want to do above. Nest another
<div> around your initial .default-img <div> and set the
heights and widths to crop out the white. Make sure to set property
overflow:hidden;
In some rarer cases a white line or (outline) can be induced around
elements as a browser quirk. Test your element across browsers (and
maybe even devices too) to target if it's something browser
specific. Then target that browser and remove. ie. outline { none; }
Hope this helps, g'luck!
The img creates that border when you have a background but not a source.
To solve this issue move that background to a div :)
is it possible that that white border exists in the image itself, not in css? view the file on the black background and check.
Looks like you are showing two images there at 100%, both the source image and the background image. Do you need the background image? Could that cause the white line?
I need to overlay a small arrow on top of a background color in a div. However, only the image appears and not the background color. This is my CSS:
table.dataTable thead .rand {
background-color: #FFFF66;
background: url("testing.png") no-repeat center right;
}
I think the second background statement overwrites the one above it which causes the color to not show. Any ideas how to do this?
Your use of the background shorthand syntax is overriding your background color rule. Combine them:
background: #ff6 url("testing.png") no-repeat center right;
See: https://developer.mozilla.org/en-US/docs/Web/CSS/background
Switch the order they occur in the css.
I need to set the image height everytime I'm using background: url('images/something.jpg')[..];
Fe.
HTML:
<div class="someImage"></div>
CSS:
.someImage {
background: url('images/something.jpg') no-repeat top;
}
The above example should work... but image won't display until I add an image height attribute to the CSS style class:
.someImage {
background: url('images/something.jpg') no-repeat top;
height: 25px;
}
And then my image appear on the website...
Why does it happend?
Because without content, a div has no height, background image or not.
Since your div is empty it has no height..
The image you use is applied as a background, so it does not affect the size.. it just fits whatever space is available at the div.
When you explicitly set the height, you create room for the image to appear..
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.
i have a web page using a css style file who have this property:
body {
background: #7a9c12 url(images/main_background.jpg) top center no-repeat;
color: #bbb;
font: 12px/14px helvetica, arial,Sans-serif;
}
As you can see this code only puts a background image on the top center on the div body. But, i need a background image in the botton center too of the body tag, how can i do this? Thanks!
An option if you're not using CSS3 is to layer the background images on your html and body tags:
html {
background: #7a9c12 url(images/main_background_top.jpg) top center no-repeat;
}
body {
background: url(images/main_background_bottom.jpg) bottom center no-repeat;
}
Just make sure you only apply a solid background colour to the html background property, otherwise you'll overlay the image and only see the body background image.
With CSS2.1, no, it's impossible.
With CSS3, yes, you can.
The background of a box can have
multiple layers in CSS3. The number of
layers is determined by the number of
comma-separated values in the
‘background-image’ property.
Reference: W3C.
With CSS3, you can have multiple backgrounds, separated by commas. See the documentation. e.g.
background: url(banner.png) top center no-repeat,
url(footer.png) bottom center no-repeat;