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.
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 am designing a website where its whole background color is light green (#F5FFF6 to be exact), and now I need to create a fieldset who's background color is white (#FFFFFFF). My CSS markup is below:
#page_content {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-color: #F5FFF6;
}
#fieldset {
background-color: #FFFFFF;
}
It kinda worked on the "light-green page background color" and my fieldset's color is white which what I wanted too. But I noticed that the area where my fieldset is positioned, the background color of the page was white too instead of that light-green. The rest were all light-green except to that area. So I tried creating another fieldset and boom! The same thing happened to the first fieldset - the area behind my fieldset was white again.
I do not understand the exact problem. If you don`t want the whole width of the page to be white just give the fieldset a width and so the background color of the page will remain green.
#fieldset {
background-color: #FFFFFF;
width: 100px;
height: 150px;
}
i made an example:
http://jsfiddle.net/aKGmc/2/
if this does not help you please upload a jsfiddle with it so i can take a look at the problem
Ids (selectors prefixed with a #) should be unique to one single element.
If you want to target more than one element of a category, use a class and the appropriate selector (<div class="something"> and .something {}) or a generic selector (div {}).
That behavior is normal.
You chose to apply the white background to an element (Fieldset) and you got the white background relative to that area. So if that is not ok, you probably want to achieve something else.
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).
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;