Can images background be derived from CSS styling? - html

Question

I've an image. Can I derive its background from CSS styling??
Following is the image. I want a similar background in my div.
PS: I can use it as background-image, but I dont want to. So, please dont suggest this solution.

Answer 1

The easiest way will be to use a gradient.
background:-webkit-linear-gradient(left, #743D90, #954792); /*for chrome&safari*/
background:-moz-linear-gradient(left, #743D90, #954792); /*for firefox*/
background:-o-linear-gradient(left, #743D90, #954792); /*for opera*/
background:-ms-linear-gradient(left, #743D90, #954792); /*for IE*/
background:linear-gradient(left, #743D90, #954792); /*standard*/
makes a gradient with the colors of your image. There are so many lines of CSS so it will work in nearly all browsers.
Example:
http://jsfiddle.net/6uMzc/4/
Hope this will work for you.

Answer 2

Absolutely it can be done.
Wrap the image tag inside a div.
<div class="bg">
<img src="xxx.jpg" alt="image">
</div>
Note the image must have transparent background(this should be made sure by image editing tools like photoshop)
Now style the div with background gradient and size as something below.
.bg{
height:100px;
width:200px;
background:-webkit-linear-gradient(left, red, green);
background:-moz-linear-gradient(left, red, green);
background:-o-linear-gradient(left, red, green);
background:-ms-linear-gradient(left, red, green);
background:linear-gradient(left, red, green);
}

Answer 3

If I understand you correctly, you want to create a background similar to that image with css. You have several options for doing this. For starters you can use this Gradient Generator to create gradients. They are relatively simple, I'm sure you can figure out the core concepts, the generator is primarily because the different css prefixes must be added for compatibility.
You said not to consider the lines, but I do think I should point you to this CSS triangle generator, incase you need it. Your image has the lower portion cut off at an angle, and the best way to do this is (IMHO) is to create a white triangle and put it over it.
If you need any help applying these concepts, feel free to ask.
Update: See: http://jsfiddle.net/6uMzc/6/
You need two seperate divs to create this effect. One div is the gradient, the other is the triangle that removes the lower corner. I'll explain what the different parts of the css do:
The background attributes are all defining the gradient for different browsers.
position:relative;
position:absolute;
left:0;
bottom:0;
These lines are postioning the divs. This can get quite complex, but it is incredibly useful for web developers, so you should probably do further research. I actually think the w3schools page on this is pretty good. Elements with relative, fixed, and absolute positions can be modified by the left, right, bottom, and top attributes, which can move them around in different directions. Elements with relative positioning are moved "relative to their normal position." Elements with absolute positioning are moved relative of the next containing element with a relative or absolute positioning, or the body. Since the containing div is positioned relative, the position:absolute moves the triangle relative to the gradient. Left:0 and bottom:0 put the element in the bottom left corner.
border-width: 50px 0 0 500px;
Change the first number to change height and the last one to change width. 500px is the width of the containing div, so this covers up the entire bottom of the containing div.