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>
Related
I am having trouble with getting a HTML website to display the way I want. I have made a banner and a nav bar, but I'm having a hard time when trying to add anything below the nav; it either covers the banner or gets covered by it.
This is the HTML:
<!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">
<title> Home: Old Barber </title>
</head>
<body id="body"><link rel="stylesheet" href="test.css">
<div id="wrapper">
<header id="header"> Welcome </header>
<div id="bannerHolder">
<div class="banner">
OLD BARBER
</div>
<nav id="nav">
Home
Products
About
</nav>
</div>
</div>
<div class="container">
<img src="https://www.open.edu/openlearn/ocw/pluginfile.php/1654608/mod_oucontent/oucontent/93155/8a822f73/b6b08556/mse_s6_figure_3.jpg" alt="Barber" class="img"></img>
<div class="overlay">
<div class="text">Shop</div>
</div>
</body>
</html>
Here is the CSS:
/* Imported fonts */
#import url('https://fonts.googleapis.com/css2?family=Merienda:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
#wrapper {
background: orange;
display: block;
margin: auto;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
#bannerHolder {
background: #aaa;
display: block;
height: 100px;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
height: 200%;
left: 0;
margin: auto;
position: relative;
right: 0;
text-align: center;
text-shadow: 2px 2px 4px black;
}
#body{
background-color: gray;
}
#nav{
background-color: orange;
color: black;
display: flex;
justify-content: space-around;
padding: 0.5%;
position: relative;
text-align: center;
}
#h1{
font-family: 'Italianno', cursive;
}
.container{
position: relative;
width: 50%;
}
.img{
display: block;
height: auto;
width: auto;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
opacity: 0;
transition: .5s ease;
background-color: orange;
}
.container:hover .overlay{
opacity: 1;
}
.text{
color: white;
font-size: larger;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Any help is greatly appreciated. Thanks.
EDIT: under is the result after removing the position: absolute; from the header. This, however, also alters the way in which I'd like the page to be displayed; which is that the banner, nav etc. is supposed to fill the page on the left, right and top.
The problem is that You have
<div id="wrapper"> and <div class="container"> below.
<div id="wrapper"> - has position: absolute as a style.
Position absolute https://developer.mozilla.org/en-US/docs/Web/CSS/position:
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is
not auto. The margins of absolutely positioned boxes do not collapse
with other margins.
That means that Your wrapper div, creates no space, so container div ignores its position.
Try to remove position: absolute from Your header.
Edit:
Sorry for late answer
#wrapper {
background: orange;
text-align: center;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
text-align: center;
text-shadow: 2px 2px 4px black;
}
body {
background-color: gray;
margin: 0;
padding: 0;
}
Edited CSS for header would look something like this. What I've done is I removed the height parameter of #bannerHolder. This height was defining the height of 100px for bannerHolder, however the height of the inside elements of bannerHolder was bigger, so there was an overlap. I also removed some unused CSS properties.
Also for banner to fill the whole space - the common pattern is to set padding: 0; margin: 0; for body tag. I often start my projects with this set-up:
html, body {
padding: 0;
margin: 0;
}
https://jsfiddle.net/oamx38y6/36/
I have a webpage with a header and content section. I styled the header to a gradient and to be in a trapezoid shape. I want to have an image (leaf.png) be in the middle of these two divs while floating in front of them. However, my header overrides the image for some reason. Here is a picture of what I want to have:
link
But this is what happens instead:
link
I don't know what is happening or how to fix it. I want the end result to look like the header at stripe.com.Here is my code right now:
<!doctype html>
<html>
<head>
<title>Document</title>
<style>
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: linear-gradient(blue, black);
transform: skewY(-6deg);
transform-origin: top left;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
}
header h1 {
position: relative;
color: white;
}
</style>
</head>
<body>
<header>
<img src="leaf.png" style="float:right" />
<div class="header__bg"></div>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>
</div>
</body>
</html>
Also, here is a picture of the leaf: https://ibb.co/dFqdw9
Please help. Thanks.
You can update the inline styles like so :
<header>
<div class="header__bg"></div>
<div>
<img src="leaf.png" style="right: 0; position: fixed; z-index: 2;" />
</div>
<h1>Header Content</h1>
</header>
Make these changes in the code:
<!doctype html>
<html>
<head>
<title>Document</title>
<style>
header {
position: relative;
height: 300px;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(blue, black);
transform: skewY(-6deg);
transform-origin: top left;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
}
img {
position: relative;
z-index: 2;
}
header h1 {
position: absolute;
color: white;
}
</style>
</head>
<body>
<header>
<img src="leaf.png" style="float:right"/>
<div class="header__bg"></div>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>
</body>
</html>
I want to put a picture right to left of my header div.
Failed to do it. Could you help me?
The Div is 80% width
and centered with "margin: 0 10%;"
HTML Code:
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div id="header">
</div>
</head>
CSS Code :
body {
background-color: darkgray;
background-image: url('../images/website.jpg');
background-repeat: repeat-x;
}
#logo {
position: fixed;
display: inline-block;
left: 0px;
top: 0px;
margin: 0 10%;
z-index: 2;
}
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height : 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
Right aligned to the outside of the red box header?
Could do something like this and change the left: -279px to the width of your logo
body {
background-color: darkgray;
background-image: url('../images/website.jpg');
background-repeat: repeat-x;
}
#logo {
position: absolute;
display: inline-block;
left: -279px;
top: 0px;
z-index: 2;
}
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height : 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Yakir Freed" />
</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.
I have added a texture background image in html body part and it is repeating the whole body section, but I want this texture will be repeat half of the browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
<style>
body{
background:url('bg.png');
}
</style>
</head>
<body>
</body>
</html>
reference image - what I want
Just use a pseudo-element on the body that is absolutely positioned.
It's 50% wide, 100% high and over 50%.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
position: relative;
}
body:before {
content: '';
position: absolute;
left: 50%;
height: 100%;
width: 50%;
background-image: url(http://lorempixel.com/image_output/abstract-q-c-25-25-1.jpg);
z-index: -1;
}
h1 {
text-align: center;
color: red;
margin: 0;
}
<h1>My Heading</h1>
Below is the solution
Demo
HTML:
<div id="background"></div>
<div id="wrap">content area</div>
CSS:
body {
background: url('bg.png');
}
#background {
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color:#fff;
z-index: 1;
}
#wrap {
position: relative;
z-index: 2;
padding: 30px;
text-align: center;
font-weight: bold;
}