How can you get the text in the background? I would like the title (and other additional text to be in the background) Here is the html code:
This is how it looks at the moment, screenshot of not the whole screen, photo resolution 5498x3615
#title {
text-align: center;
font-family: Playbill;
font-weight: normal;
font-size: 40px;
}
.bg_image {
overflow: hidden;
position: relative;
max-width: 100%;
height: auto;
}
<body>
<h1 id="title">Путеводитель по городам</h1>
<img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site">
</body>
You can set background-image and just put the text on top. Like this:
#title {
text-align: center;
font-family: Playbill;
font-weight: normal;
font-size: 40px;
}
body {
background-image: url(https://via.placeholder.com/1200x600);
background-size: cover; /* Size The Image */
background-position: center; /* Center The Image */
background-repeat: no-repeat;
}
<body>
<h1 id="title">Путеводитель по городам</h1>
</body>
I've got this responsive solution:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
}
#title {
text-align: center;
font-family: Playbill;
font-weight: normal;
font-size: 40px;
position: absolute;
z-index: 1;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.bg_image {
overflow: hidden;
position: relative;
max-width: 100%;
height: auto;
display:block;
margin: 0 auto;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="container">
<h1 id="title">Путеводитель по городам</h1>
<img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site">
</div>
</body>
</html>
Related
I'm trying to learn how to do parallax scrolling effect, watched some tutorials and tried one, but it's not working, any idea what might be wrong?
what shows is just static pictures, it doesn't have any parallax effect at all.
and I can't upload this post because it says my post is mostly code, i wish i can add some lorem here because i literally have no idea what kind of information to add more...
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<title>Task 3</title>
</head>
<body>
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS CODE :
* {
margin: 0;
padding: 0;
}
.parallax-wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.single-parallax h1 {
font-size: 20px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
padding: 5px 10px;
}
.parallax::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.parallax-bg-1::after {
background-image: url(../imgs/1.png);
}
.parallax-bg-2::after {
background-image: url(../imgs/2.png);
}
.static-bg {
background: greenyellow;
}
You were almost there! You shouldn't add the background-image to ::after, you can just add it to the element itself. And you forget a few lines of code for the background-image:
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Here it is all together:
* {
margin: 0;
padding: 0;
}
.parallax-wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.single-parallax h1 {
font-size: 20px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
padding: 5px 10px;
}
.parallax-bg-1 {
background-image: url(../imgs/1.png);
}
.parallax-bg-2 {
background-image: url(../imgs/2.png);
}
.static-bg {
background: greenyellow;
}
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
If you want to have the little scroll effect on the background-image, you can use ::after just like you did:
* {
margin: 0;
padding: 0;
}
.parallax-wrapper{
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax{
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.single-parallax h1{
font-size: 20px;
background: rgba(0,0,0,.3);
color: #fff;
padding: 5px 10px;
}
.parallax::after{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
content: '';
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.parallax-bg-1::after{
background-image: url(../imgs/1.png);
}
.parallax-bg-2::after{
background-image: url(../imgs/2.png);
}
.static-bg{
background: greenyellow;
}
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
I am new to CSS and I want to put text "MOUNTAINS" behind the mountain in the background image. Like the below image.
Home section image
This is the existing code
#home{
height: 100%;
position: relative;
padding: 0;
}
#home-img{
background: url("../img/home/1.jpg");
background-size: cover;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
#home-content{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: 1px;
line-height: 124px;
color: #4d4d4d;
font-family: 'Bebas Neue', cursive;
}
#home-content #first-title{
color: rgb(77, 77, 77);
}
#home-content #second-title{
color: rgb(65, 79, 107);
}
#home-content h1{
font-size: 115px;
margin-left: -25%;
margin-top: -8%;
}
<section id="home" class="col-md-12">
<!-- Background Image -->
<div id="home-img" class="col-md-12">
</div>
<!-- Home Content -->
<div id="home-content">
<h1 id="first-title">LOSANGELES</h1>
<h1 id="second-title">MOUNTAINS</h1>
</div>
</section>
I am stuck with this. So can CSS expert help me to do this? Thank you
Hi please have a look to the snippet.
**z-index** and **position** are important key factors for this case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="background-image: url(https://images.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg);">
<div style="background-image: url(https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Grass-Grounds-Coverings-PNG-Clipart/Green_Grass_PNG_Clip_Art_Image.png?m=1532246688);
background-repeat: no-repeat; height: 100vh; width: 100%; background-size: contain;
background-position: bottom; z-index: 8; position: relative;">
</div>
<h1 style="z-index: 0; position: absolute; font-size: 40vh; transform: translate(-50%, -50%); left: 50%; top: 25%; text-align: center;">Hello<br>Mountain </h1>
</body>
</html>
Here is a code. Try this and replace the files here with yours:
.box{
position: relative;
display: inline-block; /* Make the width of box same as image */
}
.box .text{
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 35%; /* Adjust this value to move the positioned div up and down */
font-family: Arial,sans-serif;
color: #000; /*Set your own colour*/
width: 60%; /* Set the width of the positioned div */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Text Block Over Image</title>
</head>
<body>
<div class="box">
<img src="https://www.tutorialrepublic.com/examples/images/kites.jpg" alt="Flying Kites">
<div class="text">
<h1>Flying Kites</h1>
</div>
</div>
</body>
</html>
I hope it helps.
My content in .box for some reason is going over my header, but not my footer when you resize the window. I was trying to make the footer/header fixed, so they don't move and have content go over them when the window is resized. But like I said it only works for the footer and the header allows content to go over it. So I'm wondering what can I do to fix this? Thanks.
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
Set a z-index for the header with a higher number than the .box which are both 0 by default. So, like try z-index: 999; You can decide to set a higher z-index value for the footer too, although, as it is added after the .box element in the html layout, it will show on top by default.
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
Also, in the example, I decided to change the .box css. Not positive why you have the other css styles. Guess you were working on something a bit different.
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
/* top: 50%; */
/* left: 50%; */
/* position: absolute; */
/* transform: translate(-50%, -50%); */
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
z-index: 10;
}
Using these updated classes you can achieve what you are looking for.
I've just started a new document testing some skills out. In attempt to make a hero image with text overlay which features call to action buttons my background image isn't showing.
I know it's there but it seems to be pushed upwards. When I inspect element and put the padding to 200px it shows but directly putting the code in the file doesn't bring it out.
//CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
}
.header {
background: url(img/hero.jpg);
background-size: cover;
background-position:center;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
margin: 0;
}
//HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/fluid- grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
<title>Test</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Welcome to my site</h1>
Call me
Show me more
</div>
</header>
</body>
</html>
Folder Structure
+ index.htm
+ css
+ img
+ style.css
+ js
+ scripts.js
+ img
+ data
Change .header to header:
header {
background: url(img/hero.jpg);
background-size: cover;
background-position: center;
}
Missing Image Issue
Change back to img/hero.jpg. The next thing you need to do is about the hv. It is wrong. Either put it as vh, which is also not supported, so, better use:
header {
background-image: url(img/hero.jpg);
background-size: cover;
background-position:center;
height: 100%;
width: 100%;
position: fixed;
}
Preview
And the translate is what is affecting:
transform: translate(0%, -50%);
See output: http://output.jsbin.com/furumogoxe
So I have made some changes too to the CSS using another way:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
height: 100%;
}
.row {
max-width: 1140px;
}
header {
background: url(img/hero.jpg);
background-size: cover;
background-position:center;
}
.hero-text-box {
position: absolute;
width: 1140px;
max-width: 100%;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
margin: 0;
}
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
<header>
<div class="hero-text-box">
<h1>Welcome to my site</h1>
Call me
Show me more
</div>
</header>
I have a bit of an issue with Firefox(v30). I'm making a site, using jQuery Fullpage scroller and the whole site works in Chrome(v35), IE(11), Opera(v22), but not in firefox. Some of the stylings appear, like the font and colors, but none of the images or the backgrounds and even the Sections are not displaying properly. Could you look at it please, because I have made another site with the Fullpage script and it's working under firefox and I've used the same method everywhere and now it just doesn't want to work. The address is: http://sikitomi.hopto.org/bts
Here is my index file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" lang="en" content="">
<meta name="robots" content="INDEX,FOLLOW">
<title>Body Training Solutions</title>
<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./css/jquery.fullPage.css" type="text/css" media="screen" />
<!-- <link href="favicon.ico" rel="icon" type="image/x-icon" /> -->
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.easings.min.js"></script>
<script type="text/javascript" src="./js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="./js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
loopTop: true,
loopBottom: true
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section" id="section0">
<div class="left">
<p><img src="./img/logo.png" alt=""/></p>
<p>FULL SITE</p>
<p>COMING SOON</p>
</div>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
</div>
<div class="section" id="section1">
<h1>UPCOMING EDUCATION COURSES</h1>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
</div>
<div class="section" id="section2">
<div class="bg"></div>
<h1>OUR CLASSES</h1>
<div class="arrow">
<img src="./img/arrow.png" alt=""/>
</div>
<ul>
<li class="trx"><img src="./img/trx.png" alt="TRX"/></li>
<li class="trx"><img src="./img/trigger.png" alt="TriggerPoint"/></li>
<li class="trx"><img src="./img/ankorr.png" alt="Ankorr"/></li>
</ul>
</div>
<div class="section" id="section3">
</div>
</div>
</body>
</html>
And here's the style.css I've made:
/* Font */
#font-face
{
font-family: 'canterbold';
src: url('canter_bold-webfont.eot');
src: url('canter_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('canter_bold-webfont.woff') format('woff'),
url('canter_bold-webfont.ttf') format('truetype'),
url('canter_bold-webfont.svg#canterbold') format('svg');
font-weight: normal;
font-style: normal;
}
/* Defaults */
html, body, p, h1, h2, h3, h4, h5, h6, div, ul
{
padding: 0;
margin: 0;
font-weight: normal;
list-style: none;
}
img
{
border: 0;
width: auto;
height: 100%;
}
p img
{
width: auto;
height: auto;
}
/* Customisations */
body
{
background: #fff;
font-family: 'canterbold';
color: #fff;
}
#section0
{
display: inline-block;
background: url('../img/slide01bg.jpg') no-repeat center center;
background-size: cover;
}
#section0 .left
{
position: absolute;
top: 5%;
left: 0px;
width: 36%;
height: 95%;
text-align: center;
font-size: 10vh;
font-size: 600%;
}
#section0 p
{
padding: 2% 0px;
}
#section0 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
width: 36%;
height: 12%;
text-align: center;
}
#section1
{
background: url('../img/slide02bg.jpg') no-repeat center top;
background-size: cover;
}
#section1 h1
{
position: absolute;
top: 4%;
left: 2%;
display: inline;
text-align: left;
font-size: 8vh;
font-size: 480%;
}
#section1 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
height: 12%;
text-align: center;
}
#section2
{
background: url('../img/slide03bg.jpg') center bottom;
background-size: cover;
text-align: center;
}
#section2 h1
{
position: absolute;
top: 1%;
left: 5%;
display: inline;
text-align: left;
font-size: 8vh;
font-size: 480%;
color: #3c3c3c;
z-index: 10;
}
#section2 .bg
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 70%;
background: url('../img/slide03middle.png') no-repeat center center;
background-size: contain;
z-index: 0;
text-align: center;
}
#section2 .arrow
{
position: absolute;
right: 0px;
bottom: 2%;
left: 0px;
height: 12%;
z-index: 10;
text-align: center;
}
#section2 ul
{
display: block;
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 37%;
}
#section2 li
{
width: 33%;
height: 35%;
display: inline-block;
font-size: 0;
}
#section3
{
background: url('../img/slide04bg.jpg') center bottom;
background-size: cover;
}
Any help appreciated, because this is really driving me nuts at this stage... :(
Thanks a lot!
the doctype is missing, try adding <!DOCTYPE html>before the <html> tag