Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I need to reproduce the image below.
The image in the center is my background. In my first div I've got some text. Over this div I need maybe an other div that hides a part of the div with the text so I can see the background of my page. Is there anyway I can have this invisible square in the middle of my div in CSS ?
The reason I need this behaviour is because I'm using the parallax scrolling effect.
Only in webkit, you can use a mask:
#background, #overlay {
position: absolute;
width: 200px;
height: 400px;
}
#background {
background: url("yourimage");
}
#overlay {
top: 0px;
left: 0px;
-webkit-mask-position: 0px 0px;
-webkit-mask-size: 100% 100%;
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 1) 66%),
linear-gradient(90deg, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 1) 66%);
background-color: rgba(255, 255, 255, 0.8);
}
fiddle
I have set the background of the overlay with a little alpha to show that the background div is stiil there, just set it to white in real code.
position:absolute; left: something; top: something; z-index: 2;
I would suggest you use a transparent image for this. This will create a 'window' to expose your background. I will also enable your text to wrap around it as apposed to cover it.
Like this:
#text-container {
width: 500px;
height: 500px;
position: relative;
z-index: 0;
overflow: hidden;
}
#image-container {
width: 200px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
background-color: #aaa;
z-index: 5;
}
And the HTML:
<div id="text-container">
<p>Background text here</p>
<div id="image-container">
<img src="picture.jpg" />
</div>
</div>
The reason for specifying the top and left at 50% is so that the image box will be 50% from the top and left of the parent div. This applies to the top and left edges of the image box though, so it ends up not being quite centered. Setting the margins to - 1/2 the width and hight offsets them so that the box is properly centered.
Here is a link to a working fiddle
I think the best you can do in pure CSS is to place an image on top of your text which exactly matches your background image. It would not be a true hole, just an illusion.
Related
I'm trying to hide an element as I'm scrolling up in the page. I'm using clip-path and position:fixed to try achieve this. This is what I have so far. The text is hidden as I'm scrolling as intended. Wondering if it would be possible to start clipping it from the top as I'm scrolling vs the bottom as it is working right now.
I want the element to be clipped from the top as I'm scrolling down.
One idea I had was to rotate the text 180 degrees, and then rotate the clipped element back 180 degrees but I'm not too sure if that would work/how to implement it. Since transform creates a containing block I don't know how to get the scrolling to work.
#main-container {
position: relative;
height: 100px;
width: 100vw;
}
#clip-container {
position: absolute;
height: 80px;
width: 100vw;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
overflow: hidden;
background-color: rgba(255, 165, 0, 0.5);
margin-top: 10px;
}
.filler-div {
background-color: blue;
width: 100vw;
height: 100px;
}
#text {
position: fixed;
}
<div class="filler-div"></div>
<div id="main-container">
<div id="clip-container">
<div id="text">
<h1>TEXT GOES HERE</h1>
</div>
</div>
</div>
<div class="filler-div"></div>
Learn any of the javascript libraries below
scrollrevealjs.org
scrollmagic.io
Lets say i have a code:
#container {
position: fixed;
top: 50%;
left: 50%;
width: 0;
height: 0;
text-align: center;
font-size: 300px;
}
<div id = "container">
text
</div>
I need the text to be centered. I need the text to be centered, even if the text is bigger than the window. It is necessary, that the text is position fixed, because the whole text sometimes goes BELOW the screen. I don't want it generating any scrollbars. It is very necessary in my situation. I need the container to be as small as possible, because huge scrolling divs generating lag, and i am doing parallax, with about 40 of them.
How do you center that text?
You could try with flexbox (display: flex)
#container {
display: flex;
position: fixed;
font-size: 300px;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<div id="container">
text
</div>
If you use position:fixed, it should not generate scrollbars on html. No need to set size to 0, but transform translate can help:
possible example (out of your context, may be weird if you use transform3D around your page)
#container {
position: fixed;
top: 50%;
left: 50%;
font-size: 600px;/* even bigger for demo purpose*/
transform: translate(-50%, -50%);
}
/* show center */
html {
min-height: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
}
<div id="container">
text
</div>
I'm facing a problem where a background image is set inline in the HTML (because it's a dynamic image src that comes from the database) but I still want to add a semi-transparent gradient on top of the existing background image.
Is this at all possible without using JS?
div {
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)); /* I need this to be added **on top** of the existing background image */
}
<div style="background-image: url(//lorempixel.com/1920/1080/nature/)"></div>
No, you can't add another background-image via CSS if there is one being set via inline styles. But you can use a pseudo-element and place it on top of the div.
Note: As pointed out in comments by Mike, using a :before element is much better than using the :after element because the :after gets placed on top of everything else and would need a lot of z-index settings to the other elements to overcome it (which, could become tedious). In addition to this setting pointer-events:none on the pseudo-element would also help.
div {
position: relative;
width: 200px;
height: 200px;
}
div:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
pointer-events: none;
}
div * {
position: relative;
}
a, p, span {
color: red;
}
<div style="background-image: url(//lorempixel.com/1920/1080/nature/)">
<a href='#'>Some link for hit test</a>
<p>Some paragraph to test the color being affected by gradient on top or not</p>
<span>Some span to test the color being affected by gradient on top or not</span>
</div>
Multiple background images can be added to a single element using CSS but like other properties, the declarations are not additive and hence both the image and the gradient should either be set via CSS (or) by the back-end.
Below is a sample snippet where both the gradient and the image are set inline. You could store entire value as a string in DB (or) append it while setting the inline style (using JS or back-end program).
div {
position: relative;
width: 200px;
height: 200px;
}
a, p, span {
color: red;
}
<div style="background-image: url(//lorempixel.com/1920/1080/nature/), linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2))">
<a href='#'>Some link for hit test</a>
<p>Some paragraph to test the color being affected by gradient on top or not</p>
<span>Some span to test the color being affected by gradient on top or not</span>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to create a circle with CSS, which looks exactly like on the following picture:
How to make this with CSS?
The simplest way I can think to achieve this is to use border-radius on a grey div to make the circle and to apply black borders to two adjacent sides. You can then simply rotate the element so that the borders are on the top.
div.circleThing {
width:100px; height:100px;
background:#666;
border:10px solid black;
border-radius:50%;
border-bottom-color:#fff;
border-right-color:#fff;
transform: rotate(45deg);
}
<div class="circleThing"></div>
Another possible alternative if you do not want to rotate the element is to use a pseudo-element which is placed behind its parent.
Then add a linear gradient background with a cutoff to white and then you get your desired effect.
This does require a little more CSS and is a little more difficult but you get the plus side of not having rotated elements.
.circle {
width: 130px;
height: 130px;
background: grey;
margin: 10px;
border-radius: 50%;
position: relative;
}
.circle:before {
content: '';
position: absolute;
z-index: -1;
width: 150px;
height: 150px;
display: block;
margin: -10px;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 1) 100%);
border-radius: 50%;
}
<div class="circle"></div>
Im doing the following in css:
background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/back.jpg') no-repeat fixed center;
i want to stretch the image to 100% 100%, how should i do so?
Use background-size: 100% 100%;.
Alternatively:
background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/back.jpg') no-repeat fixed center / 100% 100%;
try
background-size:100% 100% // or cover
From what I know, you cannot stretch an image in background with CSS.
To start, you can use more accurate CCS:
body {
background-image: url('../img/back.jpg');
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.75);
}
But the picture will not stretch with this.
An other possibility than CSS, is to use a cell of a table with a picture, in a div that is set to background:
<div class=background>
<table width=100%><TR><TR>
<img src="../img/back.jpg" width=100%></TR>
</TR></TR></table>
</div>
And in CSS, you have to create layers with different z-index:
div.background {
z-index: -1;
position: fixed;
left: 0px;
top: 0px;
float: top;}
div.notbackground {
z-index: 0;
position: absolute;
left: 0px;}
the rest of your page should be placed in the "notbackground" div to appear in higher layer, so the picture is really on background. z-index=0 is higher than z-index=-1 (you ca use any numbers). This way your picture will appear as a background.
It's possible that some advanced CSS do the trick but after a quick search on Google I still don't know.