I'm trying to expand the background image of the header to 100% of browser height but it doesn't work. The bg image is just a small bar although it is a big wallpaper, do you see my mistake?
<head>
<meta charset="UTF-8">
<title>TEXT</title>
<meta name="description" content="text">
<meta name="keywords" content="text" >
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<header>
<h1>TEXT <br> <span>TEXT</span></h1>
</header>
<section>
<article>
<p>TEXT</p>
<img src="images/spachtel1.jpg"><br>
<img src="images/spachtel1.jpg"><br><br>
</article>
</section>
<footer>
<h3>text<br>
</footer>
</body>
Here's the CSS file:
#font-face { /* ERSTENS LADE font family rein*/
font-family: 'alex_brushregular';
src: url('../css/alexbrush-regular-webfont.eot');
src: url('../css/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../css/alexbrush-regular-webfont.woff2') format('woff2'),
url('../css/alexbrush-regular-webfont.woff') format('woff'),
url('../css/alexbrush-regular-webfont.ttf') format('truetype'),
url('../css/alexbrush-regular-webfont.svg#alex_brushregular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
font-size: 1rem;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
h1 { /
font-family: 'alex_brushregular', 'sans-serif';
}
section p {
font-weight: 100;
font-size: 1.13rem;
font-style: italic;
}
span.by {
color: red;
}
section a {
color: #eda318;
text-decoration: none;
font-style: normal;
}
section a:hover {
text-decoration: underline;
}
header {
background-image: url('../images/bgheader1.jpg');
background-position: 50% 50%;
background-size: cover;
}
I think this is because your background image is set only to affect your header. Try making it affect your body.
Try adding the background image styling to the <BODY> tag instead of the <HEADER> tag like this:
body {
background-image: url('http://lorempixel.com/400/200/nature/');
background-position: 50% 50%;
background-size: cover;
}
I solved it:
I had to write
height: 100%;
to the header of the CSS file.
Related
I made a simple logo and when I tried to effect its border radius to make it a circle, however a problem occurred. It's edges became malformed where it didn't form a perfect circle and box shadows began to appear on the bottom and sides despite the fact I didn't implement them. If anyone could help me find a work around I would appreciate it.
Also I didn't include the CSS reset, so the positioning might be a bit off.
html {
font-size: 62.5%;
}
body {
}
/* Fonts */
#font-face {
font-family: "Apercu";
src: url(../fonts/Apercu\ Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family: "Aller";
src: url(../fonts/aller/Aller_Std_Rg.ttf) format("opentype");
font-weight: normal;
}
/* Navbar */
.navbar {
display: flex;
width: 100%;
height: 8rem;
background-color: #08b3a1;
background-size: 13px 10px;
background-image: linear-gradient(
45deg,
transparent 48%,
#fff5ee 48%,
#fff5ee 52%,
transparent 52%
);
align-items: center;
}
.logo-title-container {
display: flex;
gap: 1rem;
align-items: center;
box-shadow: none;
}
.logo {
margin-left: 2rem;
width: 4.4rem;
border-radius: 50%;
box-shadow: none;
border: none;
}
.header-left-title {
font-size: 3rem;
font-family: "Aller";
font-weight: normal;
color: rgb(228, 230, 229);
}
<!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="/styles/style.css"></link>
<title>Web Scraper 1.0</title>
</head>
<body>
<header class="navbar">
<div class="logo-title-container"><i><img class="logo" src="https://i.ibb.co/T0qwp4v/2-objects.png" alt="2-objects" border="0"></i>
<h1 class="header-left-title">Razor</h1>
</div>
</header>
</body>
</html>
This is because you are using a .png file with transparent borders. Remove the transparent edges and you will have a perfect circle
So I was able to solve the issue, for some reason the Lunacy editor automatically adds a transparent border to an image by default. I had to crop it with a built in VS Code Image editor to fix it.
Here are 2 images of my HTML work and CSS as well. I don't know what I'm doing wrong but the google fonts will not load. I've tried using a different browser but that didn't help either. The browser that I've been mainly using is Google Chrome and I've also tried out Safari. I've also tried using different fonts but that hasn't made any difference either. I've added the code down below.
:HTML Work
:CSS Work
Html Code:
<!DOCTYPE html>
<head>
<title>Ray's site</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans|Montserrat|Sacramento&display=swap" rel="stylesheet" type="text/css">
<link rel="icon" href="favicon.ico" />
</head>
<body>
<div class="topContainer">
<img class="top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>I'm Ray.</h1>
<p>a <span class="pro">pro</span>grammer.</p>
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middleContainer">
</div>
<div class="bottomContainer">
</div>
</body>
</html>
CSS:
body {
margin: 0;
text-align: center;
font-family: 'Merriweather Sans', ;
}
h1 {
margin-top: 0;
font-family: 'Sacramento', ;
}
h2 {
font-family: 'Montserrat', ;
}
h3 {
font-family: 'Montserrat', ;
}
.topContainer {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.middleContainer {
width: 200px;
height: 200px;
background-color: red;
}
.bottomContainer {
width: 200px;
height: 200px;
background-color: blue;
}
.pro {
text-decoration: underline;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
Remove the trailing commas after your font names and it'll work (not sure why it doesn't work anyway, but I tried your code with and without the trailing commas and the latter works):
body {
margin: 0;
text-align: center;
font-family: 'Merriweather Sans'; /* <- removed comma */
}
h1 {
margin-top: 0;
font-family: 'Sacramento'; /* <- removed comma */
}
h2 {
font-family: 'Montserrat'; /* <- removed comma */
}
h3 {
font-family: 'Montserrat'; /* <- removed comma */
}
Btw, I went to Google Fonts and they're giving you that code (with the trailing comma), which is likely a bug on their end - normally what's after that comma in the code Google Fonts give you to paste is a fallback generic font (like "sans-serif" or whatever) - you should use one of those too. But the code above will work for you.
The problem:
- Downloaded webfontkit from font squirrel
- added the fonts to a new css file with font family, src, font-weight, font-style
- tried to apply it to my header
- checked my web browser, font changed to a default font but not the custom font I wanted
Things i've tried
- reexamined my code a few times
- downloaded the webfontkit again with other formats .ttf and .svg
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first-->
<meta charset="utf-8" />
<meta name= "viewport" content="width=device-width, initial-scale=1" />
<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css" />
<link rel="stylesheet" href="css/styles.css" />
<!-- endbuild -->
<title>DEVEDAN: A Digital Marketing Agency</title>
</head>
<body>
<!--I hid the Navbar code because it was irrelevant-->
<!--WEBSITE CONTENT-->
<!-- Page content holder -->
<div class="page-content p-5" id="content">
<!-- Heading -->
<h2 class="display-4 text-white">DEVEDAN</h2>
<p class="lead text-white mb-0">Develop your business w/ Edson & Angelika</p>
<div class="separator"></div>
</div>
<!--I hid the jscode because it was irrelevant-->
</body>
</html>
fonts.css file
#font-face {
font-family: 'siffonOutline';
src: url('fonts/siffonoutline-webfont.eot');
src: url('fonts/siffonoutline-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/siffonoutline-webfont.woff2') format('woff2'),
url('fonts/siffonoutline-webfont.woff') format('woff'),
url('fonts/siffonoutline-webfont.ttf') format('truetype'),
url('fonts/siffonoutline-webfont.svg#sifonnbasic_outline') format('svg');
font-weight: normal;
font-style: normal;
}
styles.css file
/*Fonts*/
#import "fonts.css";
/*NAVBAR*/
.vertical-nav {
min-width: 17rem;
width: 17rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.page-content {
width: calc(100% - 17rem);
margin-left: 17rem;
transition: all 0.4s;
}
/*WEBSITE CONTENT*/
h2 {
font-family: 'siffonOutline';
}
body {
background: #599fd9;
background: -webkit-linear-gradient(to right, #599fd9, #c2e59c);
background: linear-gradient(to right, #599fd9, #c2e59c);
min-height: 100vh;
overflow-x: hidden;
}
.separator {
margin: 3rem 0;
border-bottom: 1px dashed #fff;
}
Click link to view the output of my code: https://i.stack.imgur.com/ePLCh.png]
check #import path is rite or wrong
#import "fonts.css";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Email Confirmation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/**
* Google webfonts. Recommended to include the .woff version for cross-client compatibility.
*/
#media screen {
#font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
#font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
}
}
/**
* Avoid browser level font resizing.
* 1. Windows Mobile
* 2. iOS / OSX
*/
body,
table,
td,
a {
-ms-text-size-adjust: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove extra space added to tables and cells in Outlook.
*/
table,
td {
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
}
/**
* Better fluid images in Internet Explorer.
*/
img {
-ms-interpolation-mode: bicubic;
}
/**
* Remove blue links for iOS devices.
*/
a[x-apple-data-detectors] {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-decoration: none !important;
}
/**
* Fix centering issues in Android 4.4.
*/
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
body {
width: 100% !important;
/*height: 100% !important;*/
padding: 0 !important;
margin: 0 !important;
}
/**
* Collapse table borders to avoid space between cells.
*/
table {
border-collapse: collapse !important;
}
/*a {
color: #1a82e2;
}*/
img {
height: auto;
line-height: 100%;
text-decoration: none;
border: 0;
outline: none;
}
/*a {
color: #1a82e2;
}
a[x-apple-data-detectors] {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-decoration: none !important;
}*/
.bg { /*<img src="https://i.ibb.co/DMKFzSt/back.png" alt="back" border="0">*/ /*<img src="https://i.ibb.co/6tsSrfm/back.png" alt="back" border="0">*/ background-image: url("https://i.ibb.co/6tsSrfm/back.png"); /* The image used */ /* Used if the image is unavailable */ /* You must set a specified height */ /*width:100%;*/ background-position: top; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; }
</style>
</head>
<body class="">
<!--bgcolor="#e9ecef"-->
<!-- start preheader -->
<div class="preheader" style="display: none; max-width: 0; max-height: 0; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; opacity: 0; ">
A preheader is the short summary text that follows the subject line when an email is viewed in the inbox.
</div>
<div class="container align-content-center">
<div class="bg align-content-center" style="width:750px; height:1000px; margin-left:auto;margin-right:auto;padding:50px; align-self:center;">
<h2 style="margin-top:400px;">
hi {fusername}
</h2>
<p style="font-size:16px; margin-bottom:80px;">Click the button below to confirm your e-mail adress.If you did not create an account with FlowNetMaster®, you can safely delete this e-mail.</p>
Confirm E-mail
<p style="margin-top:75px; margin-bottom:0;">If that does not work, please copy and paste the following link in your browser:</p>
<br />
<p style="margin-top:0; font-size:10px;">{femod}</p>
<p style="margin: 0;">Cheers,<br>Oxford Engineering & Software Team </p>
</div>
</div>
</body>
</html>
There is no problem on visualizing the confirmation e-mail on Apple and Android mail application but while reviewing the mail on gmail on the safari and chrome browser I can not see the background image.I hope you can give me an idea about why the background image does not shown in the e mail.
I apprecieate all you eforts ,thank you for your help.
Some mail clients blocks images, try to find some option to download it or try to use tag and place your content on this
I am working on the project where I set the div of the header to 100% and the main container is also 100%, but the right and left sides are to filled by the header. And the top is also not at the very top, but I managed to fix it by applying -ve margin, but don't want to do that for the left and right sides.
Please help me fix this, this is the CSS and HTML code:
#font-face{ font-family:'Junction';
src:url('junction/Junction-webfont.eot');
src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');
}
#main {
width: 100%;
padding: 0;
}
h1 {
font-size: 2em;
padding: 1.7%;
}
#header {
min-width: 100%;
background-color: #FF6978;
display: block;
font-family: Junction, "Times New Roman", sans-serif;
width: 100%;
margin-top: -1.6%;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<!--open main div-->
<div id="header">
<h1>Chekcking</h1>
</div>
<!--close header-->
</div>
<!--close main-->
</body>
</html>
Note: I used embedded font Junction, which is not online. And also, I don't want to increase the width to 120% and make the left margin -ve. Please suggest another way
Thank you so much,
Arthrax
You need to remove the default margins from the body and other elements. A 'universal' reset is a good option althouta proper Reset CSS is optimal
* {
margin:0;
padding:0;
}
#font-face{ font-family:'Junction';
src:url('junction/Junction-webfont.eot');
src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');
}
* {
margin:0;
padding:0;
}
#main {
width: 100%;
padding: 0;
}
h1 {
font-size: 2em;
padding: 1.7%;
}
#header {
min-width: 100%;
background-color: #FF6978;
display: block;
font-family: Junction, "Times New Roman", sans-serif;
width: 100%;
margin-top: -1.6%;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<!--open main div-->
<div id="header">
<h1>Chekcking</h1>
</div>
<!--close header-->
</div>
<!--close main-->
</body>
</html>
Try adding:
body {
margin: 0;
}
as show in this fiddle.
Most browsers apply a default margin of 8px to all sides of the <body>. Beyond that the margins of your <h1> are also causing your #header DIV to be pushed down. That margin will also cause a DIV below #header to be pushed down and add a "white" space between.
body,
#header h1 {
margin: 0;
}
Just add margin with a property value of 0 to body
#font-face{ font-family:'Junction';
src:url('junction/Junction-webfont.eot');
src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');
}
body {
margin: 0;
}
#main {
width: 100%;
padding: 0;
}
h1 {
font-size: 2em;
padding: 1.7%;
}
#header {
min-width: 100%;
background-color: #FF6978;
display: block;
font-family: Junction, "Times New Roman", sans-serif;
width: 100%;
margin-top: -1.6%;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<!--open main div-->
<div id="header">
<h1>Chekcking</h1>
</div>
<!--close header-->
</div>
<!--close main-->
</body>
</html>