Scenario
html
<div id='fractal'>
<div class='centerdotline'>
<span>Some text</span>
</div>
</div>
css
#fractal {
background-image:url('fractal.jpg');
background-repeat: repeat;
}
.centerdotline {
background-image:url('dotline.png'); /* with alpha channel */
background-repeat: repeat-x;
background-position: center;
}
.centerdotline span {
padding: 0 20px;
/*
override centerdotline background-image
*/
}
I want to remove centerdotline div ( parent ) background-image but not fractal div background-image.
I can't set the background-image in this element (like a piece of fractal.jpg) because I don't know the element's exact position in relation to the fractal div
Thanks for help
Marco
Perhaps This Workaround
Not knowing specifically what your parameters are, the following solution may or may not be useful to you. I offer it, however, in case it is useful for your situation.
Here is the fiddle example. HTML is just as you had it. I removed the line-height on the span that you said was not necessary. If you were doing that, you would need to adjust the pseudo-element height accordingly below. That height should roughly match line-height, which is typically about 1.1 or 1.2, but if set to 500px would need to be that height for the pseudo-elements.
CSS
#fractal {
background-image:url('http://marcomolina.com.br/lab/fractal.jpg');
background-repeat: repeat;
width:500px;
height:500px;
}
.centerdotline {
position: relative; /* using this to place the dots */
text-align:center;
}
/* your span can also be set to display: inline-block and have top padding or margin */
.centerdotline span {
padding: 0 20px;
/*
Did not remove, but skipped centerdotline background image by not putting the background there to keep the background of fractal div behind the text
*/
}
/* put the dots in pseudo-elements and position off .centerdotline edges */
.centerdotline span:before,
.centerdotline span:after {
content: '';
position: absolute;
height: 1.2em; /* this might vary slightly by font chosen */
width: 40%; /* this will vary by text size */
background-image:url('http://marcomolina.com.br/lab/dotline.png'); /* with alpha channel */
background-repeat: repeat-x;
background-position: center;
}
.centerdotline span:before {
left: 0;
}
.centerdotline span:after{
right: 0;
}
Related
How can I set mix-blend-mode on an element, but not it's children? Setting the children to the default value of normal does not seem to work:
http://jsfiddle.net/uoq916Ln/1/
The solution on how to avoid mix-blend-mode affects children:
Make child element position relative, give it a width and height;
Create some real or pseudo element inside the child with absolute position, and apply mix-blend-mode to it;
Create inner element inside the child for your content. Make it's position absolute, and put it on top of other elements;
Live example
html
<div class="bkdg">
<div class="blend">
<div class="inner">
<h1>Header</h1>
</div>
</div>
</div>
css
.blend {
position: relative; /* Make position relative */
width: 100%;
height: 100%;
}
.blend::before { /* Apply blend mode to this pseudo element */
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-color: green;
mix-blend-mode: multiply;
}
.inner { /* This is our content, must have absolute position */
position: absolute;
z-index: 2;
}
h1 {
color: white;
}
I know this was asked over two years ago, but it could be useful in the future as it could be a better solution than creating pseudo-elements.
There is the CSS isolation property that allows to choose wether the child element should be rendered in its parent's context (auto) or as part of a new context, thus without any blend mode applied to it (isolate).
Check out this page for examples
someone commented that the the whole block is rendered with the effect and that is why you're having the issue. I am able to accomplish what you're are trying to do by removing the h1 from the block, position absolute, and a z-index of 1. here is a jsfiddle to show the effect.
html
<div class="bkdg">
<h1>Header</h1>
<div class="blend">
</div>
</div>
css
.blend {
background-color: green;
mix-blend-mode: multiply;
width: 700px;
height: 35px;
}
h1 {
color: white;
position: absolute;
top: -15px; left: 10px;
z-index: 1;
}
https://jsfiddle.net/jckot1pu/
It’s impossible to remove an element’s mix-blend-mode from its children.
MDN says that mix-blend-mode:
sets how an element's content should blend with the content of the element's parent and the element's background
To achieve the desired effect, place the child in a separate stacking context and make sure it renders on top of the element with mix-blend-mode set.
You need two things to make this work:
Make sure that your opaque content (your text) is not a child of the element that sets the background and the blend mode. For example, with CSS Grid Layout.
Make sure the text is rendered over, and thus not affected by, the element that sets the background and the blend mode. Setting mix-blend-mode on your background will create a stacking context for it, and you may need to give your content its own stacking context to ensure it gets rendered above it.
Position your elements with CSS Grid:
define a grid container with one auto-sized grid area
place both the background element and the text element into that one grid area (so that they overlap)
let the text element dictate the size of the grid area
have the background element stretch to the size of the grid area, which is dictated by the size of the text element
Then, set isolation: isolate on the text element to ensure it gets rendered above, and not under the background element.
A working example
.container {
display: grid;
grid-template-areas: 'item';
place-content: end stretch;
height: 200px;
width: 400px;
background-image: url(https://picsum.photos/id/237/400/200);
background-size: cover;
background-repeat: no-repeat;
}
.container::before {
content: '';
grid-area: item;
background-color: seagreen;
mix-blend-mode: multiply;
}
.item {
grid-area: item;
isolation: isolate;
color: white;
}
h1,
p {
margin: 0;
padding: 10px;
}
<div class="container">
<div class="item">
<h1>HEADLINE</h1>
<p>Subhead</p>
</div>
</div>
An important note if you're using the excellent pseudoelement ::before/::after solution posted by Rashad Ibrahimov.
I found that I had to remove z-index from the parent element and apply it only to the pseudoelements and child elements before mix-blend-mode: multiply would work.
For example
#wrapper {
position: relative;
}
#wrapper .hoverlabel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* z-index: 90; Uncomment this to break mix-blend-mode. Tested in Firefox 75 and Chrome 81. */
}
#wrapper .hoverlabel::before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
mix-blend-mode: multiply;
z-index: 90;
background-color: rgba(147, 213, 0, 0.95);
}
http://jsbin.com/huzem/1/edit?html,css,output
In the above site how do i extend the border to the bottom of the page, compared to where it ends now(right at the edge of the content)? Also is there a way to make the border line up on the edge of the right and left sides of the screen without using negative values for margin such as i did by setting margin -right and margin-left to -4%?
You are setting the width to 93%, and then you are overriding that with your -4% thing - so, just don't do the first part. body has a margin of something by default: so get rid of that:
Put a border on your html and body, like - red. and look at what is actually going on. The body only stretches to fit your content... so you need to tell it how big it can be... (100%) then you have to tell the things inside what to do etc... This isn't the complete / perfect answer --- but it should get you closer to your goal.
html, body {
height: 100%; /* remind these guys they can be as tall as the viewport if they want */
}
body{
margin: 0; /* remove default margin */
color: white;
background-color: black; /* white on white is no helpful */
}
#main{
height: 100%;
}
#content{
border: solid white; /* you need a px value */
min-height: 100%;
}
a {
color:white; /* you don't need to specify for every state */
}
I suggest you to set the main div at the height of the window and set a height property to 100% to your content div like this :
#main {
width: 93%;
margin: -2% auto 0% auto;
position: absolute;
top: 0;
bottom: 0;
}
#content {
border: solid white;
margin: 0% -4% 1000% -4%;
height: 100%;
}
The border will now extend to the bottom of the page!
I am trying to get a ribbon png on the top left and bottom right of a box, (refer to the picture below), but was unsuccessful.
That box has a background colour and it's going to have some text in it so the ribbons need to keep their position whenever the box stretches. This seems to be so easy to do so hope someone could help me out.
Use absolute positioning to put two divs in with top:0;left:0; and bottom:0;right:0;. Like this in your CSS:
#box{
position:relative;
/* your styles... */
}
#box:before,#box:after{
content:'';
position:absolute;
width:100px;height:50px;
}
#box:before{
top:0;left:0;
background:#0f0; /* you could put some kind of image here */
}
#box:after{
bottom:0;right:0;
background:#0f0; /* you could put some kind of image here */
}
See this JSFiddle for a working demo.
You can use absolute positioning. It would be something like this:
http://jsfiddle.net/myajouri/389hQ/
.green-box {
position: relative;
/* other styles */
}
.green-box:before,
.green-box:after {
content: "";
display: block;
position: absolute;
width: 100px; /* ...or whatever */
height: 50px; /* ...or whatever */
}
.green-box:before {
top: 0;
left: 0;
background-image: url("wherever the ribbon image is") left top no-repeat;
}
.green-box:after {
bottom: 0;
right: 0;
background-image: url("wherever the ribbon image is") right bottom no-repeat;
}
This should work in IE8 and above + modern browsers. If you don't care about IE8 then you can use CSS transforms to rotate the same image instead of having two different images.
Try to use position: fixed; via CSS
I have a header element into which I want to put a background image but I want to put it on end. So whatever the width of text is it will remain always after the text ending. Possible? How?
<h1>Here is my dynamic text</h1>
If you want to put it really behind the text you should use pseudoelements:
h1:after { content:url(myimage.png); }
Sample here.
If you want to have a real background image you can only do this if you change the h1 to display:inline, since otherwise the element will stretch to the full width of its parent, thus losing all reference to the size of the contained text.
All other solutions (including the other ones mentioned here) require changing the HTML markup, and are as such not pure CSS solutions.
Something like this:
h1
{
background-image:url(https://s.gravatar.com/avatar/c6a0ac3e18f1cd8d0f1be4c2e3a4cfbd?s=32&d=identicon&r=PG);
background-repeat:no-repeat;
background-position:right;
padding-right:40px;
display:inline-block;
}
<h1>Here is my dynamic text</h1>
So backgorund image to the right with padding so it's always outside your text. The display:inline-block is important because it stops your test filling the whole line
Simply at a span for that background image as a child of <h1>, like this:
<h1>Here is my dynamic text <span class="chevron"></span></h1>
CSS:
h1 {
position: relative;
}
.chevron {
background: url(images/chevron.jpg) no-repeat 0 0;
width: xxpx; /* width and height of image */
height: xxpx;
position: absolute;
right: 0;
top: xxpx; /* adjust the position of the image to the heading text from the top */
}
You can use :after in your css like
h1:after
{
background:url(image path)no-repeat;/* apply your image here */
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
look for example http://jsbin.com/uzorew/1
You could try adding div with background img
<h1>Here is my dynamic text <div id="dynamicimage"></div></h1>
#dynamicimage{
background-image: url("images/myimg.png");
}
may i sure tyr this css :
h1 {
height:25px;
overflow:hidden;
position:relative;
}
h1:after {
background:red;/* apply your image here */
content:" ";
position:absolute;
width:999em;
height:25px;
margin:0 0 0 5px;
}
your html :
<h1>Here is my dynamic text </h1>
Pseudo element background image
Although several answers have already suggested the use of CSS's :after, none (at the time of my posting) have shown how to handle the sizing of the image.
Below you'll see that the standard syntax for setting a background image can be applied to an empty content when (as shown in a few other answers) the position is set to absolute.
The width and height properties will set the dimensions of the after pseudo element, but the image size needs to be set via the background shorthand or background-size properties.
i.e. to set the image size to match the size of the after element, use:
background: url( path to image ) no-repeat center/contain;
where center/contain will center and contain the image ;-)
Note that in the snippet below, where the image size hasn't been set correctly, the results are obviously incorrect:
h1:after {
position: absolute;
/* no size or position settings */
background: url(https://lorempixel.com/200/200/) no-repeat;
width: 1em;
height: 1em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
But in the following snippet, where the image size has been correctly set, the results are full of awesome:
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
width: 1em;
height: 1em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
To adjust the size of the after pseudo element itself, change the width and height properties like so:
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
/* width and height of container reduced */
width: .5em;
height: .5em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
And as pointed out by Tepken in his answer, use the top property to adjust the vertical alignment. However, make sure the after's parent also has its position property set, or the image will consider the top to be relative to one of its grandparents:
h1 {
/* the parent must have its position set also */
position: relative;
}
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
/* width and height of container reduced */
width: .5em;
height: .5em;
margin-left: .5em;
content: "";
/* vertically align the image */
top: .35em;
}
<h1>Here is my dynamic text</h1>
Very simple
<div class="content"><h1>Header<img src="one.jpg"></h1></div>
include the image within the header
Basically I can't get the div that holds all the content to move down with the content itself. If I take out the fixed height on the comborder div it disappears. The content remains in place, though over the bg image. Does anyone see any solution to this? I've tried a whole lot and can't come up with anything. I just want to base the height of the content div on the height of the content, like a div usually works. Thanks a bunch!
Here's the site: http://www.drdopamine.com/kineticaid/community.php?page=profile&id=1
Here's the relevant CSS:
.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }
div.comborder {
width:900px;
height:600px;
background-image: url(http://www.drdopamine.com/kineticaid/pics/bg.jpg);
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 10;
}
div.comcon {
background-color: white;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
-moz-border-radius: 15px;
border-radius: 15px;
z-index: 11;
}
Here's the relevant HTML:
<div class="comborder wrap rel" style="margin-top:100px;opacity:0.9;z-index:80;">
<div class="comcon abs" style="opacity:none;">
<div class="comhold rel" style="height:100%;width:100%;border:1px solid transparent;">
<?php
if($_GET['page'] == "profile") {
include_once('profile.php');
}
if($_GET['page'] == "editprofile") {
include_once('editprofile.php');
}
?>
</div>
</div>
</div>
Do this:
body.combody {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://www.psdgraphics.com/file/blue-sky-background.jpg");
background-origin: padding-box;
background-position: left center;
background-repeat: repeat;
background-size: 110% auto;
height: 100%;
}
div.comborder {
background-image: url("http://www.drdopamine.com/kineticaid/pics/bg.jpg");
border-radius: 30px 30px 30px 30px;
height: 100%;
width: 900px;
z-index: 10;
}
What is important to notice is that both the body and the div have a 100% height.
That might help you.
Absolute positioning removes the content div (and everything else) from the flow of the page. That makes it so the containers don't know the size of the inner elements.
Remove all the .abs classes from everything inside the container, and the white background will correctly stretch as you want. However, it also stretches over the black border, so you'd have to find different way to create it.
More general advice:
.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }
These are just plain bad ideas. It looks like you saw or were told about always putting CSS into a CSS file and never in HTML; a good idea when done right, but classes should identify content, not styles. For example:
.sidebar-image { /* css here */ }
.sidebar-donate ( /* css here */ }
.sidebar-infobox { /* css here */ }
It creates duplicate position: tags and so on, but it's also much easier to understand and much easier to get the results you want, since fixing your current problem involves editing the HTML when it should be a CSS problem.