When I apply a CSS background to my div tag, the color will work but the background-image will not display.
I want the background-image to be repeated across the bottom of my divs, but even if I only apply background-image: url('assets/shadow.png'); without position, repeat, or background-color, it will still not show up. Only white is displayed.
But if I apply background-color: #ECECFB; the background-color WILL show up correctly in the background.
Why doesn't background-image work?
CSS
#slider-container,#footer-container,#main aside {
background-color: #ECECFB;
background-image: url('assets/shadow.png');
background-repeat: repeat-x;
background-position: bottom;
}
The image is linked correctly. Image is 15px by 12px.
I tried shorthand CSS background and only color was displayed.
Look at my fiddle below, notice it works fine. If the image does not download (i.e. bad url) then the background colour will only appear. Check the location or the network tab on chrome dev tools to see if the background image is not being loaded (404).
<div class="foo"></div>
.foo {
background-color: red;
background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
background-repeat: repeat-x;
background-position: bottom;
height: 500px;
width: 500px;
}
http://jsfiddle.net/rlemon/XCbK4/
The background property also can be used to display images.
Syntax
background: color position size repeat origin clip attachment image;
When using background and background-image at the same time you may have a conflict. I assume using background-color is behaving different for some reason or it may be significant in which order you use them.
This will of course give you the color instead of the image, too:
#slider-container,#footer-container,#main aside {
background-image: url('assets/shadow.png');
background: #ECECFB; // overwriting the image
}
You can try this. I hope it will help:
#slider-container,#footer-container,#main aside {
background: #ECECFB url('assets/shadow.png') repeat-x bottom
}
I've got three background images, all of width 643px. I want them to be set out like so:
top image (12px height) no-repeat
middle image repeat-y
bottom image (12px height) no repeat
I can't seem to do it without getting them to overlap (which is a problem because the images are partially transparent), is something like this possible?
background-image: url(top.png),
url(bottom.png),
url(middle.png);
background-repeat: no-repeat,
no-repeat,
repeat-y;
background-position: left 0 top -12px,
left 0 bottom -12px,
left 0 top 0;
Your problem is that the repeat-y is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.
One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px at the top and bottom. The result can be seen here (the opacity in the demo is just to show that there is no overlap going on). Without opacity, see here. The relevant code (tested in CSS3 browsers: IE9, FF, Chrome):
CSS
div {
position: relative;
z-index: 2;
background: url(top.png) top left no-repeat,
url(bottom.png) bottom left no-repeat;
}
div:before {
content: '';
position: absolute;
z-index: -1; /* push it to the background */
top: 12px; /* position it off the top background */
right: 0;
bottom: 12px; /* position it off the bottom background */
left: 0;
background: url(middle.png) top left repeat-y;
}
If you needed or wanted IE8 support (which does not support multiple backgrounds), then you could put the top background in the main div, and put the bottom background in by using the div:after pseudo element positioned to the bottom of the container.
If you can add padding/borders to the block equal to the backgrounds you want to position without overlapping other block, you can use the background-clip & background-origin to position the top and bottom backgrounds over the paddings/borders, and the repeating background over the content/paddings+content.
Here is an example: http://dabblet.com/gist/2668803
For your code, you'll possibly need to add something like this:
padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-origin: padding-box, padding-box, content-box;
or
border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-origin: border-box, border-box, padding-box;
And you'll get what you need. If you can't get the paddings/borders, the pseudo-element like ScottS mentioned would work perfectly.
Try do it like this:
background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
}
EDIT:
Was just an example, but here's the css with your css:
background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;
}
I actually found a simpler fix, because I was having this same issue with a horizontal navigation.
Rather than adding code like the other answers you just have to list it differently in your CSS. The center image that repeats needs to be listed last, not first or second.
In my code it looks like this:
background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;
to use backgroud-position with 2 arguments, must to Write in extended writing backgroud-position-x and backgroud-position-y
background-position-x: left 0;
background-position-y: top -12px, bottom -12px, top 0;
A radical but effective way to deal with this, if:
you want to apply backgrounds with no overlapping to a ":before"
the ":before" element as a known max height
&:before {
background: url('vertical-line.png') no-repeat 0px,
url('vertical-line-repeat.png') no-repeat 140px,
url('vertical-line-repeat.png') no-repeat 200px,
url('vertical-line-repeat.png') no-repeat 260px,
url('vertical-line-repeat.png') no-repeat 320px,
url('vertical-line-repeat.png') no-repeat 380px,
url('vertical-line-repeat.png') no-repeat 440px,
url('vertical-line-repeat.png') no-repeat 500px,
url('vertical-line-repeat.png') no-repeat 560px,
url('vertical-line-repeat.png') no-repeat 620px,
url('vertical-line-repeat.png') no-repeat 680px,
url('vertical-line-repeat.png') no-repeat 740px;
}
Here's a method that uses 3 div's for each of the Top, Middle, and Bottom images that are transparent to apply to your webpage.
Background wallpaper is optional.
Tested in modern browsers and is IE8 friendly.
This method allows you to treat the body element as it should be treated, i.e., your webpage markup does not need to be in a wrapper or containing element.
jsFiddle Example
jsFiddle Example with centered filled
Since the above example uses image place holder content that is without transparency for Top and Bottom images, you can verify markup works with transparency with this jsFiddle that uses mini transparent icons in repeat mode HERE.
The only (practical, non hair-threatening) way I see is do do that in Javascript, when the page has loaded, and when it is resized, with a canvas sized to fit the innerHeight and the 3 images: draw the first one once at the top, draw the second as many times as required to cover the remainder of the canvas, and draw the 3rd one at the bottom of the canvas. Position the canvas at 0,0 with a ridiculously negative z-index.
I had a go at it with 3 images (643 x 12, 100 and 12) and of course the first issue I saw is that the 3rd image is drawn over part of the last iteration of the 2nd image -- unless you have a window height of exactly 12+12+(p2.height*X), you'll have some overlap. But that's expected, right?
I think z-index will fix this because z-index only affects CHILD elements, meaning you can't mess up anything else on the page that uses z-index.
top and bottom images z-index:3;
middle image z-index:2; background-repeat:repeat-y;
I've a webpage with a background image that needs to be kept sharp and in focus.
The problem is that to achieve that it obviously has to have a set size every time.
I need a way of filling in the remaining space (which will vary from screen size to screen size) with black.
The easiest way to see what i'm talking about is if you go to the webpage: (no self promotion meant)
http://hopeish.com
Particularly if you are using chrome and firefox - as safari is okay and IE isn't being affected in the same way
Any ideas how I can do this??
background: url(image.jpg) #000 no-repeat;
background:#000 url(image.jpg) bottom right no-repeat;
this way your picture will be at the bottom right and the rest will be filled with black.
You currently have:
body {
background: url(image.jpg);
background-repeat: no-repeat;
/*background-attachment:fixed;*/
}
Add background-color: black; to have a full black background.
body {
background-color: black;
background: url(image.jpg);
background-repeat: no-repeat;
/*background-attachment:fixed;*/
}
Or use the shorthand background property variant seen in the other answers.
http://reference.sitepoint.com/css/background
Achievable with simple CSS.
body {
background: url('http://hopeish.com/image.jpg') no-repeat top right black;
}
Here's a live example
html {
background: #9c9c9c url(../images/bg-bottom.jpg) center top;
}
body {
border-top:2px solid #fecd2a;
background:#9c9c9c url(../images/bg.jpg) repeat-x center bottom;
}
I need bg.jpg which is the large background with the black gradiantat the top, to be at the top and for the bg-bottom.jpg to be repeated at the bottom. How come this doesn't work, is there and easier way? Apart from creating one long image.
http://fluroltd.com/clients/harveys/latest-news/
Looks like you need to switch around your positioning and use a transparent background for the body tag:
html {
background: #9c9c9c url(../images/bg-bottom.jpg) center bottom
}
body {
border-top:2px solid #fecd2a;
background: transparent url(../images/bg.jpg) repeat-x center top;
}
Your CSS on the body should be
background: url("../images/bg.jpg") repeat-x scroll #9C9C9C;
I don't think adding a background to your HTML tag is going to get you anywhere. If I were you I would just make one super long, narrow-width image that will not possibly be exceeded by the length of your page. You can't have multiple BGs without using CSS3, which I personally wouldn't recommend.
Snippet of my CSS:
#wrapper div.box {
background: url('box-bg.png') left top repeat-y;
}
#wrapper div.box h2 {
background: url('box-top.png') left top no-repeat;
}
That doesn't work. Instead of a transparent image it displays the image but with white space in place of transparent background.
If I do:
<img src="box-top.png" alt="" />
The transparent image shows up correctly. What's casuing this problem?
Have you tried explicitly giving the elements a "background-color: transparent"?
I agree with Pekka - Is it possible those HTML elements are inheriting a white background color from another CSS rule? You may want to try:
#wrapper div.box {
background: transparent url('box-bg.png') left top repeat-y;
}
#wrapper div.box h2 {
background: transparent url('box-top.png') left top no-repeat;
}
May I ask what browser you are using? IE6 doesn't display PNGs correctly. Also, how are you creating your PNG? If it's Photoshop, make sure you do a Save as Web... or it will not display correctly (transparency issue).