I've set background-image property in parent element as:
Full screenshot
It works fine.
Inside parent element what has id set as "content" I have a child element
with id "comments".
Full screenshot
Whatever I have tried it doesn't take any effect. I tried to set it to none or even to change to another image. Nothing helps. I want to remove background image for child element or to change it.
Please help, I can't find where I did a foolish thing this time(
If I understand correctly , if you want the child element not to have a background you can add
#comment{
background: rgba(255, 255, 255, 0);
}
and try to remove any other background properties for this element that may be overriding
If you need a different background for the child element then add the follwing
#comment{
background:url(../path/to/image);
background-position:center;
background-size:cover
}
if you want to maintain the image aspect ratio then change cover to contain but this may not fill the whole #comments div in order to respect the ratio
If you need to add a pattern background then use background-repeat:repeat and remove cover and center
I don't think it's possible to do what you want with the current way that your HTML is structured. The #comments div is a child element of the #content div, which has a background set. Even if you give #comments no background, it's still going to show the background of the parent element. Perhaps you could just make the background of #comments white to overlay on top of the #content div? Or remove #comments from the parent element.
Example CSS:
#comments {
background: #FFFFFF;
}
Either move the comments box out of the content element, so content's background does not cover comments, or give the comments element its own background (color or image).
From your screenshots it seems everything is fine. Technically, all DOM elements are transparent by default, and it has no background, it is transparent. So your comments are transparent and have no background. So by setting it to none you are not chanding anything, because its background is none.
Related
When you style the background of the body element, why does the styling affect the entire screen and not just the body element itself? Let's say I create the following rule:
body {
width: 700px;
height:200px;
border: 5px dotted red;
background-color: blue;
}
I find that the border shows up as 700px wide as I would expect, but the background color occupies the entire browser viewport. Why?
Quote from http://www.w3.org/TR/CSS21/colors.html
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
The body element is the root-element, and thus, as required by the CSS rules it loses its background style and the background style is applied to the containing canvas (the webpage area in the browser), therefor the entire screen is blue. The other properties stay with the element (e.g. the border).
From CSS: The Definitive Guide by Eric Meyer
In CSS values are never propagated
upward; that is, an element never
passes values up to its ancestors.
There is an exception to the upward
propagation rule in HTML: background
styles applied to the body element
can be passed to the html element,
which is the document's root element
and therefore defines its canvas.
So when you add the background-color: blue; declaration to the body element, this value is propagated to the html element (which is also the root element). Add this declartion to see it for yourself.
html {
background-color: grey;
}
When you set the background color of <body>, the browser interprets this as the background color for the entire window, even if you've forced the <body> to be smaller with CSS. Otherwise, what color would the outside of the <body> tag be?
This is why it's a good idea to use containers. Such as:
<body>
<div id="container">
</div>
</body>
Example here: http://jsfiddle.net/Shaz/2FqqV/
You cannot set a width on the <body> element itself, that's why the entire screen appears to be blue versus just a 700px area.
It must set the entire background, because you cannot define parts of the page that are "not" the body.
One of those mysteries of CSS, I guess.
A better idea is to place your content inside of a <div> element and style that instead of trying to style the whole <body> tag.
$("#toggle").click(function(){
$("html").toggleClass("bg");
});
html.bg {
background: blue;
}
body {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html class="bg">
<head>
</head>
<body>
Test
<br>
<button id="toggle">Toggle HTML background</button>
</body>
</html>
I found that if you apply a CSS background to body, it takes up the whole page (no matter what the actual height or width of body is).
However, if you apply a CSS background to both html and body, the background for body does not take up the whole page.
Is this discrepancy expected behavior?
How would I go about superimposing two fullscreen backgrounds (say, a background color and a semi-transparent image?)
This is correct behavior.1 In standards mode, body, as well as html, doesn't immediately take up the entire height of the viewport, even though it appears so when you only apply a background to the latter. In fact, the html element will take on the background of body if you don't give it its own background, and html will pass this on to the canvas:
The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas, although any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) If the root's ‘background-color’ value is ‘transparent’, the canvas's background color is UA dependent. The root element does not paint this background again, i.e., the used value of its background is transparent.
For documents whose root element is an HTML HTML element or an XHTML html element: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.
That said, however, you can superimpose any background image over a background color on a single element (either html or body), without having to rely on two elements — simply use background-color and background-image or combine them in the background shorthand property:
body {
background: #ddd url(background.png) center top no-repeat;
}
If you wish to combine two background images, you need to rely on multiple backgrounds. There are chiefly two days to do this:
In CSS2, this is where styling both elements comes in handy: simply set a background image to html and another image to body which you wish to superimpose over the first. To ensure the background image on body displays at full viewport height, you need to apply height and min-height respectively as well:
html {
height: 100%;
background: #ddd url(background1.png) repeat;
}
body {
min-height: 100%;
background: transparent url(background2.png) center top no-repeat;
}
Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
In CSS3, the syntax has been extended so you can declare multiple background values in a single property, eliminating the need to apply backgrounds to multiple elements (or adjust height/min-height):
body {
background: url(background2.png) center top no-repeat,
#ddd url(background1.png) repeat;
}
The only caveat is that in a single multi-layered background, only the bottommost layer may have a background color. You can see in this example that the transparent value is missing from the upper layer.
And don't worry — the behavior specified above with propagating background values works exactly the same even if you use multi-layered backgrounds.
If you need to support older browsers, though, you'll need to go with the CSS2 method, which is supported all the way back to IE7.
My comments under this other answer explain, with an accompanying fiddle, how body is actually offset from html by default margins even though it looks like it's being padded out instead, again owing to this seemingly strange phenomenon.
1 This may have its roots in setting the HTML background and bgcolor attributes of body causing the background attribute to apply to the entire viewport. More on that here.
Suggest reading this:
https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
Essentially, in the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.
I have an image set as a background like so
.about {
height: 351px;
background-image:url("../images/about.png");
background-position:center;
background-repeat:no-repeat;
}
And I'm trying to user :hover
.about:hover {
background-image:url("../images/hover.png");
}
to display another image over the top. I want the original picture to still be there as the hover image has transparency.
This way replaces the image, is there a way to not replace it but just hover over the original image?
You need a mask, or an element inside your .about element (or positioned absolutely over it). The mask has the hover image as its background, but has visibility:hidden. Then, when the .about element is in hover state, it activates the mask. .about:hover .about-mask {visibility: visible;}. Pro tip: using visibility:hidden instead of display:none allows the browser to load the image, even though its not visible, so you wont have any flickering.
http://jsfiddle.net/nDHbD/
You could place a div above the .about one, then have it display it's image on :hover, that way, both images would show. Even better, you could animate a transition on your new div so it goes smoothly.
How would I add a small arrow beside the links that have a drop down in css?
background: url('arrow.png') no-repeat 0 0;
When I use this it adds an arrow on the left side of EVERY link but i want it only on the ones that have a sub menu.
Any help?
Use this:
background: url('arrow.png') no-repeat right top / 70% 70%;
The 70% percentages are for example, they are the width and height of the background size, change them as they suit you. (Since you wanted it smaller in your original question).
Apply this rule to the class of the links that will have a drop down.
Based on the other answers you've had it looks like your question has changed considerably... but to answer it as it stands, if you just want it on SOME of the links, you could add an additional class to those links, and add your background image just to that class.
http://www.w3schools.com/cssref/css3_pr_background.asp is a good reference for any sort of CSS syntax questions.
The way that you defined the CSS rule puts the arrow at the top left. To have it centered on the right, for example, use:
background: url('arrow.png') no-repeat right center;
I would also suggest adding a padding if you do that, so that the background image is not behind the text:
padding-right: 15px;
And to make padding work, you'll need to override the display of the links from inline to inline-block:
display: inline-block;
To resize the arrow, you could either just use a smaller image, or you could use the background-size attribute, although using the latter would lose support for IE8 and below.
I need to place an icon of 48x48 as background. I have this icon in my image sprite where of course there are many other images.
Is there a way to show as background only a porition of the image?
thanks
EDIT: Is there a way to do this without setting width-height of the backgrounded element? (I am not sure if acutally i can set a width-height)
Edit2: this is what i need: http://jsfiddle.net/pdxnj/
Thanks
Set the width and height of the element to 48px.
.element{
width: 48px;
height: 48px;
}
Set the background of the element to your image
.element{
background-image: url('image.png');
}
Move the background so that the top left corner of the icon is positioned correctly.
.element{
background-position: 20px 94px;
}
The two numbers in background-position are the X and Y coordinates (respectively) where the top left corner of your 48px by 48px is in your sprite image. So maybe it's actually 96px 0px or something.
EDIT
If you can't control the width and height of the element you are trying to put the background in, but you can add new DOM elements, you can try adding a span inside the element you really want to put the image as a background for.
It would look something like:
<div id="noControl">
<span id="justCreated">
</span>
</div>
and the CSS would look exactly the same as above, except you would need to treat the inline span as a block element:
#justCreated{
display: inline-block;
}
EDIT 2
If you have control over new DOM elements, and want to make your sprite the background without messing with a span, just add another div inside your original one.
Would wind up looking like:
<div id="noControl">
<div id="justCreated">
ALL of the content that used to be inside #noControl
</div>
</div>
and the CSS for it would be
#justCreated{
width: 48px;
height: 48px;
background-image: url('image.png');
background-position: 96px 0px;
z-index: -200;
/* z-index of all the contents needs to be not set, or set to larger than -200 */
}
This is all theoretical, but it SHOULD work.
This way, you can apply the sprite sizing to a block element without messing with the inline stuff. This may affect CSS if it addresses elements by child status (like #noControl > a), because you are inserting a div between the parent and the child.
I am still researching whether you can do this at all if you have no control over the DOM at all.
simple answer no, but by using html elements you can. Html element hight and width should match the background portion of image.
You can if you're not going to be setting a repeating background. Otherwise no.
To do this, you need to play around with the background offset, and width/height of the actual element that you're setting the background on.
it will depend on how much whitespace is around it in the sprite whether it will fit where you need it to without showing parts of other images.. however you could e.g. put a span where you want the image and crop the span to 48x48 so that it only shows the icon itself. it kind of depends what you want to use it for and how the sprite is built
It's better using ::before or ::after so you can easily define your image size without having overflow problems!
This is possible. You need to display that in a 48x48 div then set position: absolute style for the div and define left and top too for it. Also set z-index: 0 for the div so that it appears under everything.