I'm trying to use 'bakground-position' in the background of my div, but not working.
When background an image, the 'background-position' works, but with 'background-color' is not working.
What can I do?
This is my CSS:
#defaultContent {
width: 983px;
min-height: 382px;
margin: 0 auto;
background-color: #000000;
background-position: right 50px;
}
You can provide an background-image as a solid color, creating a monochrome gradient:
#defaultContent {
width: 983px;
min-height: 382px;
margin: 0 auto;
background-image: linear-gradient(#000, #000);
background-position: right 50px;
background-repeat: no-repeat;
}
The gradient is fully compatible with an image, and if you set both colors to the same, it is fully equivalent to a solid color
demo
You can workaround with a div only for background, simulating it by mixing position: absolute offsets and negative z-index.. (Though I've tested only in chrome)
See fiddle
HTML
<div id="defaultContentParent">
<div id="defaultContent"></div>
<div id="defaultContentContent"><div>
</div>
CSS
#defaultContentParent {
border: 1px solid #00f;
background-color: #aaa;
color: #fff;
position: relative;
width: 200px;
min-height: 140px;
margin: 0 auto;
z-index: 0;
}
#defaultContent {
background-color: #000000;
height: 50px;
position: absolute;
top: 50px;
right: 0;
width: 80px;
z-index: -1;
}
#defaultContentContent {
z-index: 9999;
}
You can't position a background-color property, since that property fills the entire space. Likewise, you can't use background-color with a background image, because that would, basically, replace your background image with the filled background-color, at which point there is no reason to use a background image at all!
Are you perhaps thinking of using a gradient, or giving a background image a filter of a certain filter? That would be a different question.
Related
I would like to show the image with a non glassy display. Similar to the following one,
I am using the image as it is. I would like to show that with matte finish.
normal image:
Matte finish:
I am not able find it online. May be I am not using the right search keywords. Could anyone help me with this?
Inside a container I did put an image with reduced contrast / brightness / saturation plus a little bit of blur (all these four effects made by CSS filter). The image could've be placed as the container background but I wanted to apply these filters so it went separated.
After it, there's a colored layer with transparency covering the whole area. The letter represents the page's content that can be anything.
UPDATE: multiple filters must be all in a row, like it is on this latest update:
body {
width: 100%;
height: 100vh;
margin: 0px;
font-family: Georgia, serif;
}
#container {
width: 100%;
height: 100%;
position: relative;
background-color: navy;
overflow: hidden;
}
#thepic {
width: 100vw;
height: 100vh;
object-fit: cover;
-webkit-filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
}
#color_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: navy;
opacity: 0.3;
}
#content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
}
h1 {
display: inline-block;
color: white;
text-shadow: 1px 2px 2px #000;
font-size: 4em;
font-weight: 100;
letter-spacing: 2px;
text-align: center;
vertical-align: middle;
}
#letter {
vertical-align: middle;
}
<div id=container>
<img id=thepic src="http://i.imgur.com/s9J4MnI.jpg">
<div id=color_layer></div>
<span id=content><img id=letter src="http://i.imgur.com/CB1vUqy.png" alt=img><h1> 書面</h1></span>
</div>
#freestock.tk - That's the idea I had in mind also.
Here's another way to do it with less markup:
img {
max-width: 100%;
height: auto;
}
.container {
position: relative;
z-index: -1;
}
.container:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
<div>
<h1>Original Image</h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
<div class="container" id="content">
<h1> With Transparent Overlay </h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
In this example, I put the image inside a container that is relatively positioned. The z-index is -1 so it will be behind the next layer.
Then I used a pseudo element that is absolutely positioned so it will stretch across the whole width of the container and cover the image. The positive z-index sets it on top of the first layer. Rather than setting an opacity, I used an rgba value for the background color. The first three numbers or the red, green, and blue values as usual, but the last number is a decimal between 0 and 1 that sets the opacity level. I made it a little darker than you probably want just so you can see the difference. You may also choose a different color to fit your image.
For reference: http://nicolasgallagher.com/css-background-image-hacks/
I'm not even sure this is possible, I'm looking to make a see-trough "border"/cut-out around an element. Like in the image below, the point is to make the background show between the magenta element in the centre and the grey elements.
So far all I have managed is a solid colour border around the magenta element. Using the following class, this gives me the desired result but only on a white background.
.app.center {
height: 40px;
width: 28px;
z-index: 5000;
border-radius: 3px;
box-shadow: 0 0 0 3px white;
}
See this fiddle for my entire CSS.
Setting a transparent border as suggested in the comments does not solve my problem (tested in FF40). I am trying to create a transparent gap around my middle div element (the magenta one). Setting a transparent border on this element does not work.
I am looking for a way to clip the sibling divs that fall behind the middle div so a small piece of the background is visible on either side of the middle element that follows the edge/shape of the centre element.
Yes, this is basically impossible. That's why I am trying to provide an answer :-)
My solution will not work on IE, and limits you to use primary colors in the elements. As far as I know, it's the only way to get this result.
The trick is to use a blend mode, that translates gray into transparent. And the borders of the element will be gray, so will show the underlying background
.bkg {
width: 200px;
height: 200px;
border: solid 1px black;
background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px);
}
.button {
width: 100px;
height: 100px;
border-radius: 20%;
border: solid 10px gray;
position: absolute;
font-size: 80px;
}
#bt1 {
left: 40px;
top: 20px;
background-color: red;
}
#bt2 {
left: 80px;
top: 90px;
background-color: rgb(255,0,255);
}
.panel {
position: absolute;
top: 0px;
width: 200px;
height: 200px;
mix-blend-mode: hard-light;
}
<div class="bkg"></div>
<div class="panel">
<div class="button" id="bt1">-1-</div>
<div class="button" id="bt2">-2-</div>
</div>
If your purpose could be met with a "faux"-transparency, then you could make use of the border-image. However, this is not a true solution. Also, you would lose border-radius when you use a border-image.
The trick is to use as border-image the same image that you use for your background-image on lower-layer div or body. This will give the "illusion" of transparency clipping through the sibling divs which are at a lower-level.
Example:
* { box-sizing: border-box; }
body { background-image: url(http://i.stack.imgur.com/lndoe.jpg); }
.sphere {
position: relative; background-color: #444;
left: 200px; top: 100px; height: 100px; width: 200px;
border-top-right-radius: 100px; border-top-left-radius: 100px;
text-align: center; padding-top: 10px; color: white;
}
.app {
position: absolute; transform-origin: center 75px; background: #cc4489;
border-radius: 5px; left: 72px; top: -72px; height: 64px; width: 52px;
}
div.sphere > .app:first-child {
transform: scale(0.9) rotate(-30deg);
background: #adabae; top: -72px;
}
div.sphere > .app:last-child {
transform: scale(0.9) rotate(30deg);
background: #79787a; top: -72px;
}
.app.center {
height: 64px; width: 52px; z-index: 5000;
background-clip: padding-box; background-origin: padding-box;
border-image: url(http://i.stack.imgur.com/lndoe.jpg) 10;
border-width: 5px;
}
<div class=" sphere">
<div class="app"></div>
<div class="app center">3</div>
<div class="app"></div>
</div>
Fiddle: http://jsfiddle.net/abhitalks/aoh8vc8v/
As applied to your fiddle: http://jsfiddle.net/abhitalks/L6deaazy/3/
Disclaimer: This is faux clipping. clip-path and mask could be better put to use.
This is a question for the CSS gurus. A trend at the moment seems to be to place an image in the background and then have a transparent content scroll over the top.
AIM
What technique is used to produce this result, where the top content is transparent and slides over a background image.
http://jsfiddle.net/spadez/2uUEL/9/embedded/result/
MY ATTEMPT
What I have tried to do is apply a background and then make the top section transparent on top of it.
http://jsfiddle.net/spadez/N9sCD/3/
body {
background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg";
}
#top {
height: 160px;
opacity:0.4;
filter:alpha(opacity=40);
}
#section {
height: 600px; background-color: blue;
}
QUESTION
How has this technique of a transparent div moving over a static background image been achieved in my first link and how can I reproduce it. It must be a CSS solution because it still works without javascript enabled.
Here's a FIDDLE
<div id="top">
<span class="mask">
<img src="https://app.h2ometrics.com/build/v0.1.1a/styles/img/chrome_logo.png" class="logo" alt="Chrome">
Link 3
Link 2
Link 1
</span>
</div>
<div class="section l">
</div>
<div class="section d">
</div>
#top {
background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed;
background-size: cover;
position: relative;
height: 400px;
}
#top a {
background: rgba(200,200,200,0.5);
display: block;
float: right;
margin: 10px 15px;
padding: 2px 5px;
text-decoration: none;
color: #111;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 8px;
transition: color 0.2s ease-in;
}
#top a:hover {
color: #fff;
}
.mask {
background: rgba(0,187,255,0.5); /* or hex combined with opacity */
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */
}
.logo {
position: relative;
width: 60px;
height: 60px;
margin: 10px;
}
.section {
height: 600px;
}
.l {
background: #ddd;
}
.d {
background: #333;
}
Update #top content placed inside .mask which removes need for z-index.
You were essentially correct in building but your CSS has some errors.
body {
background: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg') fixed; /* fixed stops background from scrolling */
background-size: cover cover; /* expands bg image to cover body */
}
#top {
height: 160px;
color: #fff; /* this just makes the text visible on your dark bg */
}
You don't need to set the opacity of #top because without a background set it will already be transparent.
Try this:
HTML - pushed the menu into its own div
<div id="top">
<div id="menu">
logo
link 1
link 2
</div>
</div>
<div id="section">
</div>
CSS - removed margin from body, set the background to a fixed position and to always cover the whole body, added background color to menu. Note that #top does not need a transparency as it is 100% transparent by default. If you want to get a 'colour washed' looking image it would be better to adjust the image itself rather than trying to re-create a colour overlay.
body {
margin: 0;
background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") fixed;
background-size: cover;
}
#top {
height: 500px;
}
#menu {
padding: 10px;
background-color: #fff;
}
#section {
height: 600px; background-color: blue;
}
I have the following fiddle. I am trying to set the background-image of a div as follows:
.close-button{
position: absolute;
width: 25px;
height: 25px;
background-image: url('https://cdn4.iconfinder.com/data/icons/brightmix/128/monotone_close_exit_delete_small.png');
z-index: 1;
cursor: pointer;
background-color: blue;
}
here's the div:
<div class="close-button" data-dismiss="modal" aria-hidden="true"></div>
why is this not working?
You would need to use background-size i.e background-size:25px; or background-size:contain; to your image since it is much bigger than your div's dimensions.
.close-button {
position: absolute;
width: 25px;
height: 25px;
background-image: url('https://cdn4.iconfinder.com/data/icons/brightmix/128/monotone_close_exit_delete_small.png');
background-size:25px;
z-index: 1;
cursor: pointer;
background-color: blue;
}
Demo
On a side note this image is too big to be an icon, you can try considering the usage of image sprites to consolidate all your icons to one image file and just use css background position to select them.
You image is bigger than your div. Change the width and height of the div, you will see the background image. Or you have to use a smaller background image.
.close-button
{
position: absolute;
width: 128px;
height: 128px;
background-image: url('https://cdn4.iconfinder.com/data/icons/brightmix/128/monotone_close_exit_delete_small.png');
z-index: 1;
cursor: pointer;
background-color: blue;
}
http://jsfiddle.net/2LTYY/4/
I would like to create something like on attached image using only CSS. Until now I have come-up with:
.block5-header:after {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
background: url({template_relativeimagepath}{template_imagesfolder}blocks/elipsa.png) no-repeat;
background-size: contain;
}
But this solution requires to use a lot of different png images, as i have many different sizes of header blocks. I have tried to use pseudo elements with radial gradients, but to no avail. If there is some simpler solution please let me know ;)
Pic of what i would like to achieve. http://i.imgur.com/pwN54o1.png
Alright, I used css position, circles, and rgba.
Pure CSS Solution (Fixed width)
It is also responsive to width changes
HTML
<header class="subNav">
<span class="headCirc"></span>
Something
</header>
CSS
.subNav {
width: 285px;
height: 60px;
overflow: hidden;
background: #4679bd;
display: block;
position: relative;
left: 30px;
top: 30px;
line-height: 60px;
font-size: 20px;
color: #fff;
padding-left: 15px;
border-radius: 10px 10px 0 0;
}
.headCirc {
position: absolute;
top: -30px;
left: -5%;
display: block;
width: 110%;
height: 70px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
What I did was positioned the circle absolutely inside of the header, I then gave the header an overflow: hidden to hide anything of the circle that came out of the box.
You wont be able to get the curved line but if you don't mind that you can try out http://www.colorzilla.com/gradient-editor/