I need to have a transparent background image. With a different image on each page. I have looked at the other answers on here and all of them have me specify the image in the CSS page which doesnt work because then it is on all the pages.
Here is what I have so far
#content
{
padding: 15px 30px 0 0;
}
#main-content
{
position: relative;
margin-left: 250px;
max-width: 600px;
}
#main-text
{
padding: 10px 15px 19px 15px;
z-index: 1;
position: relative;
}
img
{
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
But it is applying the transparency and sizing to all the other images on the page.
I figured it out, I just created separate classes for the background images and foreground images.
HTML
<img class = "background" src="Images/wheel.png" alt="wheel"/>
CSS
img.background
{
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
Related
Here is a link to something similar.
https://codepen.io/suez/pen/RpNXOR
.img {
overflow: hidden;
z-index: 2;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 100%;
padding-top: 360px;
}
.img:before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 900px;
height: 100%;
background-size: cover;
background-image: url(/images/art.png);
transition: transform 1.2s ease-in-out;
}
.img:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
Is there a reason why the button and text disappear behind the image when it transitions ove
If you are looking to have your text & button appear on top of the image, the text & button must have a higher z-index than 2 because assuming that your .img class controls your image, your image is declared as z-index: 2;. Try adding the z-index: 3; declaration to both your text & button.
i'm trying to have ornamented border all along the right and left side of the document, but for some reason I have not managed to get the elements with those border ornaments reach 100% height.
What i have right now is:
html {
height: 100%;
}
body {
min-height: 100%;
background-image: url("../img/bgtile.png");
background-repeat: repeat;
background-color: transparent;
font-size: 18px;
}
body:before {
content: "";
background: transparent url("../img/frame-ornament-left.png") repeat-y 11px 0px;
height: 100%;
width: 30px;
display: block;
left: 0;
position: absolute;
top: 0;
z-index: 0;
}
body:after {
content: "";
background: transparent url("../img/frame-ornament-right.png") repeat-y;
height: 100%;
width: 30px;
display: block;
right: 0;
position: absolute;
top: 0;
z-index: 0;
}
And no matther what i try, those before and after elements always stay as high as viewport is. I've tried setting min-height to 100% on HTML element too, that indeed made html element as long as body, but those elements with ornaments in them still remain as high as viewport...
Set the body to position: relative, so it will be the context for the pseudo elements, instead of the html, and set bottom: 0 to both pseudo elements:
body {
position: relative;
background-image: url('../img/bgtile.png');
background-repeat: repeat;
background-color: transparent;
}
.content-demo {
height: 800px;
}
body:before {
content: "";
background: red;
width: 30px;
display: block;
left: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
body:after {
content: "";
background: blue;
width: 30px;
display: block;
right: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
<div class="content-demo"></div>
I am making a portfolio website and I want to place two divs with little horizontal space between each other and a floating circle image in the center between them as so. The divs are the lighter ones. I was wondering how to style them and the image so that it floats betweet the divs with a little space.
I've tried
img {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 100;
}
div {
z-index: 90;
}
Please help me style these. I have no other ideas
You can use position: absolute and z-index
body {
background: #BD9EA4;
}
div {
width: 100%;
height: 100px;
position: relative;
margin: 10px 0;
background: #E6DADC;
z-index: 1;
}
div:first-child {
z-index: 2;
}
span {
background: white;
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
border-radius: 50%;
left: 50%;
transform: translate(-50%, 50%);
border: 2px solid black;
box-shadow: 0 0 0 8px #E6DADC;
}
<div><span></span></div>
<div></div>
I've been using that code on my body, to get a full background with some mi-transparent white background on it :
body {
background: url('../images/bg.jpg') no-repeat center center fixed;
padding-top: 50px;
}
body::after {
content: "";
background: white;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
The problem is that the white background doesn't go lower than the screen size as you can see here. Any idea how to fix that ?
It's because body::after isn't fixed, change the css like this :
body::after {
content: "";
background: white;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
}
Here is an example with a black background
Instead of using a ::before or ::after pseudo element, you can use css multple backgrounds.
Generate the base64 from this site: http://px64.net/
Apply the background to the body element.
#foo {
width: 400px;
height: 150px;
visibility: visible;
}
#foo {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYPhfDwACggF/yWU3jgAAAABJRU5ErkJggg==) repeat, url(http://www.openkorat.com/wp-content/uploads/2015/08/extra-bg-green.jpg) no-repeat;
background-size: auto, cover;
}
<div id="foo"></div>
Make the ::after element position: fixed.
Fiddle
body {
background: url('../images/bg.jpg') no-repeat center center fixed;
padding-top: 50px;
}
body::after {
content: "";
background: red;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
}
div {
height: 800px;
}
<div>div</div>
This is what I'm looking for:
I have cropped an image with my html and css but have no idea how to place rectangle in it. I guess for animation I should use :hover option for my crop class in div.
My code: http://jsfiddle.net/8t2hmxmn/
I guess this will fit your needs, to adjust the height of the details element, just edit the height: value inside .details
html * {
box-sizing: border-box;
}
.crop {
background-image: url('http://cs628119.vk.me/v628119319/10059/Ag3oy3YU6wY.jpg');
width: 200px;
height: 150px;
background-position: center;
background-size: cover;
position: relative;
overflow: hidden;
}
.shape {
width: 200px;
height: 50px;
color: black;
}
.details {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
transition: all 1s;
color: white;
}
.crop:hover > .details {
bottom: 0;
}
<div class="shape">
<div class="crop">
<div class="details">
Yes, this is cat!
</div>
</div>
</div>