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>
Related
I have used some code from stackoverflow oct 13 by Mark e Haas. The aim is to have two images side by side with a fig caption below them and for the images to respond to the screen size.
The image sizing is working inthe sense that te images stay on the screen as the size shrinks. The issue is with the I have tried amending various parameters but the caption always appears on the left of the image not below it. Before i start invetigating using a grid to place the image in is it possible to have the place itself below the Image preferably in the middle.
Code is below.
<style type="text/css">
<!-- css -->
#content { /* main display pane for all content */
float: left;
/* width: 595px; */
width: 75%;
min-height: 600px;
/* border: 1px solid #ccc; */
margin-left: 1px;
padding: 5px;
padding-bottom: 8px ;
background: #white;
}
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 10;
text-align: bottom;
}
img.make-it-fit {
max-width: 99%;
max-height: 10%;
float: left;
margin: auto;
}
img.make-right {
max-width: 99%;
max-height: 10%;
float: right;
margin: auto;
}
figure {
padding: 4px;
margin: auto;
}
figcaption {
font-style: italic;
text-align: bottom;
}
/Style
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/trsppic.css" />
</head>
<div id=content>
<!-- <div class='fill-screen'> -->
<figure>
<img class='make-it-fit' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' width=30%>
<figcaption>test</figcaption>
</figure>
<figure>
<img class='make-right' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' width=30%>
</figure>
</div</div>
</html>
Try this, i had modified a little bit the HTML but works fine.
.fig_box {
float: left;
width: 50%;
height: fit-content;
position: relative;
}
.make-it-fit {
width: 50%;
}
span.caption {
position: absolute;
top: 100%;
width: 50%;
left: 0;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/trsppic.css" />
</head>
<div id=content>
<!-- <div class='fill-screen'> -->
<div class="figure_content">
<div class="fig_box">
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' />
<span class="caption">test1</span>
</div>
<div class="fig_box">
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' />
<span class="caption">test2</span>
</div>
</div>
</html>
when I scroll down on my page, my container overlap the header, but I want my header to overlap the container, so I made my header on a fixed position, but it does not work
here is my html code:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="page">
<header class="leheader">
<div id="bloc1"></div>
<img src="https://i.imgur.com/dm6H7GV.png">
<div id="bloc2"></div>
</header>
<main class="container"></main>
</div>
</body>
</html>
and here is my css code:
body,
html,
.page {
background: #666666;
width: 99%;
height: 100%;
}
.leheader {
display: flex;
width: 99%;
position: fixed;
flex: 1 100%;
height: calc(100%-50px);
}
#bloc1 {
margin-left: 1px;
margin-top: 0.5px;
height: 50px;
width: 90px;
background: #cccccc;
border-radius: 10px 0 0 0;
}
#bloc2 {
background: #467491;
margin-top: 4px;
width: 93%;
height: 37px;
}
.container {
position: absolute;
top: 57px;
left: 9px;
background: #cccccc;
width: 99%;
height: calc(100% - 33px);
}
where is the problem ?
Try adding the z-index property to the header.
like this....
z-index: 2
In CSS to make something Fixed position you also need to give it a z-index (which is its position on z-axis). Read more about Z-Index here. Apart from it you also have to give it a position in terms of top, left, bottom and left to tell it where it has to fixed.
.leheader {
display: flex;
width: 99%;
position: fixed;
top:0;
left:0;
z-index:2;
flex: 1 100%;
height: calc(100%-50px);
}
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>
Don't work background-image in div with class nav-item. All images are in the same directory. Background in header works. And with img src everything is good. Where is the problem?
I tried everything.
header {
background: url('backSmall2.png');
height: 670px;
}
img {
width: 14%;
transform:skewY(-1deg);
margin-top: 40px;
margin-left: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transform: rotate(-3deg);
}
.nav-item {
width: 12%;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
}
.logo-contacts {
background-image: url('frame.png');
}
.contacts {
width: 100%;
height: 300px;
background-color: aqua;
}
<!DOCTYPE html>
<html>
<head>
<link href="normalize.css" rel='stylesheet'>
<link href="index-style.css" rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<script src="jquery-2.2.1.js"></script>
</head>
<body>
<header>
<img src="logo1.png">
<div class="nav-item"></div>
</header>
<a name="contacts">
<div class="contacts">
</div>
</a>
</body>
</html>
You should give your background-image some more information about position.
For example:
.nav-item {
width: 12%;
background-image: url('frame.png');
background-position: center; /* Added */
background-size: cover; /* Added */
background-repeat: no-repeat; /* Added */
margin-top: 80px;
margin-left: 140px;
}
Read more about the background property at Mozilla Developer Network.
The problem is that your div is empty - So - it has no height. Try adding height to the CSS class:
.nav-item {
width: 12%;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
height: XXXpx;
}
<!-- language: lang-css -->
header {
background: url('backSmall2.png');
height: 670px;
}
img {
width: 14%;
transform:skewY(-1deg);
margin-top: 40px;
margin-left: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transform: rotate(-3deg);
}
.nav-item {
width: 600px;
height:600px;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
}
.logo-contacts {
background-image: url('frame.png');
}
.contacts {
width: 100%;
height: 300px;
background-color: aqua;
}
<!DOCTYPE html>
<html>
<head>
<link href="normalize.css" rel='stylesheet'>
<link href="index-style.css" rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<script src="jquery-2.2.1.js"></script>
</head>
<body>
<header>
<img src="logo1.png">
<div class="nav-item"></div>
</header>
<a name="contacts">
<div class="contacts">
</div>
</a>
</body>
</html>
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