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.
Related
I have this image and I want to make it white by default and cyan by hover. Is there another way than to make 2 images, one white and one cyan?
You can make a PNG where the magnifying glass is transparent, then set the background color on the img tag in CSS:
img {
background: steelblue;
}
img:hover {
background: skyblue;
}
Demo: http://jsbin.com/jeqihuxo/2/edit
Another way is to use sprites. Well, technically would not be two seperate images but one image which background-position is changed on hover. Your image is 36x48, so make a new image 72x48 with the non-hover version on the left side and the hover version on the right and move the background on hover.
What would be the most efficient way to change the walk signals on the header image on http://www.danielLmusic.com from red to green. I would think there'd be a more efficient way to do it than to change backgrounds since i'm only changing a small percentage of it. Any help for my newbie self would be most appreciated.Also, it's a wordpress site if that makes any difference.
Thank you in advance!
Recreated the background image so that the signals are TRANSPARENT, you'll need to use a PNG or GIF. Use background-color CSS property to change the color, leaving the background-image untouched.
.bg {
background-color: red;
background-image: url('...');
}
.bg:hover {
background-color: green;
}
I cannot solve a css problem.
I have a nav bar which should be transparent. But the links on it also get transparent due to the opacity attribute and because they are child elements of the transparent navigation bar.
can u help me to solve this?
If you dont want your link text to be affected you should modify the rule for the .container selector to look like this
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
it will keep your background color design without affecting your text
Opacity , as well said here several times , affect the element and its children
Using opacity . Text is affected
Using rgba(255,255,255,0.5), children not affected
Take care of the other rules that can take action due your javascript and hover situations
Fiddle here
Bis spater
The solution is easy. Just set the background-color CSS property to transparent.
.nav {
background-color: transparent;
}
In css3 you can use transparent backgrounds instead of making the whole panel transparent.
To add a transparent color you can do: rgba(255,255,255,.5) where the .5 is the opacity.
You should try just a simple css background property.
.navbar
{
background-color: transparent;
}
I use transparent png image (bg.png) with the desired opacity, and call it like this:
.menu
{
background: url('bg.png') repeat;
}
The png image can be small, even 1x1 pixel. The repeat is to fill the background space entirely.
its as simple as this
background: none;
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;
}
What I am trying to do is to show both background-color and background-image, so that half of my div will cover the right shadow background image, and the other left part will cover the background color.
But when I use background-image, the color disappears.
It's perfectly possible to use both a color and an image as background for an element.
You set the background-color and background-image styles. If the image is smaller than the element, you need to use the background-position style to place it to the right, and to keep it from repeating and covering the entire background you use the background-repeat style:
background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;
Or using the composite style background:
background: green url(images/shadow.gif) right no-repeat;
If you use the composite style background to set both separately, only the last one will be used, that's one possible reason why your color is not visible:
background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;
There is no way to specifically limit the background image to cover only part of the element, so you have to make sure that the image is smaller than the element, or that it has any transparent areas, for the background color to be visible.
To tint an image, you can use CSS3 background to stack images and a linear-gradient. In the example below, I use a linear-gradient with no actual gradient. The browser treats gradients as images (I think it actually generates a bitmap and overlays it) and thus, is actually stacking multiple images.
background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;
Will yield a graph-paper with light blue tint, if you had the png. Note that the stacking order might work in reverse to your mental model, with the first item being on top.
Excellent documentation by Mozilla, here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
Tool for building the gradients:
http://www.colorzilla.com/gradient-editor/
Note - doesn't work in IE11! I'll post an update when I find out why, since its supposed to.
use
background:red url(../images/samle.jpg) no-repeat left top;
And to add to this answer, make sure the image itself has a transparent background.
Actually there is a way you can use a background color with a background image. In this case, the background part will be filled with that specified color instead of a white/transparent one.
In order to achieve that, you need to set the background property like this:
.bg-image-with-color {
background: url("example.png") no-repeat, #ff0000;
}
Note the comma and the color code after no-repeat; this sets the background color you wish.
I discovered this in this YouTube video, however I'm not affiliated with that channel or video in any means.
Here's an example of using background-image and background-color together:
.box {
background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
width: 100px;
height: 100px;
margin: 10px 0 0 10px;
display: inline-block;
}
<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>
Make half of the image transparent so the background colour is seen through it.
Else simply add another div taking up 50% up the container div and float it either left or right. Then apply either the image or the colour to it.
Gecko has a weird bug where setting the background-color for the html selector will cover up the background-image of the body element even though the body element in effect has a greater z-index and you should be able to see the body's background-image along with the html background-color based purely on simple logic.
Gecko Bug
Avoid the following...
html {background-color: #fff;}
body {background-image: url(example.png);}
Work Around
body {background-color: #fff; background-image: url(example.png);}
Hello everyone I tried another way to combine background-image and background-color together:
HTML
<article><canvas id="color"></canvas></article>
CSS
article {
height: 490px;
background: url("Your IMAGE") no-repeat center cover;
opacity:1;
}
canvas{
width: 100%;
height: 490px;
opacity: 0.9;
}
JAVASCRIPT
window.onload = init();
var canvas, ctx;
function init(){
canvas = document.getElementeById('color');
ctx = canvas.getContext('2d');
ctx.save();
ctx.fillstyle = '#00833d';
ctx.fillRect(0,0,490,490);ctx.restore();
}
Please let me know if it worked for you
Thanks
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;