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
Related
i want to use z-index for text and overlay.
https://jsfiddle.net/osm2rkbx/1/
it is my code.
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.mainArea p {
display: flex;
height: 50vh;
font-size: 1.5rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-shadow: 2px 2px 4px #000000;
z-index: 999999 !important;
}
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index: 1;
}
<div class="mainArea">
<div class="container">
<div class="col-md-12 text-center ">
<p>its the text..</p>
</div>
</div>
<div class="mainAreaOverlay"></div>
</div>
when i use z-index for text, its not working. It seems pale. How can i see text with white. İf you help me i will be glad, thanks.
Put z-index:-1 in mainArea class and update z-index:-1 to mainAreaOverlay class.
Old mainArea class:
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Updated:
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index:-1;
}
Old mainAreaOverlay class:
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index: 1;
}
Updated:
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
top: 0;
left: 0;
z-index: -1;
}
What I want to do is use only 1 image url in the CSS.
So I would only need to change 1 url in the CSS, instead of all of them if I change an image or something.
The code is already using an image sprite.
I just want it to use 1 image url in it, instead of 6.
How would this be done?
This is where all the image urls, and background positions are located:
https://jsfiddle.net/g6oaht8f/286/
.jacketc {
position: relative;
width: 606px;
height: 344px;
cursor: pointer;
margin: 45px 0 0 0;
border-radius: 25px;
border: 3px solid #0059dd;
box-sizing: border-box;
background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px -862px;
}
.jacketd,
.wraph {
background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat 0 0;
}
.wraph {
position: relative;
width: 606px;
height: 606px;
margin: 45px 0 0 0;
overflow: hidden;
border-radius: 25px;
background-position: 0 -600px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrapb,
.wrapb::before {
background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px 0;
}
.wrapb::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 266px;
height: 266px;
background-position: -600px -260px;
opacity: 0;
border: 3px solid #0059dd;
box-sizing: border-box;
transition: all 2s;
}
.wrapd .img {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 180px;
height: 180px;
background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -860px -340px;
}
.jacketb,
.wrape {
background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px -520px;
}
.wrape {
position: relative;
width: 266px;
height: 174px;
overflow: hidden;
margin: 45px 0 0 0;
border-radius: 25px;
background-position: -600px -687px;
}
.wrapf {
position: relative;
width: 266px;
height: 251px;
cursor: pointer;
margin: 45px 0 0 0;
border-radius: 25px;
background: #000000 url("https://i.imgur.com/Y0CrMX2.png") -866px -616px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
See the CSS in this fiddle: https://jsfiddle.net/ksp4qoej/
Note the most relevant change:
.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img
.wrape,
.wraph,
.wrapf {
background-image: url("https://i.imgur.com/Y0CrMX2.png");
background-repeat: no-repeat;
}
What we're doing here is applying the image as a background to multiple classes of elements with a single rule. The background-position value needs to be updated on a more granular basis, which is done in individual selector blocks elsewhere in the file.
When you're ready, using something like SASS or LESS to generate your CSS can provide cleaner code for image maps. Check it out! http://thesassway.com/intermediate/spriting-with-sass-and-compass
David M's solution is correct. The only issue that I can see with it is a missing comma after .wrapd .img (see below)
.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img,
.wrape,
.wraph,
.wrapf {
background-image: url("https://i.imgur.com/Y0CrMX2.png");
background-repeat: no-repeat;
}
I want to insert an image in CSS bubble, the code is correct but nothing appears,
can you please check how to solve this one
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
/*border-radius: 10px;*/
background: linear-gradient(top, #f9d835, #f3961c);
}
now before
.triangle-isosceles:before {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
the last one is after
.triangle-isosceles:after{
content: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
background: #3365d4;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
In the "after" version, you have two errors:
content: This is not the correct tag to specify the background, the correct one would be simply "background"
background: As you may figure by reading the first error, the background property you have defined is the one who is specifiying the background. This tag has to be removed as it will be overwritten if is not deleted.
So the CSS should loke like this:
.triangle-isosceles:after {
background: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
You should also consider to add compatibility with more browsers. You can find more information at this page: https://www.w3schools.com/cssref/css3_pr_background-size.asp
EDIT: This is an example of a working CSS tag that add a background image to a "div":
#headerwrap {
background: url(../images/homepage/header.jpg) no-repeat center top;
margin-top: 60px;
padding-top: 20px;
text-align: center;
background-attachment: relative;
background-position: center center;
min-height: 600px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hope this helps :)
You need to add content also, Without content after and before won't work
Like this :
.triangle-isosceles:after {
content :'';
background: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
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;
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.