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>
Related
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>
I am trying to combine two pictures in HTML, but I am seeing the blank spot after using skewY in CSS. How can i make bottom image and white spot to combine it to fit in the design view?
Below is HTML. I am adding image 1 into <div class="header__bg"> and image 2 into <section class="main_image">.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="HTMLPage2.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
<div class="header__bg"></div>
<h1>test</h1>
</header>
<section class="main_image">
<h1>Section Content</h1>
</section>
</body>
</html>
Below is CSS. I am trying to code to add 2 images make shape i want. I would like to see blank part to be part of bottom image.
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("GettyImages2.jpg");
transform: skewY(-6deg);
transform-origin: top left;
}
section.main_image {
background-image: url("GettyImages1.jpg");
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: left;
margin: 35px;
}
header h1 {
position: relative;
color: white;
}
I see white section between images and I would like white section to be part of bottom image. Is there any ways to do this?
There are several approaches to get what you wanted.
Note: I just used two different random image samples from the internet for better illustration.
Margin with negative values:
First of all, you can try margin-top: some negative values; (in my example I just used -77px) and adding z-index: 1; to your upper image and also header h1 to ensure that it will always remain at top of the lower image. (There is no necessity for z-index in this approach.)
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://www.cranfield.ac.uk/~/media/images-for-new-website/rio/ktp/clear-water-drops-pexels-400x400.ashx?h=400&w=400&la=en&hash=18C2E8C4D228436DBA9414C59FBDFF01268A6681");
background-repeat: no-repeat;
transform: skewY(-6deg);
transform-origin: top left;
z-index: 1;
}
section.main_image {
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a704f043-a0fb-4652-b8ee-6bc362dae5a9/d5j1z44-0c21f546-39eb-48f9-8230-0b4500c7b88f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MDRmMDQzLWEwZmItNDY1Mi1iOGVlLTZiYzM2MmRhZTVhOVwvZDVqMXo0NC0wYzIxZjU0Ni0zOWViLTQ4ZjktODIzMC0wYjQ1MDBjN2I4OGYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O_Xy26vERxse28DI8z2gwy-z0M9aBlGMXJSOwbi8_nM");
background-repeat: no-repeat;
margin-top: -77px;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: left;
margin: 35px;
}
header h1 {
position: relative;
color: white;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="HTMLPage2.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
<div class="header__bg"></div>
<h1>test</h1>
</header>
<section class="main_image">
<h1>Section Content</h1>
</section>
</body>
</html>
Transform with translateY:
Like the last one, you can add transform: translateY(some negative value); to your lower image to pull it up and z-index: 1; to your higher image. (z-index is necessary for this approach).
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://www.cranfield.ac.uk/~/media/images-for-new-website/rio/ktp/clear-water-drops-pexels-400x400.ashx?h=400&w=400&la=en&hash=18C2E8C4D228436DBA9414C59FBDFF01268A6681");
background-repeat: no-repeat;
transform: skewY(-6deg);
transform-origin: top left;
z-index: 1;
}
section.main_image {
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a704f043-a0fb-4652-b8ee-6bc362dae5a9/d5j1z44-0c21f546-39eb-48f9-8230-0b4500c7b88f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MDRmMDQzLWEwZmItNDY1Mi1iOGVlLTZiYzM2MmRhZTVhOVwvZDVqMXo0NC0wYzIxZjU0Ni0zOWViLTQ4ZjktODIzMC0wYjQ1MDBjN2I4OGYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O_Xy26vERxse28DI8z2gwy-z0M9aBlGMXJSOwbi8_nM");
background-repeat: no-repeat;
transform: translateY(-77px)
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: left;
margin: 35px;
}
header h1 {
position: relative;
color: white;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="HTMLPage2.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
<div class="header__bg"></div>
<h1>test</h1>
</header>
<section class="main_image">
<h1>Section Content</h1>
</section>
</body>
</html>
Giving transform skew to both images:
The last two approaches got a little con where the upper dimension of the lower image get behind the higher image to avoid that we can go into another approach, it is not so clean and tidy but it will do the work for us. For this cause, I modified your code a bit and you can see the results in the code snippet below:
body > div {
height: 560px;
}
body > div,
header,
section {
position: relative;
overflow: hidden;
}
header,
section {
height: 300px;
}
.header__bg,
.main_image {
position: absolute;
width: 100%;
background-repeat: no-repeat;
transform: skewY(-6deg);
transform-origin: top left;
}
.header__bg {
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: url("https://www.cranfield.ac.uk/~/media/images-for-new-website/rio/ktp/clear-water-drops-pexels-400x400.ashx?h=400&w=400&la=en&hash=18C2E8C4D228436DBA9414C59FBDFF01268A6681");
z-index: 1;
}
section.main_image {
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a704f043-a0fb-4652-b8ee-6bc362dae5a9/d5j1z44-0c21f546-39eb-48f9-8230-0b4500c7b88f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MDRmMDQzLWEwZmItNDY1Mi1iOGVlLTZiYzM2MmRhZTVhOVwvZDVqMXo0NC0wYzIxZjU0Ni0zOWViLTQ4ZjktODIzMC0wYjQ1MDBjN2I4OGYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O_Xy26vERxse28DI8z2gwy-z0M9aBlGMXJSOwbi8_nM");
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: left;
margin: 35px;
z-index: 1;
}
header h1 {
position: relative;
color: white;
}
section > h1 {
transform: skewY(6deg);
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="HTMLPage2.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<header>
<div class="header__bg"></div>
<h1>test</h1>
</header>
<section class="main_image">
<h1>Section Content</h1>
</section>
</div>
</body>
</html>
I am trying to make a parallax for the first time and am having troubles.
I'm following this tutorial and then trying to work backwards. The code isn't working however and I'm not sure where I made the mistake, I jumped around to a few other tutorials and tried to adjust the names of different divs and CSS blocks so the code is a bit messy right now.
.html {
height: 100%;
overflow: hidden;
}
.body {
max-width: 30px color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100% overflow-y: scroll;
overflow-x: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url(picture1.jpg);
background-size: cover;
transform-origin: center center 0;
transform: tranlasteZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
.image1 {
background: url('img/(picture1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schade's Parralax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<p>Hi My name is schade I wrote this so I could have a test of my program.</p>
<div class="image1"> </div>
</div>
</body>
</html>
In first use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect.
body,
html {
height: 100%;
}
h1 {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 75px;
}
.parallax {
background-image: url('https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
/* Parallax scrolling effect */
background-attachment: fixed; // Try to remove this property
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 300px;
line-height: 300px;
background: #ededed;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>content</h1>
</div>
<div class="parallax"></div>
</body>
</html>
Some mobile devices have a problem with background-attachment: fixed. You can use media queries to turn off the parallax effect:
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
More info about fixed property.
Right so I am relatively new to all this and took a six month break from doing anything at all, so my memory is pretty off anyhow but I've been trying for ages now to make it so that the link for the Navigation will fit inside the grey box (background image shows the box) but it won't change size no matter what I seem to try. It is probably something so simple that I've done wrong or missed but any help would be much appreciated
<!DOCTYPE html>
<head>
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Nova+Mono' rel='stylesheet' type='text/css'>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
position: fixed;
background: url('http://i.imgur.com/yFlnLhy.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
nav {
width: 100%;
height: 5%;
position: fixed;
top: 11%;
left: 0;
overflow: auto;
}
nav b {
font-family: 'Rock Salt', cursive;
font-size: 1.5em;
position: fixed;
}
nav a:link, a:visited {
display: block;
font-weight: bold;
color: #ffffff;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
font-size: 1em;
}
header {
width: 100%;
height: 9%;
position: fixed;
font-family: 'Nova Mono', ;
font-size: 200%;
}
</style>
<title>
Site Title Here
</title>
</head>
<body>
<header>
TITLE
</header>
<nav>
<b>Links:<b>
Home
</nav>
</body>
</html>
I'm all new to this and I have this site that I'm using to learn the basics. I'm just put together a simple parallax scrolling effect, where the header is scrolling and contains one H1 element.
I've been trying to figure out if it's possible to put some scrolling animation on the text so the text behaves similar to the images in this video from DevTips: https://www.youtube.com/watch?v=WTZpNAbz3jg&feature=player_detailpage
I did try to put some jQuery together to target the H1 and use same technique as shown in the video, but it didn't work. Maybe my code is all wrong because the test he does where the scroll position is printed out in the console did not show for me.
Here's the html and css code that I'm working with. Unfortunately I can't add screenshots since I'm new here and lacking points.
Thanks a bunch!
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parallax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="masthead">
<h1>Some Text</h1>
</div>
<div class="page"></div>
<script src="jquery-2.1.3.js"></script>
<script src="function.js"></script>
</body>
</html>
CSS
*, *::before, *::after {
box-sizing: border-box;
margin: 0px;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
body {
overflow-y: auto;
font-size: 120%;
perspective: 1px;
transform-style: preserve-3d;
}
h1 {
color: #fff;
font-size: 300%;
text-align: center;
padding-top: 200px;
}
.page {
padding: 20px 20%;
position: relative;
top: 60%;
background-color: #fff;
height: 900px;
}
.masthead {
position: absolute;
background: url("000017.jpg");
width: 100%;
height: 60%;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50%;
background-clip: border-box;
background-origin: padding-box;
background-size: cover;
transform: translateZ(-0.9px) scale(1.9);
z-index: -900;
top: -20%;
}
Your code seems to work very well!
Yet, the effect is not very apparent (but personally, I prefer discrete effects). Look at the snipppet in full page.
*, *::before, *::after {
box-sizing: border-box;
margin: 0px;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
body {
overflow-y: auto;
font-size: 120%;
perspective: 1px;
transform-style: preserve-3d;
}
h1 {
color: #fff;
font-size: 300%;
text-align: center;
padding-top: 200px;
}
.page {
padding: 20px 20%;
position: relative;
top: 60%;
background-color: #fff;
height: 900px;
}
.masthead {
position: absolute;
background: url("http://placehold.it/800x600/00ffff/66ffff&text=background") #55ffff;
width: 100%;
height: 60%;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50%;
background-clip: border-box;
background-origin: padding-box;
background-size: cover;
transform: translateZ(-0.9px) scale(1.9);
z-index: -900;
top: -20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parallax</title>
</head>
<body>
<div class="masthead">
<h1>Some Text</h1>
</div>
<div class="page"></div>
</body>
</html>