I have a div and it has a background image. But I finally understood that I forgot another background for the div that goes at the bottom. so I used the :after pseudo and inserted one.
The background that goes in the :after was supposed to be a transparent image that fades well with the background of the body. But now the background of the parent div is getting behind what is in the :after pseudo element.
Could there be any way I would make the background of the parent div not to show in my :after pseudo element?
Edit
here is my code
.foo{
height: 30px;
padding-bottom: 20px;
background: url(i/myimage.png) no-repeat;
}
.foo:after{
display: block;
position: absolute;
right: 0;
background: url(i/pseudo-elem-bg.png) no-repeat;
content: ' ';
height: 20px; /*takes the bottom padding
}
The ::after pseudo element adds an element which is the last child of the parent selector, not a sibling (hence, an element after the selected one), so it is just natural that the background of the parent shows up if the child background is transparent.
You might need to use another solution than the pseudo-element, such as a real element perhaps. Seeing the current code you have might help finding the best solution for your case.
If you're creating a pseudoelement just to add another background, you could set multiple backgrounds instead, and they will shown in the order you have set it.
Something like:
div {
background: url(bg.png),
url(otherbg.png);
background-position: center top,
center bottom;
}
You could use other background properties and sort them in the same way.
Related
We have one small chat in site where some background image is there in chat
it looks cool but when customer clicks on order status it asks for order no but when this content is added background image disappears
we tried several thread in stackoverflow but nothing is working
we tried adding these things
background-size: cover;
/* background-size: 100% 100%; */
background-repeat: repeat;
when we increase the height to 1000% it works and shows image but then our scrollTop goes to wrong place
here is our code and
class of interest
pushdaddy-body pushy-whatsapp-body
.pushy-whatsapp-body:before {
display: block;
position: absolute;
content: "";
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 0;
opacity: .08;
background-image: url(https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870);
here is live site where you can test
https://itsneotpras.myshopify.com/
click on chat and just click on order status
Don't use an absolute :before with height 100%, because 100% is relative to the parent height.
Instead here's three solutions:
1. New common parent element
Create another simple DIV wrapper with min-height: 100% that will be the new parent of your messages. That way, the min-height will be relative to the parent, but as soon you'll have more messages - it will grow as the content grows. Also don't make it position absolute.
PS: The background will move with the scroll!
2. Make it sticky
Add to your :before pseudo:
content: "";
position: sticky; /* instead of absolute */
PS: The background will not move with the scroll!
3. Parent background
Another way, if you want your background to be "fixed", change the background opacity in an image editor, and assign it to the .pushy-whatsapp-body element.
PS: The background will not move with the scroll!
As your box scrolls, your ::before element moves with it. I would take it off the ::before element and add it to the actual element's background, or modify how your ::before stays in place.
Can you just take it off the pseudo element? Put your background-image on the div class.
<div class="pushdaddy-body pushy-whatsapp-body"></div>
background-image: url("https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870");
I am trying to make a sidebar that is similar to the one shown here: https://www.sketchapp.com/docs/ .I made everything working fine except making the box shadow opacity at top and bottom, I tried box shadow but couldn't make it the way its shown in the page. what I did so far
Thanks in advance! ^^
image to see
Welcome to SO.
You can use pseudo selectors and add to them a background with a linear gradient.
for example:
div::before {
background: linear-gradient(180deg, #fcfcfc, rgba(252,252,252,0));
content: '';
display: block;
width: 100%;
height: 4rem;
position: absolute;
z-index: 0;
}
here i am doing the following:
I set the background to a linear gradient fades the color, I put display block in order to make it behave like a div, finally I set the z-index to 0 in order to place it at the top of the other elements.
here is a working demo: https://jsfiddle.net/hdsma1fv/5/
references:
about pseudo elements: https://www.w3schools.com/CSS/css_pseudo_elements.asp
about linear gradients: https://www.w3schools.com/css/css3_gradients.asp
Edit:
If you need the shadow to hide with the scroll then you need to attach the pseudo selector ::before to an element inside the scroll and remove the position: absolute;.
Also if you want it to show in the bottom also, you need two things: first - rotate the linear gradient angle and second - use the pseudoselector ::after instead of the ::before one.
check https://jsfiddle.net/hdsma1fv/34/ for an updated example with both modifications.
Take a look at the following scenario:
Normally you would include the background image and set this to 'right center'. Is there anyway however to have this but have the speech bubbles come from a sprite (contains multiple different images) where the element has an unknown width?
I was contemplating using the :after pseudo-element however I need to provide IE7 support.
I wanted to avoid extra HTML markup, thus I'm curious if a CSS only scenario exists.
Anyone have any thoughts on this?
Thanks
You could use a css pseudo element such as :before or :after. Just size and position your pseudo element where you want it. The content property is important, else it wont show up.
#divid:after {
width: 10px;
height: 10px;
margin: -10px 0 0 -10px;
position: absolute;
background: url('sprite.png') -20px -15px no-repeat;
content: ' ';
}
I want to use background image and color for the same element
but id doens't work even I use the css like this question
here's my css
http://jsfiddle.net/xdkwB/
Your CSS is working correctly, both the image and background colour sit within the one container so because they're the same colour, you can't actually see the arrow.
The best way to solve this is to use an outer div that wraps your header element, like so:
<div class="outer"><h1></h1></div>
And then style with appropriate CSS:
div {
float: right;
width: 198px;
background-image:url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png);
background-position: 0px;
background-repeat: no-repeat;
margin-top:21px;
}
h1{
color:white;
font-size: 170%;
font-weight: normal;
font-family: arial;
width:189px;
height:33px;
line-height: 33px;
background-color: #b21f23;
float:right;
}
So to clarify, the outer div is slightly larger and contains the background image aligned to the left and then the header fills all remaining space with the background colour.
I don't think you can get your desired result with just one element styling.
You would either need to have the background-image outside of the element, which is not possible.
Or you would need the background-color to not fill all of the element, which is also not possible
The best option IMO, would be to have two elements with a background-image in the first, and background-color in the second
http://jsfiddle.net/xdkwB/11/
Example with text:
http://jsfiddle.net/xdkwB/13/
Example floated right:
http://jsfiddle.net/xdkwB/14/
try this
background: url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png) no-repeat left center #b21f23;
this will add the background image and everything else will be your background color
You've set the background colour to the same colour as the image. So it's there, you just can't see it because it blends in.
You're arrow is the same color as te background. You can positioning the background with background-position and with a negative left value it become outside the box:
I am using following CSS code:
.rounded_box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:850px;
padding:15px;
background-color:#80C1FF;
margin:0 auto;
color: #0D2E47;
font-family: Arial,Helvetica,sans-serif;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
/* background-color:rgba(255,0,0,255); */
}
.rounded_box h1{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
And I want to have h1 and other elements as opaque that are inside div having class rounded_box . But is also making h1 and other elements transparent that I don't want.
So what can be the solution for this?
The opacity: 0.6 in .rounded_box will be applied to all child elements (thus the .rounded_box h1. So the h1 opacity:1.0 is really only 100% of the parent (0.6).
What you could do is use rgba to define the background color of .rounded_box, which does not affect children.
If are only looking for a transparent background on the rounded box element, use the following code:
.rounded_box{
...
background-color:rgba(128,193,255,0.6);
...
/*filter:alpha(opacity=60); Remove this */
}
.rounded_box h1{
...
}
A workable hack is to set all of your text within an absolute positioned div that is a sibling to the container you wish to be transparent. Position it absolutely over the container, set the Z index, and make sure your parent element is positioned relative.
Basically there's no magic bullet for this. Unfortunately, the opacity is inherited down to all children of an element with opacity, and there's no way to set opacity to "120%" to overcome 80% opacity on a parent element.
My comfort zone would be to have a containing div with no opacity, which holds 2 sub divs: one to hold the bg image, rounded edges, opacity, etc; and its sibling to hold the content. I'd use JavaScript to force the height of the opaque div to be the height of the content div, then I'd absolutely position the content div over the opaque one.
OR
I'd just use alpha transparent PNGs as the background image of the rounded box, assuming I didn't have to conditionally change their color or anything. You can do this and still accomodate variable widths and heights too, if you are willing to cut out the top/bottom/sides/corners separately.