Im doing a website (is not my fist page) but in this I cant put a image for background. Is not the first time that i do that so i cant no explain me why I cant do it in this time.
Im working with SASS and HTML5, this is my code:
HTML
<header class="header">
<div class="contenedor contenido-header">
<h1>Hola!<br> Soy <span>name,</span> <br> profesionn</h1>
<h2>Te invito a ver algunos de los proyectos que he creado</h2>
<nav class="navegacion">
CV
Habilidades
Sobre Mí
Contacto
</nav>
</div>
</header>
SCSS
.header {
//background-color: $rosa;
background-image: url(../../img/header.jpg); -->This is my problem
padding: 8rem 0 6rem 0;
.contenido-header {
text-align: center;
h2 {
margin-top: 3rem;
}
span {
color: $dorado;
}
}
}
I think you forgot the quatations ", make sure that surround url with quatation mark.
background-image: url("../../img/header.jpg");
Related
I can't seem to get my text next to a square div/span.
I've tried a div, then float with the text; I also tried a span with display: inline-block and display:block. I can't seem to find out what I'm doing wrong. Already searched on Stack Overflow, but those solutions don't seem to work for me.
Here is the code I use:
.event-date{
background-color: #2C3846;
color: white;
width: 50px;
height: 50px;
margin: 20px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.event-text{
float: left;
}
<body>
<div class="main-container">
<section class="col-content">
<main>
<h1>Onze evenementen</h1>
<section>
<div class="event-date">9<br>apr</div>
<h2 class="event-text">Discussiebijeenkomst Europa</h2>
<p class="event-text"><q>Wat betekent Europa nu concreet voor mij, in mijn dagelijks leven als
...</q></p>
</main>
</section>
</div>
</body>
I want the 'h2' and the 'p' stuff next to the blue square. it's going to be like an event list, and the blue box is the date.
Well, it's pretty simple, you have the main div, which will include both, the date and the text. You put the float on the wrong class, as the element that'll go after the div will be the text, so you have to add float: left; to the date div. Nevertheless, you'll have something like this :
.event-date {
background-color: #2C3846;
color: white;
width: 50px;
height: 50px;
margin: 20px;
float: left;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.event-text {
margin: 0;
padding: 0;
}
<body>
<div class="main-container">
<section class="col-content">
<main>
<h1>Onze evenementen</h1>
<section>
<div class="event-date">9<br>apr</div>
<br><h2 class="event-text">Discussiebijeenkomst Europa</h2>
<p class="event-text"><q>Wat betekent Europa nu concreet voor mij, in mijn dagelijks leven als
...</q></p>
</section>
</main>
</section>
</div>
</body>
I addded simply float: left; to the date div, got rid of the padding and margin of the text (to fit better the date space) and added a <br> to break the upper empty space that would put the text too much on top (see it before the <h2> mark). Hope it helped. If you wish also, here's the a Fiddle too :
JSFiddle DEMO
You can amend this simply by displaying the date and text inline-block
.event-date, .event-text{
display:inline-block;
}
If you want the date to float to the left of the text, add float:left to the date CSS.
JSFiddle Demo
I have created a text block on an image but when I check the site on iPad and iPhone the image stays ok, but the text moves.
How can I make this text responsive?
Link: http://test.preci-dental.be/home/
This is the code I used:
<style>
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
bottom: 20px;
left: 95px;
right: 740px;
background-color: white;
opacity: 0.75;
color: black;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="container">
<center><img src="http://test.preci-dental.be/wp-content/uploads/2019/01/helping-your-child-trust-the-dentist-1110x450-1024x415.jpg" alt="Nature" style="width:90%;"></center>
<div class="text-block">
<h1 style="color:#749C91;">Preci-Dental</h1>
<br><p style="color:black;">Welkom bij tandartspraktijk Preci-Dental. De groepspraktijk werd door Liesbeth en Karel opgericht in 2019 en is gevestigd in Bertem, gelegen tussen Leuven en Brussel. Bij Preci-Dental streven we naar moderne mondzorg op maat voor iedereen: precieze en persoonlijke service, gebaseerd op bewezen efficiënte en moderne technieken.</strong></p>
</div>
</div>
Thank you in advance!
If you don't mind on using media queries, i guess this should solve your problem:
PS: I used "!important" because i injected the code via plugin. Maybe is not needed in your case.
I'm also assuming you want the text area as 70% of your viewport width and 600px as max-width in your media query. So, when your viewport width is smaller than 600px, the code will override your css for this selector.
About media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
#media only screen and (max-width: 600px) {
.text-block {
left: auto !important;
right:auto !important;
min-width:70vw;
}
}
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!
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?
Here is a basic question. I'd like to understand why the HTML element in my basic page are behaving the way they are, if someone could help me out.
Here's my code
<body>
<div id="wrapper">
<header>
<a id="logo" href="#">Evolvefitnesscoaching</a>
<nav>
<ul class="nav">
<li>Blogue</li>
<li>Une Question?</li>
</ul>
</nav>
</header>
<section id="slider">
<div id="cta">
<h2>Perdre du poids, une habitude à la fois!</h2>
<h3>Changez votre corps et votre vie, avec un coaching personnalisé par des
professionnels de la perte de poids et de l’activité physique.</h3>
</div>
</section>
<section id="apropos">
<h1>Avec evolvefitness, blah blah blah</h1>
</section>
</div>
Here's my css
body {
margin: 0px;
}
header {
width: 100%;
height: 80px;
position:absolute;
background-color: darkgrey;
}
nav {
width: 250px;
height: 100%;
position: relative;
background-color: cyan;
float: right;
}
.nav {
list-style: none;
}
.nav li {
display: inline;
margin-right: 10px;
}
.nav li a {
text-decoration: none;
color: white;
font-size:1.1em;
}
.nav li a:hover {
color:black;
}
#logo {
}
#slider {
display: block;
background-color: yellow;
width:100%;
height:700px;
}
#cta {
margin-top:px;
width: 500px;
height: 300px;
background-color: aquamarine;
}
#apropos {
width:100%;
height:300px;
text-align:center;
}
Now, what I don't understand is that the section #slider is not under, as per block, the header section but actually underneath (what I mean is that the header is comprised inside the section #slider), when, as far as I know, it should be over it, as if 2 blocks are stacking one over the other.
How is that so? The one called apropos is behaving as i'm expecting it to behave, ie, it's under the #slider section (blocks stacking). But the #slider section is not behaving like what i'm expecting, either because I don't understand well or something is off. Because of that, when I add another div inside of the slider section (#cta), it adds a margin between the body and the top part of my document.
Very basic question but i'm just starting out, if someone could help me :\
Thanks!
Your header is absolutely positioned and thus removes itself from the rest of the rendered layers.
Change its position into 'relative' (position: relative) and everything will work as expected.
The end tag of #wrapper should be placed above the closing body tag. Hmm it was just there, you changed something?