I'd like to get the gradient effect of purple or white color that starts with a strong tone and gradually this until dimming seems to disappear or become transparent and you see the background behind.It's possible?
I hope I have explained!
Regards!
I'd suggest using a CSS gradient generator.
Try this one: http://www.colorzilla.com/gradient-editor/
It has a number of presets, some of which look like they might be useful for you.
div {
height: 500px;
width: 300px;
background-image: -o-linear-gradient(#8860af, #4e91cc, #c7deee);
background-image: -moz-linear-gradient(#8860af, #4e91cc, #c7deee);
background-image: -webkit-linear-gradient(#8860af, #4e91cc, #c7deee);
}
Live demo: Tinkerbin
Read more here.
Related
I have been googling this for hours but none of the suggestions found are working.
I have a page banner which is light blue. On it I have placed a transparent png image file. The blue background does not show through, I just see the white/grey checkerboard effect where the transparency is.
It is pretty simple. I have a Div container defined in CSS and a class for the img. Here is the CSS
.header-column-small {
float: left;
width: 30%;
background-color: transparent !important;
}
.header-column-small img {
width:220px;
height: 150px;
object-fit: contain;
}
The background color is defined further up the chain in a parent div class.
And here is the HTML
<div class="header-column-small">
<img src="books-on-shelf-small.png" />
</div>
Here is how it looks
Screenshot
I have tried using background-colour: transparent in both the image class and the immediate image container (header-column-small) but no better.
Any help really appreciated
Many thanks
Mark
OK, hangs head in shame... :)
Turns out the PNG file was not a transparent background image at all. Just a warning to others that may be searching the net for images for their project. The sites that claim to be providing 'transparent' png files are not always doing so.
I should have looked for the obvious first before trying all sorts of code hacks to fix a problem that wasn't really there..
Thanks to those who replied so quickly to shine a light on my short-sightedness!
Cheers
Mark
I'm trying to clip my images so that they are all circles; however, using css clip-path doesn't appear to be working? What am I doing wrong? I think I am using the spec correctly.
Here is my CSS:
img{
height:200px;
width:200px;
position:absolute;
-webkit-clip-path: circle(50%, 50%, 50%);
}
Here is a JS Fiddle of this code in action: http://jsfiddle.net/vLer8/
What am I doing wrong? And how can I clip my images so that they are all circles?
It looks like you are going to want to go through a different approach as shown here.
The reason being that most browsers are not compatible with the -webkit-clip-path, as far as research has shown and even less are compatible with the circular function of that.
With that being said ,your best bet will be using the border radius approach, which dictates that you probably want to have the height/width to be the exact same when in use. Here is the example HTML/CSS below from my JsFiddle:
img {
position:absolute;
border-radius: 50%;
}
<img src="http://i.stack.imgur.com/NB1OV.jpg"
width="200px" height= "200px"/>
Which will still render your photo to be a circle, and it easily used. If you want to do anything that is not circular, then the webkit would be a good approach as seen in this JsFiddle
I downloaded a round button to use as a dialog close image. It looks round, but when I open in Windows Paint I can see it is actually a white square with the round button in it, and when I display it in a browser it shows the white square outline that I don't want. Is there any way to get rid of that?
Here is a jsfiddle that illustrates what I mean...
http://jsfiddle.net/xY9Kp/
<body>
<button id='b1'/>
</body>
#b1 {
background: transparent url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR2lu62vUif1sHaq-qhefoWeA2GZ9zBr2j7arVLHdfFTKwcoZSAKA') no-repeat center center;
background-size: 100%;
width: 24px;
height: 24px;
cursor: pointer;
}
Thanks in advance for any constructive input.
It's worth adding that your issue is not with CSS. Even though border-radius might help by simply hiding the white areas, you ultimately need to find an image with a transparent background. There is no way to alter the color of some of an image's pixels with CSS.
If you're browsing for icons, look for the ones with a checkered white-gray background -- this means it's actually transparent.
Add this to your CSS:
border-radius: 12px;
should do it
I have a background image and below that I want to have a color.
I have this CSS:
body {
background: url('/images/background.jpg');
background-color: #000;
}
But the image appears with no color. I've also tried this:
body {
background: #000 url('/images/background.jpg');
}
But that doesn't work either. What am I doing wrong?
What do you really want? The background color around the image background or in the back of the image? If it's in the back of the image you have to use an .png (transparent) image and the background: #000 url('/images/background.png');
background: #000 url('/images/background.jpg');
Your background color is actually working but it is being overlapped by declaring a background-image. Unless your image supports transparency like .png and opacity was declared. You would be able to view your bg-color.
It will help if you provide us your exact image and the output you want to achieve.
Use in this way background: #657b78 url('../images/background.jpg') repeat top left;. Do not forget to check if the URL of such image is correct.
On Yahoo.com, I really like the light gray body gradient background. (Just the gray fade)
However, I can't find the image they use to great this effect.
Does anyone know what image/code Yahoo uses to create this background effect?
It's the image: http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png
If you look at the CSS you'll see:
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
Which is what everybody else is pointing out. However, the part that nobody else has pointed out is that there is also:
background-position: 0px -2335px;
Which defines an offset so that the background you see doesn't actually start till way down the image.
The gradient that is shows is white to grey, then transparent. In order to make the gradient in this manner you have to set the color of the page equal to the last extent of the gradient. So if you look in that CSS you'll also see:
background-color: #E8EDF0;
This completes the gradient you currently see on yahoo.com.
I have also confirmed that #E8EDF0 is the correct hex code for the last non-transparent color on that background image.
in your image app, make a gradient that starts very slightly darker then it ends
Have a look at the Style on the HTML element using something like FireBug or Chrome's Inspect Element or even IE's Developer stuff.
Also a good thing that a lot of beginners don't understand is that you create a gradient image that's for example 100px tall by only 10px wide. then you just use a css style like this:
body { background:
url('backgroundImage/png') repeat-x; }
The repeat-x repeats the image horizontally.
Current yahoo background has the following CSS property
body{
background: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20110124.png) left -2335px repeat-x; /*unsupported fallback*/
background: -moz-linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Firefox*/
background: linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Standard*/
background-color: #dce2e7;
background-attachment: scroll;
}