I have a background image on a div, the size of the div is set to that of the image, However, I am unable to remove a margin that appears the left. See CSS below;
.faders-image {
background-image: url(../images/background.jpg);
background-repeat: no-repeat;
position: fixed;
width: 512px;
height: 512px;
right: 0rem;
bottom: 0rem;
margin: 0;
border: none;
padding 0;
-webkit-opacity: 0.50;
z-index: 8;
}
If you have the problem with the page left margin , you can use the following style.
.faders-image {
background-image: url(heart-icon.png);
background-repeat: no-repeat;
position: fixed;
width: 512px;
height: 512px;
left: 0;
bottom: 0rem;
margin: 0;
border: none; padding 0;
-webkit-opacity: 0.50;
z-index: 8;
}
I have changed the style right: 0rem to left: 0;
Related
so basically i made a child theme of color mag and copied the buddy press css into my child theme like this /buddypress/css/buddypress.css (this is what they told in the forums)
so from this
#buddypress #header-cover-image {
background-color: #c5c5c5;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
display: block;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
i added this
#buddypress #header-cover-image {
background-color: #c5c5c5;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
border-style: solid;
border-color: black
display: block;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
enter image description here
am i doing something wrong??
You are missing ; at end of border-color: black. This could be the problem
I have an image with a text box overlay in my app.
I'm trying to fiddle with the size of the faded box. It's too tall, but changing the header margin height isn't working to reduce the height.
Can anyone see what needs to be changed to reduce the height of the text box?
Thanks
.module {
background: url(glowcell.jpg);
background-attachment: fixed;
width: 100%;
min-height: 540px;
position: relative;
overflow: hidden;
margin: 0px;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.module > header > h1 {
margin: 0;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 50px;
position: relative;
z-index: 1;
}
* {
box-sizing: border-box;
}
Hard to tell with just the CSS, can you post more?
My best guess would be this line:
min-height: 540px;
Unless you want the minimum height to be 540px, I would just use height. But like I said, it's almost impossible to give a more accurate answer based on only your CSS.
I couldn't understand why my 3rd background doesn't work?
what I tried is here: http://jsbin.com/yopodusu/1/edit , #page::after background doesn't work.
body {
line-height: 1;
overflow-y: scroll;
background: transparent url(http://i.imgur.com/SwFFw1i.gif) repeat top left;
}
body::after {
content: "";
background: url(http://i.imgur.com/QOSseW6.jpg);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -2;
opacity: .150;
}
#page::after {
content: "";
background: url(http://www.zordor.com/w/1920x1200/6098.jpg) no-repeat right top;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
opacity: .150;
background-size: 35%;
}
What am I doing wrong?
regards
You've got this property overriding the element's visibility :
.clearfix:before,.clearfix:after {
content:"\0020";
display:block;
height:0;
visibility:hidden;
}
Add visibility : visible to your #page:after
And height : auto as well, or setup a specific height.
Which gives :
#page::after {
content: "";
background: url(http://www.zordor.com/w/1920x1200/6098.jpg) no-repeat right top;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
opacity: .150;
background-size: 35%;
visibility : visible;
height: auto;
}
I have a div tag. I want to remove the children's inheritance of #overlay's opacity
Here is my code:
<body id="bg">
<div id="overlay">
<header id="colortext">dgjdhgjdhd</header>
</div>
</body>
And this my css code.
#bg{
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-image: url(../Images/bg.jpg);
}
#overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: #000;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#colortext{
background-image:none;
margin-top: 7px;
margin-left: 16px;
top: 2%;
left: 2%;
color: #FFFFFF;
text-align: left;
font-size: xx-large;
opacity:1 !important;
}
I want to have like this site background: http://www.ehsanakbari.ir/
How can I do this?
You cannot stop children elements from inheriting their parent's opacity.
Instead, you could use an rgba value for the parent's background color instead of opacity:
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: rgba(0,0,0,0.5);
}
See this SO question for more info.
i need to build a frame all around mi contents that would scroll under the frame
i made a top margin a bottom and a left and right margin
it seems to work correctlly but some times between bottom and middle or top and middle i get a void pixel
and on mobile device, without viewport set it get a little worst
i don't have other idea on how make the same thing in a better way
here an example link
http://jsfiddle.net/zBAPX/
#mask-center-container {
z-index: 1000;
position: fixed;
top: 10%;
bottom: 4%;
left: 0;
right: 0;
width: 100%;
margin: 0;
padding: 0;
}
#mask-center-container-sx {
height: 100%;
width: 21%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
#mask-center-container-ce {
height: 100%;
width: 56%;
margin: 0;
padding: 0;
}
#mask-center-container-dx {
height: 100%;
width: 22%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
#mask-top {
z-index: 3000;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 10%;
width: 100%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
#mask-bottom {
z-index: 3000;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 4%;
width: 100%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
I only know of one way to effectively click 'through' an element, and that is to use the experimental pointer-events property. Here's a writeup from CSS Tricks:
http://css-tricks.com/almanac/properties/p/pointer-events/
One major flaw: no IE support prior to IE11.