I've been trying to include a background I've created in illustrator. The file has been exported as a PNG but when I try to link it in the code using background-image it won't work. I've tried linking it through the files and also uploading it onto a site where it can be retrieved from.
The box I'm wanting it to go into is the "bottom-item-about"
/*Main about flex container styling*/
.grid-items {
display: flex;
flex-flow: row wrap;
}
/*Styling of items inside main about flex container */
.grid-items > div {
width: 100px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
/*The left, right & bottom box main styling*/
.grid-item {
flex: 1 calc(50% - 20px);
padding: 0 50px 40px;
box-sizing: border-box;
min-height: 650px;
position: relative;
overflow: hidden;
flex-direction: column;
justify-content: center;
display: flex;
text-align: center;
}
/*Bottom about box styling*/
.grid-item-wide {
flex: 1 100%;
min-height: 575px;
padding-bottom: 20px;
}
/*Left about box colour*/
.left-item-about {
background-color: #F2D0A4;
}
/*Right about box colour*/
.right-item-about {
background-color: #545E75;
color: #fff;
}
/*Bottom about box colour*/
.bottom-item-about {
background-image: url(https://imgur.com/DWpaLxD);
/* or can use 'url(img/services-background.png)*/
background-color: #3F826D;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<title>Hector's Portfolio</title>
<!-- CSS style sheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Font link -->
<link href="https://fonts.googleapis.com/css?family=Cardo:400,700|Montserrat:400,500,800" rel="stylesheet">
<!-- Linking social icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- Scaling debending on device -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Body with class to style what is inside of it -->
<body class="layout-portfolio">
<div class="grid-item grid-item-wide bottom-item-about"> <!-- this container needs the background -->
<!-- Services text container -->
<div class="grid-item grid-item-service-wide">
<!-- Services Title -->
<h3 class="case-item-header">Services</h3>
</div>
<!-- Services icons/info section -->
<div id="about" class="content-wrapper gridItems-peak grid-items">
<!-- Two child elements inside flex container -->
<!-- Left side icons/info -->
<div class="grid-item-services left-item-services">
</div>
<!-- Right side icons/info -->
<div class="grid-item-services right-item-services">
</div>
</div>
</body>
</html>
Just change the background image path from https://imgur.com/DWpaLxD to https://i.imgur.com/DWpaLxD.jpg for bottom-item-about class.
/*Styling of items inside main about flex container */
.grid-items > div {
width: 100px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
/*The left, right & bottom box main styling*/
.grid-item {
flex: 1 calc(50% - 20px);
padding: 0 50px 40px;
box-sizing: border-box;
min-height: 650px;
position: relative;
overflow: hidden;
flex-direction: column;
justify-content: center;
display: flex;
text-align: center;
}
/*Bottom about box styling*/
.grid-item-wide {
flex: 1 100%;
min-height: 575px;
padding-bottom: 20px;
}
/*Left about box colour*/
.left-item-about {
background-color: #F2D0A4;
}
/*Right about box colour*/
.right-item-about {
background-color: #545E75;
color: #fff;
}
/*Bottom about box colour*/
.bottom-item-about {
background-image: url(https://i.imgur.com/DWpaLxD.jpg);
/* or can use 'url(img/services-background.png)*/
background-color: #3F826D;
color: #fff;
}
<div class="grid-item grid-item-wide bottom-item-about">
<div class="grid-item grid-item-service-wide">
<h3 class="case-item-header">Services</h3>
</div>
<div id="about" class="content-wrapper gridItems-peak grid-items">
<div class="grid-item-services left-item-services">
</div>
<div class="grid-item-services right-item-services">
</div>
</div>
</div>
.bottom-item-about {
background:url(../img/services-background.png) left top #3F826D;
color: #fff;
}
try using ../ this path its not fetching may be because you placed image in /img and your css is in /css
/*Bottom about box colour*/
.bottom-item-about {
background-image: url(https://imgur.com/DWpaLxD);
/* or can use 'url(img/services-background.png)*/
background-color: #3F826D;
color: #fff;
}
replace this line:
`background-image: url(https://imgur.com/DWpaLxD);`
with this:
`background-image: url(https://i.imgur.com/DWpaLxD.jpg);`
this is your uploaded image real url. ending with image extention (.jpg, .png, .gif, ...)
or your local file url and it should work
Related
I'm laying out the layout Figma Layout. This page has a background image and additional
Background
Additional - logo
and a hamburger
There is html code of the page
:root {
--my-screenwidth: 1366px;
--my-screenheight: 768px;
--layout-screenwidth: 1441px;
--layout-screenheight: 811px;
}
._container {
--layout-containerwidth: 1111px;
--layout-containerheight: 43px;
max-width: calc((var(--layout-containerwidth)/var(--layout-screenwidth))*var(--my-screenwidth));
margin: 0px auto;
box-sizing: content-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Webovio</title>
</head>
<body>
<div class="wrapper">
<main class="page">
<div class="page__main-block main-block">
<div class="main-block__container _container">
<div class="margin-block__header">
<div class="main-block__nav">
<!--
<img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
<img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
-->
<!--<div class="main-block__header_image_1">-->
<img src="https://i.stack.imgur.com/oB0ua.png" class="main-block__logo_name" alt="logoname">
<!--</div>-->
<!--<div class="main-block__header_image_2"></div>-->
<img src="https://i.stack.imgur.com/hO056.png" class="main-block__logo_hamburger_icon" alt="menulogo">
<!--</div>-->
</div>
</div>
<div class="main-block__body">
<div class="main-block__smalltitle">A place where</div>
<div class="main-block__title">A creative agency for redemptive brands</div>
<!--
<div class="main-block__text">
Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
</div>
-->
<div class="main-block__items">
<!--Get in touch link-->
</div>
</div>
</div>
<div class="main-block__image _ibg">
<img src="https://i.stack.imgur.com/Tju6g.png" alt="cover">
</div>
</div>
</main>
</div>
</body>
</html>
The css contains the dimensions of the header containing the logo and the hamburger. Here is the max-width: calc((var(--layout-containerwidth)/var(--layout-screenwidth))*var(--my-screenwidth)); which calculates the maximum width of the header given the width values my screen and the layout screen, as well as the width of the header on the layout, taken from the figma layout (the header consists of a logo and a hamburger).
Tell me how to layout the layout so that so that the logo and the hamburger in the header take their places on the background image, and so that the text (headings A place where and A creative agency for redemptive brands) becomes left horizontally and in the middle vertically of the image, and also to be able to proportionally scale the background image as in Proportional scaling tools. It should be like on Layout from Figma. I tried to style but couldn't get the text, logo and hamburger on the background image.
P.S. Exact indents are not needed. Tell me how to layout so that the background image has the content of the page, including text, logo and hamburger.
Section is set to be height: 100vh; width: 100vw and then display: grid.
The background image will always fill it's container and you can control the image cropping by adding style="--imgPosition: <X> <Y>", which is just laying out to object-position so you can check MDN for potential values.
Content in the main block is using display: grid as well and all set to occupy the same space. The links have an explicit z-index set so they will be above the content. The content will always be vertically centered unless it has more content than screen height, at which point padding: 6rem 0 will add 6rem above and below the section
*, *::before, *::after { box-sizing: border-box } body { color: white; font: 16px "Poppins", sans-serif; margin: 0 }
section.custom {
display: grid;
height: 100vh; width: 100vw;
place-items: center;
}
section.custom > * {
grid-area: 1/1/-1/-1;
height: 100%; width: 100%;
}
section.custom .back { position: relative }
section.custom .back > * {
display: block;
height: 100%; width: 100%;
object-fit: cover;
object-position: var(--imgPosition, center center);
position: absolute;
}
section.custom .fore {
display: grid;
gap: 1rem;
max-width: 1200px;
padding: 1rem;
place-items: center;
z-index: 1;
}
section.custom .fore > * { grid-area: 1/1/-1/-1 }
section.custom .fore .navLink { align-self: start; z-index: 1 }
section.custom .fore #logo { justify-self: start }
section.custom .fore #menuToggle { justify-self: end }
section.custom .fore .block { padding: 6rem 0; width: 100% }
<link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
<section class="custom">
<div class="back" style="--imgPosition: top left"><img src="https://i.stack.imgur.com/Tju6g.png"></div>
<div class="fore">
<a class="navLink" id="logo" href="#"><img src="https://i.stack.imgur.com/oB0ua.png"></a>
<a class="navLink" id="menuToggle" href="#"><img src="https://i.stack.imgur.com/hO056.png"></a>
<div class="block">
<p>A place where</p>
<h1>A creative agency for redemptive brands</h1>
<p>Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.</p>
</div>
</div>
</section>
I think the issue has SOMETHING to do with the sidebar I'm using, as the tags in question are only showing as incorrect on pages where I have the sidebar. Here is an example of a page where </div>, </body> and </html> tags are shown as incorrect (lines 17, 22, and 23):
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Portfolio Home - Odd Merit</title>
</head>
<body>
<!-- The sidebar -->
<div class="sidenav">
<a href="secretpracticepage.html">
<img src="images/portfolioenter.png"
height=100%
width=100%>
News
Contact
About
</div> <!-- this shows as incorrect -->
<!-- end of sidebar section -->
<div class="main">
<p>Work in Progress...</p>
</div>
</body> <!-- this shows as incorrect -->
</html> <!-- this shows as incorrect -->
The div class "sidenav" is a side navigation bar, and the div class "main" is the container where the typical website content shows up. The "incorrect" </div> tag only shows up when ending the sidenav, but removing it puts all content into the sidenav. Everything seems to nest normally when I collapse each section. </body> and </html> also only show as incorrect when the sidebar code is included -- they revert to correct when that section is removed.
Here is the CSS which includes rules for the sidebar, in case that affects the tags:
body {
font-family: 'Trebuchet MS', sans-serif;
text-align: center;
margin: 0 auto;
max-width: 100%;
color: rebeccapurple;
font-size: 12pt
}
img {
object-fit: contain;
}
ul {
color:black;
list-style-type: none;
}
/* The sidebar menu */
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: aquamarine;
overflow-x: hidden;
padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: rebeccapurple;
display: block;
}
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
#main {
background-color:white;
border-left: 1px solid;
border-color:#AAA0B3;
height:auto;
padding: 1px 16px;
padding-left: 300px;
padding-right: 200px;
height: 1000px;
height: 100%;
}
Any help checking my work is much appreciated!
You are not closing the first <a> tag, it should be
<a href="secretpracticepage.html">
<img src="images/portfolioenter.png"
height=100%
width=100%>
</a>
News
Contact
About
I'm trying to make a layout like on the picture but I'm struggling with canvas positioning. How can I put h1 forward?
Also, whats better for the black and white skewed rectangles? To do them with CSS or another Canvas on top of the first one?
Also I would appreciate some advice on responsiveness of this layout.
body {
font-family: 'Roboto', sans-serif;
background-color: #181818;
padding:0;
margin:0;
}
p{
color: #f0f0f0;
}
h1 {
text-align: center;
text-align: left;
font-size: 10em;
}
h2 {
text-align: center;
margin: 40px 0px;
color: #f0f0f0;
}
td{
width: 50%;
text-align: center;
}
canvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
z-index: 0;
}
.homepage .portfolioPage{
position: absolute;
z-index: 1;
}
/* .mainWrapper {
position: relative;
} */
.mainPage{
margin-top: 50px;
display: inline-block;
align-content: center;
}
.rightbox{
padding: 0 40%;
width: 600px
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#700&family=Roboto&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title> </title>
</head>
<body>
<div class="mainWrapper">
<canvas id="#particles-js" width="1000" height="500"></canvas>
<!-- Homepage -->
<div class='homepage'>
<table style="width:100%">
<tr>
<!-- Left Side -->
<td>
<div class='mainPage'>
<div class="blk-box">
<div class="block">
<h1>Barqawi</h1>
</div>
<div class="block">
<h1>Maroun</h1>
</div>
<div class="block">
<h1>Grey</h1>
</div>
</div>
</div>
</td>
<!-- Right Side -->
<td>
<div class='mainPage'>
<div class="rightbox">
<p id="jrdev">Jr Software Developer</p>
<div class="portfolioBtn">
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
I figured out. Just in case someone need it, here is the code.
canvas {
width:100%; height:50%;
top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
position: absolute;
z-index: -1;
}
.mainWrapper {
position: relative;
}
.homepage {
position: relative;
}
The tag
<h1>
is normally reserved for SEO keywords. Anyway, you can do the following:
.block { transform: skewX(-10deg);}
If you don't want the text to be skewed along, you should define another element outside to contain the text and then use negative margin or absolute positioning to fix the position of the text.
As for mobile reponsiveness, I would advise converting all absolute lengths to relative lengths, eg. 100%, 100vh, 100vw etc.
You can also use media queries to specify separate layouts for portrait and landscape orientations:
#media only screen and (orientation: portrait) {
body {
...
}
...
}
#media only screen and (orientation: landscape) {
body {
...
}
...
}
I tried to center "Travel Blog;View Project" with the image, so the text is in the middle of the image on the left side. Not overlapping
I tried using flexbox grid, but i dont have any clue what to do now
the html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Fabian Gmeindl</title>
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
<body>
<header id="showcase">
<div class="Top-Page">
<h1>HEY,</h1>
<h2>I'm Fabian Gmeindl</h2>
<p>Skier, Writer, Entrepreneur</p>
</div>
</header>
<div id="project-home">
<!-- Top Page -->
<!-- Page Projects -->
<div class="rtro-area" class="wrapper">
<h2>Travel Blog</h2>
View Project
</div>
<img class="img-rtro" class="wrapper" src="Resources/rtro-toppage.png" alt="Rtro Blog Top Page">
<footer id="main footer">
<p>Copyright © 2019 Fabian Gmeindl</p>
</footer>
</div>
</body>
</html>
the css
*{
margin: 0;
padding: 0;
border:0;
}
h1{
color:#56A1B1;
font-size: 100px;
font-weight: bold;
}
#showcase h2{
color:white;
font-size: 80px;
text-transform: uppercase;
}
p{
color:white;
}
.Top-Page{
padding-left: 8%;
}
body{
background-color: #f4f4f4;
line-height: 1;
}
#showcase{
background-image: url('../Resources/Portrait.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display:flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
/* Project Home Page */
.img-rtro{
width: 1300px;
float: right;
margin-left: 20%;
}
#project-home{
background-image: url('../Resources/background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display:flex;
flex-direction: column;
justify-content: center;
}
When I scroll down to the second section, where the problem is, it looks like this
https://imgur.com/mt2HStK
You can align the "Travel Blog;View Project" part if you add align-items: center to the flexcontainer's CSS. (align-items — controls alignment of all items on the cross axis.) You have to center on the cross axis, as you are using "flex-direction: column".
For aligning elements with flexbox in general, I can recommend this article: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
I am trying to build a layout of buttons. I have worked at it for a while now, but I doubt my code would be helpful in understanding my problem. I have included the specs of the buttons on the image below. If you guys could show me how to make this layout it would be greatly appreciated.
Start with creating container and appropriate divs inside.
<div class="container">
<div class="blue"></div>
<div class="center">
<div class="red"></div>
<div class="yellow"></div>
</div>
<div class="green"></div>
</div>
then you have to position them and set particular width.
body, html { height: 100%; }
.container { height: 100%; }
.container > div { float: left; }
.center { height: 100%; width: 33%; }
.blue { background: blue; width: 33%; min-height: 100%; }
.red { background: red; height: 50% }
.yellow { background: yellow; height: 50% }
.green { background: green; width: 33%; height: 100% }
you can alternativly use flex box to get rid of float: left
.container { height: 100%; display: flex; }
Demo: http://jsfiddle.net/eLq0770h/
The way I would approach this is to make three DIV's side by side to make the three columns of your design. (the blue column, the red-and-yellow collumn and the green collumn)
You can then use two more DIV's to split the middle column in to two rows.
Your code would then be structured as follows
<div id="site">
<div id="leftcolumn">
CONTENT
</div>
<div id="middlecolumn">
<div id="middletop">
CONTENT
</div>
<div id="middlebottom">
CONTENT
</div>
</div>
<div id="rightcolumn">
CONTENT
</div>
</div>
You can then use CSS to set the widths and heights of these DIV's.
I don't know if this is the right way to do this, but this is how I do it.
Your code looks great. Here's how I would approach the project http://codepen.io/dfrierson2/pen/RNoWZe.
First I set the wrapper to 100% width then i centered the container with margin: 0 auto; I add a width to the container of 600px and set the height to auto and gave it a css selector class of overflow: hidden so that the container will expand with the content of the divs. I would use Bootstrap as a frame work because it is a responsive frame work with great starter code.
http://getbootstrap.com/getting-started/#template
It also has great pre style navs and buttons http://getbootstrap.com/components/#btn-groups
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.wrapper {
width: 100%;
height: auto;
}
.container {
margin: 0 auto;
border: 1px solid red;
overflow: hidden;
width: 600px;
height: auto;
background: yellow;
}
.col-md-4 {
border: 1px solid green;
float: left;
width: 198px;
height: 700px;
}
.blue {
background: blue;
}
.red {
background: red;
height: 350px;
}
.green {
background: green;
}
.one {
border: 1px solid black;
height: 350px;
}
.two {
border: 1px solid black;
height: 350px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 blue">33%</div>
<div class="col-md-4 red">33%</div>
<div class="col-md-4 green">
<div class="col-md-6 one">50%</div>
<div class="col-md-6 two">50%</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>