I just trying to put a background color (rgba) with an image, but doesn't work.
My CSS is:
section{
width:100%;
height:400px;
background: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
}
I just trying to put with diferent positions, like background-image, or just background, but doesn't work.
As I pointed out in comments, background color behaves as a fallback for the background image, unless the image is transparent:
section {background: rgba(0,0,0,0.5) url(../img/background2.png) 0 0 no-repeat;}
If you want to cover the image by an overlay layer (using rgba()), you can create a pseudo-element and position that as absolute the use left, top, right and bottom properties to expand the overlay, as follows:
.box {
background: url(http://lorempixel.com/500/500) no-repeat center center;
position: relative;
}
.box:after {
content: ' ';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0; /* Fill the entire space */
background-color: rgba(0,0,0,.4);
}
WORKING DEMO.
Does it have any content?
If so, you can use z-index property to move the overlay beneath the content which is wrapped by a relative positioned <p> element with a higher z-index value, as follows:
<section class="box">
<p>Content goes here...</p>
</section>
p {
position: relative;
z-index: 2;
}
.box:after {
content: ' ';
position: absolute;
z-index: 1;
left: 0; right: 0; top: 0; bottom: 0;
background-color: rgba(0,0,0,.4);
}
UPDATED DEMO.
Use transparent PNG as a background image and then you can see both color and image together.
section {
width:100%;
height:400px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-repeat: no-repeat;
background-size: contain;
background-color: rgba(0, 0, 0, 0.5);
}
You can use rgba within the same declaration
DEMO http://jsfiddle.net/b6vzN/1/
background:url(../img/background2.jpg) no-repeat rgba(0,0,0,0.5);
If you wish to assign it seperately as in your example then you need to specify background-image, not just background
background-image: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
Related
I want to create a horizontal line similar to the one found on this post and marked as the solution but only with the shadow appearing at the bottom.
The closest I can get is getting the shadow shown in the middle of the line, both up and down.
Like this?
.fancy-line {
border: 0;
height: 1px;
position: relative;
margin: 0.5em 0;
}
.fancy-line:before {
top: -0.5em;
height: 1em;
}
.fancy-line:after {
height: 0.5em;
top: calc(-0.5em + 1px); /* adjusted this */
}
.fancy-line:before, .fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
.fancy-line, .fancy-line:before {
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%);
}
body, .fancy-line:after {
background: #f4f4f4;
}
-Some Text-
<div class="fancy-line"></div>
The original code generates a radial gradient and covers the bottom half of it with a block colored the same as the background. Adjusting it to your requirements is just a matter of moving the covering piece from the bottom to the top.
Also, note: hr elements are required to be self closing. This precludes the use of :before and :after since self-closing elements can't have children. In the referenced answer, they weren't using any particular feature of hr, so I've converted it to a div here.
Take a look at this: http://jsfiddle.net/9rovqvoj/1/
It's basically the same, but adding a mask before pseudo element :before instead of :after and added a z-index to it.
hr.fancy-line:after {
top: -0.5em;
height: 1em;
}
hr.fancy-line:before {
content: '';
height: 0.5em;
top: -0.5em;
z-index: 999;
}
i'm trying to use opacity on a background-image but if i use it it will effect the text aswell.
.content_wrapper{
width:320px;
height:374px;
color:black;
background-image: url('../images/beuningse-boys-midden.png');
background-size:130px;
background-repeat: no-repeat;
background-position-x: 95px;
background-position-y: 155px;
}
You cannot change the opacity of a background-image with CSS. However, there are ways of achieving the same result.
Method 1
This method uses the :after pseudo class which is absolutely positioned inside its parent. The background image is set on this pseudo element along with the opacity giving the impression that the background opacity is set on the background itself.
HTML
<div>
Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>
CSS
div {
width:320px;
height:374px;
display: block;
position: relative;
border: solid 1px #f00;
}
div::after {
content: "";
background-image: url('http://placehold.it/800x600');
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Method 2
If you need backwards compatibility, you will need an extra element in your markup to achieve the same result:
HTML
<div class="container">
<div class="background"></div>
Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>
CSS
.container {
width:320px;
height:374px;
display: block;
position: relative;
border: solid 1px #f00;
}
.container .background {
content: "";
background-image: url('http://placehold.it/800x600');
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Here is a great article with a CSS3 method of achieving the same result:
http://css-tricks.com/snippets/css/transparent-background-images/
Give to the text a class or an id and give it a color without opacity.
p {
color: rgb(120,120,120); // use here what color you want
}
I'm trying to put a dot in each corner of a container. I'm thinking the trick to this is a combination of .my-container:before and setting the :before's border or background property. The effect I want is similar to SO#17306087, but I don't want to use images.
Edit
jsfiddle
I'll be using this quite a bit, so would prefer it to happen automatically with a css class (not require additional DOM elements).
Edit
Since svg is text-based and can be inserted directly into css, I'm looking into that method. I see here that this does work: example fiddle
my updated fiddle (currently has a css error that I'm trying to pin-point) fixed fiddle with 4 dots using background prop
The svg is valid and not throwing errors as DOM: fiddle
You can do it only on a div and with standard CSS.
The trick is to use the pseudo elements to display 2 circles using radial gradients.
.test1 {
width: 200px;
height: 200px;
background-color: lightblue;
position: absolute;
left: 220px;
}
.test1:before, .test1:after {
content: "";
position: absolute;
height: 100%;
width: 20px;
top: 0px;
background-image: radial-gradient(circle at center, red 5px, transparent 5px), radial-gradient(circle at center, red 5px, transparent 5px);
background-size: 20px 20px;
background-position: top center, bottom center;
background-repeat: no-repeat;
}
.test1:before {
left: 0px;
}
.test1:after {
right: 0px;
}
fiddle
You could also draw the circles in the elements itself, but then you can not apply it to elements having background.
The above code renders the circles pixelated. It's better leaving 1 pixel for the red/transparent transition
background-image: radial-gradient(circle at center, red 5px, transparent 6px), radial-gradient(circle at center, red 5px, transparent 6px);
updated fiddle
Assuming you're okay with something a little crazy, there is a CSS only solution that's completely based on a single class (on a single element). The only caveat is that that element MUST have at least one child element (which should probably be the case anyways, right?)
.my-container:before, .my-container:after, .my-container *:first-child:before, .my-container *:first-child:after {
content: '';
height: 5px;
width: 5px;
position: absolute;
background: #777;
border-radius: 50%;
}
.my-container:after {
right: 0;
top: 0;
}
.my-container *:first-child:before {
left: 0;
bottom: 0;
}
.my-container *:first-child:after {
bottom: 0;
right: 0;
}
You can use :before and :after to create your dots, though the challenge comes in the fact that this only creates two dots per element. Because of this, I've set it to look for the first element inside the container, and apply the same styles to that. (the wildcard selector * looks for any element, and :first-child makes sure it only gets applied to one child element)
See fiddle:
http://jsfiddle.net/5N9ep/2/
Now obviously this won't work in every situation, and you can always mess with the selector for that second element if you have something that will work better.
Other than that, if you want to make it a little more practical (but less cool), I would recommend just making two wrapper div elements, and giving each one of them a unique class, each creating two dots with a simple :before and :after.
http://jsfiddle.net/qQP84/
HTML :
<div class="maindiv">
<div class="lefttop dot"></div>
<div class="leftbottom dot"></div>
<div class="righttop dot"></div>
<div class="rightbottom dot"></div>
</div>
CSS
.maindiv {
height: 150px;
width: 150px;
background: blue;
position: relative;
}
.dot {
height: 12px;
width: 12px;
border-radius: 100%;
background: red;
position: absolute;
}
.lefttop {
top: 0;
left: 0;
}
.leftbottom {
bottom: 0;
left: 0;
}
.righttop {
right: 0;
top: 0;
}
.rightbottom {
right: 0;
bottom: 0;
}
EDIT:
jQuery solution to easily append the dots to different divs that have the same class
$('<div class="lefttop dot"></div><div class="righttop dot"></div><div class = "leftbottom dot"></div><div class="rightbottom"></div>.appendTo('.myDivsThatNeedDotsClass');
This will append(give) the 4 dots to each element that has the class .myDivsThatNeedDotsClass
With this approach you can remove the HTML from above, but keep the css like it is.
If you don't have the same class for all of them, than you can do this
.appendTo('.myDivsThatNeedDotsClass, .anotherClassThatNeedsDots, #anIDthatNeedsDots');
the following can be your mark-up
<div class="my-container">
<div class="tr"></div>
<div class="tl"></div>
<div class="br"></div>
<div class="bl"></div>
<p class="stuff">Some stuff</p>
</div>
the css as follows
body {
margin: 10px; /* for visibility */
}
.my-container {
background-color: #eee; /* for visibility */
position: relative;
width:98%;
border:1px dotted red;
}
.my-container .stuff {
text-align:center;
}
.tr,.tl,.br,.bl{
position:absolute;
border:5px solid red;
border-radius:10px;
}
.tr{
top:0;
right:0;
}
.tl{
top:0;
left:0;
}
.br{
bottom:0;
right:0;
}
.bl{
bottom:0;
left:0;
}
I have a footer that is 1024px in width with a background image 1024px by 482px.
I want to put an x-repeating background to the left of it and an x-repeating background to the right of it. How do I do this?
This is what I have:
.footer {
background:
url("footerleft-bg.png") repeat-x,
url("footerright-bg.png") repeat-x 0 0 #fff;
height:482px;
width:100%;
}
But it makes the left background image completely cover the right one.
You could do it like this:
demo
footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 10em;
background: black;
}
footer:before, footer:after {
position: absolute;
top: 5%; bottom: 5%;
width: 40%;
background-repeat: repeat-x;
background-size: 1px 100%;
content: '';
}
footer:before { left: 5%; background-image: linear-gradient(crimson, black); }
footer:after { right: 5%; background-image: linear-gradient(black, dodgerblue); }
However, there is no way to do it without using nested elements or pseudo-elements. A background repeats itself or it doesn't. It doesn't repeat itself just on an interval from point A to point B (though I would sometimes find that useful as well).
CSS2 does not support multiple background images. You'll need to nest another HTML element to make this work.
See: http://www.quirksmode.org/css/multiple_backgrounds.html
Is it possible to make only part of div transparent like an amount of space in div.
For example, you select 100px from top of div and the top 100px have an opacity set?
How would I do it?
You can do a couple of things:
Try a background image where half is transparent and the other half is not.
Use a CSS gradient in such a way that half is transparent and the other is not. Ex:
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
Use multiple divs where one has transparent BG and the other does not. Ex:
<div>
<div id="transparent" style="background: transparent"></div>
<div id="not-transparent" style="background: #000"></div>
</div>
I'm sure there are other ways, but those are the first three that come to mind.
Good luck.
Either you create the right background-image using a semi-transparent PNG (transparent at top, opaque at bottom for example) ; either you use two sub-divs, each having its own background-color (one of which with rgba for the transparent part).
You can use css3 properties along with pseudo elements to create this effect:
The trick is to draw a box with :before or :after pseudo element. We can apply background property for inner semi-transparent background. While for outer background we can use a large box-shadow value.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
position: relative;
margin: 30px 20px;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
<div class="box"></div>