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).
Related
I have to do the following:
The top of the div is an image of a gradient, then in the bottom it continues as a solid color. Can I do this with simple CSS? I know the following is invalid.
{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;
Note: the first 225px, which the image fills, should be without the background-color
As far as I know, you need to use a gradient for the solid color, so that you can set it correctly.
The CSS would be:
.imgbg {
width:255px;
height:355px;
background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8);
background-position: 0px 0px, 0px 112px;
background-repeat: no-repeat, no-repeat;
background-size: 255px 112px, 255px 233px;
}
Here is your updated fiddle
Basic suport should be fine for browsers supporting multiple backgrounds, the only problem would be with IE <= 8. Gradient background could be a problem with IE9, but I think that it should work (I can not test IE9). If it would be really a problem, see colozilla for a fix.
Check out this fiddle and tell me if this is what you want.
FIDDLE
HTML
<div class="imgbg"></div>
CSS
.imgbg {
width:255px;
height:355px;
background:#f7d8e8 url('http://placehold.it/255x255') no-repeat;
}
I would do the following:
#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }
This will just put your background image on the top of the div; the rest of it, will be the color you selected for the entire background of the div.
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 have a problem with setting a background image over my background color: Here is my example so that you can see what I mean: JSFiddle
Now here is the functional CSS part:
#tancan{
background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
}
As you can see in the JSFiddle, the background image repeats. If I use no-repeat as a property, the image disappears.
Also, I want the background image to float to the right, and should the image be bigger than the containing div, how to I make it fit proportionally? - Like you would make an image tag <img/> fit by using width: 100% and height: 100%?
I don't want to use an HTML image tag, it would be much easier but there are several reasons I do not want to use it.
Try this - http://jsfiddle.net/vmvXA/17/
#tancan {
background: #ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat top right;
}
and to make the background image not exceed its parent container you can use background-size: contain - http://jsfiddle.net/vmvXA/22/
Here's the fiddle.
background:#ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat right top;
To make the code shorter, it is possible to specify all the settings in one single property. This is called a 'shorthand property'.
To make all pictures fit inside it's parent add the style property background-size:contain;.
Updated the fiddle.
You can't just add no-repeat to background-image, because background-image is a specific property that only refers to the image itself. If you want to add it all in one declaration, then set background:
background: url('http://lamininbeauty.co.za/images/products/tancan2.jpg') #ebebeb no-repeat top right;
or keep it all separate, up to you:
background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
background-repeat: no-repeat;
background-position:top right;
background-size: contain;
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.