html background with image & color

Question

Hi i was going through a website where they used a very unique (according to me) background. they are mixing a color with an image and using it as background. the image is like

Then they are mixing some yellow color in it & it become like this

When i went through the code they were using something like this

background: #f6b93c url(bg1.png);

but it did not work for me! Please help me out?

Answer 1

The image bg1.png does not seem to be in baseurl. You should try relative url. eg. if you have image inside 'images' folder, "images/bg1.png" should work.

Answer 2

a png image with transparency and bg color will do the trick,

Otherwise if it is a jpeg, the color will fill the rest of the part(for eg:in a div), the image wont cover.

what was happening with this background: #f6b93c url(bg1.png); fill the color #f6b93c then on the top of that place the image, so it was a %0%(for eg.) transparent image, this will end up with a mixer of both

Answer 3

That is nothing but a short hand syntax

background: #f6b93c url(bg1.png);

So the above code simply means

background-color: #f6b93c;
background-image: url(bg1.png);

For more info on background short hand syntax

Demo

Answer 4

with latest CSS3 technology, it is possible to create texured background. Check this out: http://lea.verou.me/css3patterns/#

but it still limited on so many aspect. And browser support is also not so ready.

your best bet is using small texture image and make repeat to that background. you could get some nice ready to use texture image here:

http://subtlepatterns.com