Well, I searched a lot and everything that I find didn't work for me, like a curse, what I'm tryng to do is blur a background image when the person that is viewing the web page see the div, I started to make this page a short time ago, as soon as I started to try to learn CSS and JavaScript, so, what I've done is this:
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> BIRL </title>
</head>
<body>
<div class="bg-img">
<br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><div class="botao"><img src="play.png" class="playButton"></div></center>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
<div class="info">
<h1 class="titles">Quem nós Somos?</h1>
<a class="macaco">Nós somos uma empresa totalmente responsável e profisisonal inclinada a satisfação de nossa clientela
Nossos produtos sempre foram, são, e sempre serão destinados a nossos clientes, (salve ronildo)</a>
<h1 class="titles">Qual é a nossa missão na terra?</h1>
<a class="macaco">Nossa missão é proporcionar a melhor qualidade de entreterimento sadio para a sua família e amigos afins,
todos os nossos jogos possuem uma qualidade exemplar e classificação livre, ou seje, eles podem ser jogados por qualquer pessoa
em qualquer idade e qualquer lugar do mundo, nós nunca utilizaremos palavras de baixo calão em nossas obras eletrônicas, isto
é um exemplo para os seus filhos.</a>
</div>
</div>
</body>
</html>
css:
#font-face {
font-family: LemonMilk;
src: url(LemonMilk.otf);
}
.playButton {
width: 55%;
height: 40%;
z-index:2;
}
.game {
width: 100%;
height: 100%;
}
body {
background:url('background.jpg') no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.botao {
float: rigth;
width: 100%;
height: 100%;
vertical-align: middle;
z-index:2;
}
.info::before {
display: block;
width: 100%;
height: 100%;
background: url('background-blurred.jpg');
background-size: cover;
content: '';
opacity: 1;
}
.info {
background-color: #FFFFFF;
font-family: LemonMilk, Verdana, Tahoma;
padding: 70px;
text-align: justify;
}
.titles {
color: #000000;
text-align: center;
z-index: 1;
}
.macaco {
color: #000000;
}
I want to make something like this: http://jordanhollinger.com/media/bmu-landing.png
Here you go: How to apply a CSS 3 blur filter to a background image
Now, there is typo float: rigth. Also, there are a lot of unnecessary things in your code, but you are beginner. Keep practicing and everything will fall in its place eventually!
And, it is hard to decipher what you want exactly.
" what I'm tryng to do is blur a background image when the person that is viewing the web page see the div,"
Do you mean, when DIV with the picture is visible?
Related
I'm building a responsive website and I want the behavior in this picture:
as you see the line is centered and more specifically it's under the letters out of the about word I tried to have this by adding the display:block and the margin:auto to center the line, it worked but it didn't achieve what I'm aiming to (I want the line to be under the 'out' letters), I have tried to position the line with adding a margin-left it worked too but it's not responive. any solutions?
here is my code:
HTML
<section class="about-us">
<h1 class="title"><i class="fas fa-utensils abicon"></i>
About us<div class="line"></div></h1>
<p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un
imprimeur
anonyme assembla </p>
</section>
CSS
.about-us {
color: black;
font-family: Roboto;
position: relative;
}
.title {
text-align: center;
vertical-align: text-bottom;
}
.title::after{
content:"";
background-color: #ff9900;
width: 50px;
height: 4px;
margin-bottom: 50px;
display:block;
margin:auto;
}
.abicon {
font-size: 2rem;
}
.title-description {
display: block;
margin: auto;
}
this is a codepen snipet: https://codepen.io/Amoocris/pen/vPWOpX
By the way I know this is kind of stupid question but I'm still a CSS beginner, I have tried the align-text:center and it didn't work I wanna know why and thank you in advance
A very simple solution would be to wrap the characters "out" in a span.
.about-us {
color: black;
font-family: Roboto;
position: relative;
}
.title {
text-align: center;
vertical-align: text-bottom;
}
.title .underline {
border-bottom: 4px solid #ff9900;
}
.abicon {
font-size: 2rem;
}
.title-description {
display: block;
margin: auto;
}
<section class="about-us">
<h1 class="title"><i class="fas fa-utensils abicon"></i> Ab<span class="underline">out</span> us
</h1>
<p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla </p>
</section>
If you're allowed to change the HTML you could use add a span around the letters "out" and then add the underline with pseudo elements:
.underline {
position: relative;
}
.underline:after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 4px;
background-image: linear-gradient(to right, orange, red);
box-shadow: 0 0 2px 2px rgba(255, 0, 0, .2);
border-radius: 2px;
}
<h1>Ab<span class="underline">out</span> us</h1>
EDIT:
I used pseudo elements instead of a border or a simple underline because it gives you more freedom in case you want to go crazy with effects like shadows, gradients, animations, ...
so I've seen answers to this question but they don't seem to work on my site.
Why do my background images not cover the whole div? As I decrease the screen width the elements are getting longer but the section background stays the same.
Apologies for quite a lot code coming up but I thought it best to show the whole picture.
Thanks in advance for any help.
html
<section class="about">
<div class="row">
<h2 id="trabajo">Cómo trabajo</h2>
<p id="about-subheading">Déjame adivinar cómo quieres tu trabajo…</p>
</div>
<div class="about-container">
<div class="col a"></div>
<div class="col b">
<i class="fas fa-plane"></i>
<h3 class="about-h3">¿Lo quieres rápido?</h3>
<p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
grabación de tu proyecto.</p>
</div>
<div class="col c">
<i class="fas fa-trophy"></i>
<h3 class="about-h3">¿Quieres profesionalidad?</h3>
<p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
</div>
<div class="col d">
<i class="fas fa-dollar-sign"></i>
<h3 class="about-h3">¿Quieres un precio justo?</h3>
<p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
adaptado para ti!</p>
</div>
<div class="col e"></div>
</div>
<div class=row>
<p class="your-voice">¡Entonces soy tu voz!</p>
<div class="btn-container">
¡Pide tu presupuesto!
</div>
</div>
</section>
CSS
.about {
height: 100vh;
background-image: linear-gradient(rgba(237, 99, 117, 0.9), rgba(237, 99, 117, 0.9)), url(Images/thumbnail_section\ COMO\ TRABAJO.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.about:after {
position: absolute;
width: 70px;
height: 70px;
top: 100%;
left: 50%;
margin-left: -35px;
content: '';
transform: rotate(45deg);
margin-top: -35px;
background-color: #D65A6A;
}
#trabajo {
color: white;
text-align: center;
font-weight: 400;
font-size: 150%;
position: relative;
margin-top: 10px;
letter-spacing: 1px;
}
#about-subheading {
text-align: center;
position: relative;
margin-top: 20px;
}
.about-container {
display: grid;
grid-template-columns: 120px 1fr 1fr 1fr 120px;
}
.col {
text-align: center;
margin-top: 20px;
padding: 20px;
}
.fas {
font-size: 200%;
color: white;
}
.fa-plane {
transform: rotate(320deg);
}
.about-h3 {
margin-top: 30px;
font-size: 100%;
font-weight: 400;
}
.about-p {
margin-top: 20px;
font-size: 80%;
line-height: 23px;
font-weight: 100;
}
Pretty new to this so thanks in advance :)
Here is the image
I copied and pasted your code to test it. With the code you gave, your image covers the entire <div>, with no awkward looking blank space between the <div>.
When I go into the responsive design mode of the firefox browser I'm using (right click screen -> inspect element -> go to the top right button of the window that pops up, or ctrl+shift+M on windows)... When I set the height to 800px wide by 450px high, the wider you make it, the image starts expanding length wise as you wanted.
The reason for this is because you have background-size: cover;, which resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
I have a 1920x1080 px screen, and this same principle happens outside of responsive design mode too, though the height expands shortly before the max width of my screen. Besides that small window of expansion, the image stays the same size all the way until my browser window is as skinny as it can get, which is around 250px, again, because of background-size: cover;. A lot of the image is cut off too. You can read more about that property here.
Other than what I said above, if your image is not expanding in height as I said it did, your problem then is most likely from some other inherited css class, which you need to show to help debug it. So check the css classes inside any containing elements that your <section> tag is in.
ANOTHER TIP: You only gave 1 image here, but your words sound like you have many. Because your .about class is position: fixed;, then only that image will show up. If you want any other images to show up in their own <div>'s with the same fixed positioning, you'll need to copy/paste the original class, but change the name slightly, and the image path to a new image.
For anyone facing the same issue I've just solved my problem.
I just changed 'height: 100vh' to 'min-height: 100vh' and it seems to have done the job!
I have a box with an image at the right-side and text at the left-side. The box should have a white background. At smaller screens the text goes below the image which is good.
A few px above the bottom of the box I want to have a button.
Think I should do that by using position relative for the box and position absolute for the button.
The CSS and HTML code is
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
.button {
vertical-align: middle;
position: absolute;
bottom: 40px;
margin-left: 15px;
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
<hr>
</div>
Problem is that on smaller screen the text is displayed over the button. Another issue is that padding of the text does not prevent it getting connected to image (laptop/desktop). I do not want to add margin-left to picture because I want the line <hr>to be connected to the image.
The button is over the text because you have used position:absolute to the button.
Set position:relative and bottom:auto in the smaller screen using media query rule...
Also using vertical-align: middle; in the absolute positioned elements will do nothing...so better to remove it
Stack Snippet
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
img {
max-width: 100%;
}
.button {
position: absolute;
bottom: 40px;
margin-left: 15px;
}
#media (max-width:768px) {
.button {
position: relative;
bottom: auto;
margin-left: 15px;
}
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
<hr>
</div>
I have 4 divs with image as background and I want them all to have a dark overlay, but the absolute position is somehow messing things up because all 4 overlays end up over the first div when I want each to include all 4 divs.
Thanks in advance!
You should set the .overlay as a child of the .factorImg div and make .factorImg have position: relative, otherwise the .overlay will be set absolute to .row.
You could also look into pseudo-classe (:before and :after):
https://www.w3schools.com/css/css_pseudo_classes.asp
Put <div class="overlay1"></div> tag inside factorImg1 div and give it to position:relative. Do same thing in all respective div.
Put your overlay divs inside bootstrap columns which will have display: relative by default. Check below snippet for reference.
.overlay1,
.overlay2,
.overlay3,
.overlay4 {
width: 14.7%;
height: 270px;
background-color: #000000;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.factorImgText {
position: absolute;
z-index: 1;
padding: 0 5px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
text-align: center;
width: 90%;
}
.factorSection h6,
.factorSection p {
color: #fff;
font-weight: 900;
}
.factorSection h6 {
font-size: 1em;
text-align: center;
width: 90%;
}
.factorSection p {
font-size: .75em;
line-height: 1.4em;
margin-bottom: 0;
}
.factorImg1,
.factorImg2,
.factorImg3,
.factorImg4 {
background: rgba(0, 0, 0, 0.6);
opacity: 1;
height: auto;
padding-top: 8%;
padding-bottom: 8%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 270px;
width: 23.8%;
position: relative;
}
.factorImg1 {
background-image: url('http://kleingartenverein-aligse.de//images/wallpaper/Oct/fall-1072821_1920.jpg');
margin-right: 10px;
}
.factorImg2 {
background-image: url('http://kleingartenverein-aligse.de//images/wallpaper/Oct/fall-1072821_1920.jpg');
margin-right: 10px;
}
.factorImg3 {
background-image: url("http://kleingartenverein-aligse.de//images/wallpaper/Oct/fall-1072821_1920.jpg");
margin-right: 10px;
}
.factorImg4 {
background-image: url("http://kleingartenverein-aligse.de//images/wallpaper/Oct/fall-1072821_1920.jpg");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="background_section2">
<div id="section2-05" class="container">
<div class="row">
<div class="col-lg-12 col-sm-12">
<h2>¿QUÉ ES EL FACTOR ZURPRAIS?</h2>
<p>¡Mucho más que el factor sorpresa!</p>
</div>
</div>
<div class="row factorSection">
<div class="col-sm-3 col-xs-12 factorImg1">
<div class="factorImgText">
<h6>2 DÍAS ANTES… ¡ZURPRAIS!</h6>
<p>Con tu pack de experiencias, tu edad y tu perfil (familias, parejas, amig#s…), organizaremos tu plan… Y como es Zurprais, 2 días antes sabrás lo que es.</p>
</div>
<div class="overlay1"></div>
</div>
<div class="col-sm-3 col-xs-12 factorImg2">
<div class="factorImgText">
<h6>PLANES CON UN PLUS</h6>
<p>Un atardecer en velero… ¿con cava y ostras? Un brunch… ¿entre viñedos? Todas tus experiencias tendrán un toque extra que las hará aún más especiales.</p>
</div>
<div class="overlay2"></div>
</div>
<div class="col-sm-3 col-xs-12 factorImg3">
<div class="factorImgText">
<h6>EMOCIÓN DESDE LA RESERVA</h6>
<p>Al reservar, empieza el juego. Recibirás algunas pistas sobre las actividades que te podrían tocar. Para que vayas calentando motores.</p>
</div>
<div class="overlay3"></div>
</div>
<div class="col-sm-3 col-xs-12 factorImg4">
<div class="factorImgText">
<h6>CAMBIO GRATUITO</h6>
<p>¡Segurísimo que tu plan te va a encantar! Pero para que estés tranquil#: si no te gusta lo que te hemos organizado, te preparamos uno diferente para otro día.</p>
</div>
<div class="overlay4"></div>
</div>
</div>
</div>
</div>
I want to add links for every box but whenever I try to add an "a" tag it messes everything up. What am I missing :-/ ? I have tried a lot of stuff and still can't figure out what wrong. Would appreciate your help.
Thanks
This is how it is supposed to look
http://oi66.tinypic.com/iykcc5.jpg
https://jsfiddle.net/983wga5c/7/
HTML
<div class="fwsmain">
<div class="fwsside side-text"><span>Tinutul Neamtului</span><p class="text">Pentru cei care au fost prima data, tinutul Neamtului a devenit locul in care te intorci cu bucurie. Platoul cu preparate moldovenesti de la Hanul Ancutei, drumetiile pe Ceahlau, fotografiile de la Barajul Bicaz, viata de noapte din Piatra Neamt, zimbrii, cetatea Neamtului, manastiri din top 10 din Romania, Muzeul de masti de la Tincabesti sau casa memoriala a lui Creanga, sunt doar cateva dintre atractiile memorabile din aceasta zona. Si ai cel putin cinci evenimente de traditie pe care nu trebuie sa le ratezi.</p></div>
<div class="fwsside">
<div class="fwsside-flex1">
<div class="fwsitem"><div class="hoverbg"><span>Case memoriale</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Turnul lui Ștefan</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Orașul de sus</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Hai la ski</span></div></div>
<div class="fwsitem fullw"><div class="hoverbg"><span>Trebuie să vezi</span></div></div>
</div></div>
</div>
CSS
.fwsmain{
width: 100%;
display: flex;
flex-wrap: wrap;}
.fwsside {
height: 100%;
width: 50%;}
.side-text{
margin:auto;
padding:0 20px;}
.fwsside-flex1{
height: 100%;
width: 100%;
display:flex;
flex-shrink:1;
flex-grow:1;
flex-wrap:wrap;}
.fwsside-flex1 .fwsitem {
width:50%;
text-align: center;
background-size:cover;
}
.fullw{
width:100% !important;}
.hoverbg:hover {
background:rgba(0, 0, 0, 0.6);
}
.fwsside-flex1 .fwsitem:nth-child(1) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/calistrat-hogas.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(2) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/clopotnita-turn-pnt.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(3) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/telegondola.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(4) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/ski.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(5) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/cucuteni.jpg');
}
.fwsside-flex1 span {
line-height:33.3vh;
margin:auto;
font-size: 33px;
font-weight: bold;
color: #fff;}
It looks like you have to move your class="fwsitem" to your newly added <a> tags because they are now your flexbox container's (.fwsside-flex1) children.
Here is a updated fiddle.