I am trying to get text over a translucent div. This is in Chrome, if that's relevant (i.e. a Chrome bug). For some reason, whenever the text is on top of the div (moved there by a negative margin-top), it is also partially transparent.
HTML is as follows (this is a simplified approximation):
<div class="background-image-div"></div>
<div class="content">
<p>Text goes here</p>
</div>
CSS is as follows (this is a simplified approximation):
.background-image-div {
background: url(../images/Image.png) no-repeat right;
opacity: .5;
}
.content {
height: 480px;
margin-top: -271px;
max-width: 1200px;
padding-top: 15px;
padding-bottom: 15px;
}
So background-image-div should absolutely be translucent, but for some reason, the text in the content div, which shouldn't be and which isn't a child of background-image-div is translucent as well. When I turn opacity off of the background-image-div, it doesn't appear to be on the content div, and likewise when I don't use negative margin-top on the content div (to push it to the same position as background-image-div), it also doesn't appear to be translucent.
What is going on exactly? As far as I can tell this is not WAD. Is it a bug in Chrome?
The text is not translucent. What is happening is that the translucent image is on top of your text, so you see the text lighter.
Here's a modified version of your CSS. The important addition is position:relative and z-index: -1 on the .background-image-div
.content {
height: 480px;
margin-top: -271px;
max-width: 1200px;
padding-top: 15px;
padding-bottom: 15px;
color: black; font-size: 40px; font-weight: bold;
}
.background-image-div {
position: relative;
z-index: -1;
width: 600px;
height: 600px;
background: url(https://upload.wikimedia.org/wikipedia/commons/2/21/EverestfromKalarPatarcrop.JPG) no-repeat right;
opacity: .5;
}
On CodePen: https://codepen.io/vic3685/pen/PzdEEJ
Try this and tell me how it works, it worked for me.
HTML
<div id="picture">
<div class="background-image-div"></div>
<div class="content">
<p>Text goes here</p>
</div>
</div>
CSS
.content {
top:400px;
left:200px;
background-color:red;
position:absolute;
}
.background-image-div {
/*place your image in here*/ background: url('http://hk.blouinartinfo.com/sites/default/files/1349378871-56591.jpg') no-repeat;
opacity: .5;
background-size:cover;
/*or whatever size you want*/
height:500px;
width:500px;
}
Related
Please, don't say anything like OH THERE ARE A LOT OF ANSWERS OUT THERE. I founded a lot of them, but none of them worked. This is HTML:
<img src="images/ONamaImg.png" class="main-page-img"> (not all of the HMTL of course, only pic code)
And here is CSS:
.main-page-img
{
filter: grayscale(100%) blur(10px);
float: right;
width: 550px;
height: 700px;
z-index: -1;
border-radius: 1000px 0px 0px 1000px;
margin-top: -350px;
box-shadow: 0px 0px 30px #777777;
overflow:hidden;
}
Thanks!
First, wrap the image in a container :
<div class="container">
<img src="path/to/image.jpg">
</div>
Then, add these css rules to the container and image:
.container {
overflow: hidden;
height: /*add height*/;
width: /*add width*/;
}
img {
margin: -10px;
}
Note: I didn't add other styles. Make sure to add them.
The basic concept is to wrap the blurred image in the container and clip the blurred edges using negative margins.
I also found a lot of answers that don't seen to solve the problem.
Here is my attempt:
HTML
First I created a container and added an image to use as the crisp border.
<div class="container">
<img class="border-img" src="https://pbs.twimg.com/profile_images/2209676047/gatinho-5755_400x400.jpg" />
<div class="blur-img"></div>
</div>
CSS
Then I use the same image as a background to an epty div inside the container. Within the div backgroud I can scale and adjust the images to make then appear like one.
.container {
width: 450px;
height: 500px;
overflow:hidden;
}
.blur-img {
width: 70%;
height: 70%;
background-image: url("https://pbs.twimg.com/profile_images/2209676047/gatinho-5755_400x400.jpg");
background-position: center;
transform: scale(1.2); /* use scale to zoom image */
filter: blur(10px);
position:relative; /* adjust position */
left:15%;
top:15%;
}
.border-img {
width: 450px;
height: 500px;
position:fixed;
}
Output
And the output looks like this:
I have 2 divs. Right div is an image cutted diagonally. Left divs must have some text inside. I want this to be fully responsive like this:
The problem occurs when I change window size, it's collapsing like in the image:
.
Also there is a text on left div that need to be displayed, but with flex this seems not to work so i disabled it. Please provide solution for this.
Here is my css and html:
#diagonal {
display: flex;
width: 100%;
}
#diagonal #ct-about-col-left {
width: 60%;
border-right: 190px solid transparent;
border-bottom: 500px solid grey;
z-index: 2;
}
#diagonal span {
display: none;
}
#ct-about-col-right {
height: 500px;
width: 50%;
border: 2px solid;
background-image: url(images/content/about/right-col-image.jpg);
z-index: 0;
margin-left: -12%;
margin-right: 0;
}
}
<div id="diagonal">
<div id="ct-about-col-left">
<span>We are the best</span>
<span>text1 text1 text1</span>
<span>Text2 text2 text2 text2</span>
<div>
<span>Read more</span>
</div>
</div>
<div id="ct-about-col-right"></div>
</div>
Maybe consider a slightly different mark-up and method of adding the picture (as a background-image) and making the angle (with transform: skew).
Live Demo: http://codepen.io/anon/pen/rjyKRo
<div class="container">
<div class="caption">
<p>CONTENT</p>
</div>
</div>
* { box-sizing: border-box; }
.container {
width: 100%;
height: 50vh;
overflow: hidden;
background-image: url("http://unsplash.it/600");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 50%;
}
.caption {
height: 100%;
width: 50%;
min-width: 500px;
padding-top: 20%;
padding-left: 130px;
background-color: #ddd;
transform: skew(10deg, 0deg);
transform-origin: 100% 100%;
}
.caption p {
transform: skew(-10deg, 0deg);
}
May I suggest another approach which will save You some markup space and CSS rules as well.
Simply create a full-width div with the ID of lets say ct-about, give it a background color grey and then simply chain the image background on top of the color like so:
background: url('images/content/about/right-col-image.jpg') no-repeat right top, grey;
This simply tells the browser, make my box grey and put that image over the grey color. The no-repeat right top properties are preventing the browser from repeating the image so you don't get a tile, tell ti to place the image on the far right and top positions.
This way everything will be responsive as well.
Here is a Fiddle for You to better understand.
You can find more information about multiple CSS backgrounds in the Mozilla Developer Network
I'd like to had a specific design to a webpage i'm designing.
The main wrapper contains a succession of <div class='section'> and <div class='section-header'>. The section-header should display the section's title over an image.
exemple:
<div id="tag" class="section-header">
<h1>Title</h1>
<img src="assets/img/some_image.jpg">
</div>
So far my css is:
.section-header
{
width: 100%;
height: 192px;
overflow: hidden;
}
.section-header > *
{
width: 100%;
line-height: 192px;
margin: 0;
}
.section-header > h1
{
position: absolute;
z-index: 10000;
text-align: center;
}
.section-header > img
{
filter: opacity(50%);
}
however i'd like to add some relative movement between the background image and the section-header. I basically wanted to fixe the image to the screen with position: fixed; and let the overflow: none; do the job.
However it appears that as soon as I add position: fixed; top: 0; to .section-header > img, the overflow isn't hidden anymore and the image is visible regardless of the position of the header it's nested in.
How can I solve that ?
Edit:
devel code is visible here. I'd basically have the image behind each section's title not to scrool with the page, and just to have the section's header reveal it as you scrool
If I understand the effect you want, you may need to use the img as background; try this:
body{
background: #f3f3f3;
height:800px;
}
div {
text-align:center;
color:white;
width:80%;
margin:150px auto;
line-height:200px;
background:url('http://lorempixel.com/600/600') no-repeat center;
background-attachment: fixed;
}
div h1 {
font-size:3em;
}
<div>
<h1>Mytitle</h1>
</div>
Jsfiddle Demo
Overflow is ignored for position:absolute children in parent that is relatively positioned.
One way of fixing the problem is giving .section-header a position:absolute or position:fixed too. (whichever is most useful for you).
like this :
.section-header
{
width: 100%;
height: 192px;
overflow: hidden;
position: absolute;
}
see this jsfiddle
I've created a long scrolling website composed of different sections which fill up the whole screen. One Section contains some pretty lengthy text but the top and bottom parts of the text are cut off. Basically my div won't stretch all the way to accommodate the text. I would like my div to be able to stretch to at least 200% down.
fiddle
I've tried
overflow:auto;
min-height:100%;
This is what it looks like, as you can see at the bottom...the text is cut off.
If I remove Position: absolute; The whole text moves to the left and the bottom text is still cut off.
This is part of my html:
<section id="slide-15" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<h1>CV GUIDE</h1>
<br>
<h2>
//lengthy text goes here
//lengthy text goes here
//lengthy text goes here
</h2>
</div>
</div>
</section>
and part of style.css
#slide-15 .bcg {
/*position: relative;*/
background-color: #1C1C1C;
min-height: 100%;
overflow: auto;
/*padding:150px;*/
}
slide-15 .hsContent {
position: relative;
}
slide-15 .hscontainer {
width-100%
min-height: 100%;
overflow: auto;
/* position:relative;*/
}
#slide-15 h1 {
margin: 70px;
color: #ffffff;
font-size: 30px;
line-height: 20px;
position: relative;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
#slide-15 h2 {
color: #ffffff;
font-size: 14px;
line-height: 150%;
position: absolute;
line-spacing: 1px;
text-align: justify;
width: 700px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
with position:absolute it gets cut out of the workflow ,so you need to remove it with you want the parent div to adjust to height;
also set it to display:inline-block ,
check fiddle
You've got a lot of syntax errors in CSS,
I cleaned it up a little here's an updated fiddle
Try creating a class in css like this:
.test {
white-space: nowrap;
}
and apply it to your h2:
<h2 class="test">
//lengthy text goes here
//lengthy text goes here
//lengthy text goes here
</h2>
Hi Folks Here is what i got in css:
#loading {
background:#000 url(loading.png) center;
opacity:0.5;
cursor:auto;
min-height:250px;
z-index:15;
}
#main {
padding: 10px;
z-index:1;
}
and in html:
<div id="loading">
<div id="main">Something here</div>
</div>
and i expect the loading.png to cover the div#main but it doesn't and "Something here" stays on the top of loading.png !?
Update: background is in CSS not an image in loading div.
Your HTML is wrong. The div main should be outside the div loading:
<div id="main">
<div id="loading"></div>
Something here
</div>
You also need to position the latter div using CSS so that it does not just push the main content out from underneath it, as well as sizing the div at 100% of its container's width and height:
#main { position: relative; }
#loading {
background: url("loading.png");
opacity: 0.5;
cursor:auto;
width: 100%;
height: 100%;
z-index:15;
/* Positioning */
position: absolute;
left: 0;
top: 0;
}