I'm having trouble adjusting an image (folk.jpg) so that it covers the background of my page, just underneath the navigation bar. I've tried adjusting the size, but it doesn't seem to want to do anything. I'm wondering if there's something in my CSS that's preventing me from adjusting the image. Here's the code:
body,
html {
height: 100%;
margin: 0;
}
.topnav {
overflow: hidden;
font-family: 'Lato', sans-serif;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav a {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 6px;
font-size: 17px;
border: none;
background-color: #D7D2D2;
}
.topnav .search-container button {
background: #5AA797;
margin-top: 6px;
color: white;
}
.banner {
background-position: center;
background-size: cover;
margin-top: -10px;
}
<link rel="stylesheet" href="://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<div class="topnav">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="search" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<a class="active" href="#about">ABOUT</a>
NEWS
EVENTS
CONTACT
</div>
<div class="banner">
<img class="imgheader" src="/Users/Desktop/folk.jpg" alt="folk band">
</div>
Considering you're probably going to want to have actual content underneath your header, rather than just the image, I'd recommend making use of the background-image CSS property rather than an <img> tag. This will make it so that content entered into .banner (or similar) will be able to sit on top of the background.
For this, you're looking for background-image: url(''). That, in combination with background-size: cover (which you already have on .banner), will give you the background image, but it will only take up a sliver of the height. As such, you'll need to specify the height, taking the navbar into consideration.
This can be done with the calc() function, subtracting the height of the navbar from 100%. In my snippet, this is 96px, though note that you don't actually specify a fixed height for the navbar. As such, you may want to make use of media queries to adjust this 'offset' at different resolutions.
Finally, you'll want to remove the margin-top: -10px from .banner so that it sits 'flush' up against your navbar.
All of this can be seen in the following:
body,
html {
height: 100%;
margin: 0;
}
.topnav {
overflow: hidden;
font-family: 'Lato', sans-serif;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav a {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 6px;
font-size: 17px;
border: none;
background-color: #D7D2D2;
}
.topnav .search-container button {
background: #5AA797;
margin-top: 6px;
color: white;
}
.banner {
background-image: url('http://placehold.it/100');
background-position: center;
background-size: cover;
height: calc(100% - 96px);
}
#media screen and (min-width: 768px) {
.banner {
height: calc(100% - 48px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="indyfolk.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<script src=""></script>
<title>Indy Folk News</title>
</head>
<body>
<div class="topnav">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="search" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<a class="active" href="#about">ABOUT</a>
NEWS
EVENTS
CONTACT
</div>
<div class="banner">
</div>
</body>
</html>
Also, as an aside, you have an erroneous </script> tag at the end of your Font Awesome reference :)
In your way, the image will display on the div you defined (banner). If you want to make it a background image, you just set your css:
html {
background: url(ImagePath) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
My link which would go to the home page is on the Egypt coat of arms. But the link is only clickable on the nav bar. How do I fix it? The first block is HTML and the second is CSS.-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
html
css
(HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="coatofarms"> <img src="coabetter.png" class="coa" width="75px"></div>
<div class="topnav">
News
Contact
About
</div>
<button type="button"class="buttonbook" >BOOK</button>
<div style="padding-left:16px">
<h2></h2>
<p></p>
</div>
</body>
</html>
(CSS)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("goodyegypt.png")
}
.coatofarms {
margin-top: -16px;
margin-left: 5px;
width: 5%;
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
margin-top: -151px;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.buttonbook {
background-color: #e9cda4;
border-radius: 50%;
width: 250px;
height: 100px;
border: none;
opacity: 0.7;
font-family: Algerian;
font-size: 30px;
margin-top: 35%;
margin-left: 43%;
align: center;
}
.buttonbook:hover {
background-color: #e1c295;
opacity: 0.7;
}
The use of margin-top as the only layout mechanism is what is causing you problems. In this fiddle I instead absolutely placed your button.buttonbook element.
https://jsfiddle.net/cwzp5dya/2/
.buttonbook {
position: absolute;
top: 55%;
left: 43%;
Highly recommend NOT using margin as your primary layout method.
If I want to change the background color of my text inside the parallax scrolling effect there's a white bar on top of it. I tried changing every color that I wrote down but it didn't disappeared. You can see the white bar here. Do I need to change a color in CSS or do I need to need to create a new div?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.parallax {
background-image: url("pexels-philippe-donn-1169754.jpg");
/* specific heigh */
min-height: 500px;
/*parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
</head>
<body>
<div class="header">
Space, Universe And Other Stuff
<div class="header-right">
<a class="active" href="#home">Home</a>
Chat
Personal Projects
Contact
About
</div>
</div>
<div class="parallax"></div>
<div style="height:700px;background-color:lightgrey;font-size:36px">
<div style="padding-left:20px">
<h1>Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
<div class="parallax"></div>
</body>
</html>
Default margin to h1 is causing the issue.
....
<div style="padding-left:20px">
<h1 style="margin-top:0px">Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
....
you should add a class instead of adding style attribute
It appears to be the <h1> tag's default margin sticking out the top. Try clearing the margin with
h1 {margin: 0;}
If you do need some gray space above the <h1> you could add padding instead.
Set margin: 0; on your h1 element.
* {
box-sizing: border-box;
}
h1 {
margin: 0;
}
.parallax {
background-image: url("https://i0.wp.com/www.fmxexpress.com/wp-content/uploads/2020/09/pexels-philippe-donn-1169754.jpg");
/* specific heigh */
min-height: 500px;
/*parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
Space, Universe And Other Stuff
<div class="header-right">
<a class="active" href="#home">Home</a>
Chat
Personal Projects
Contact
About
</div>
</div>
<div class="parallax"></div>
<div style="height:700px;background-color:lightgrey;font-size:36px">
<div style="padding-left:20px">
<h1>Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
<div class="parallax"></div>
</body>
</html>
I created a Login form using HTML, CSS and the background image has white space below the image.
However, when I change the size of the screen, it has white space below the image.
If you look at this picture, this is how it should look like:
Also here is the script for the background image as well as the site wrapping:
#import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
html, body {min-height: 100%;}
body {
font-family: sans-serif;
background-image: url(assets/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
overflow: hidden;
}
.container {
width: 380px;
margin:7% auto;
border-radius: 25px;
background-color: rgba(0,0,0,0.1);
box-shadow: 0 0 17px #333;
}
.header {
text-align: center;
padding-top: 75px;
}
.header h1 {
color: #333;
font-size: 45px;
margin-bottom: 80px;
}
.main {
text-align: center;
}
.main input, button {
width: 300px;
height: 40px;
border:none;
outline: none;
padding-left: 40px;
box-sizing: border-box;
font-size: 15px;
color: #333;
margin-bottom: 40px;
}
.main button {
padding-left: 0;
background-color: #83acf1;
letter-spacing: 1px;
font-weight: bold;
margin-bottom: 70px;
}
.main button:hover {
box-shadow: 2px 2px 5px #555;
background-color: #7799d4;
}
.main input:hover {
box-shadow: 2px 2px 5px #555;
background-color: #ddd;
}
.main span {
position: relative;
}
.main i {
position: absolute;
left: 15px;
color: #333;
font-size: 16px;
top: 2px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1><b>login</b></h1>
</div>
<div class="main">
<form #loginForm="ngForm" (ngSubmit)="login(loginForm)">
<div class="row" *ngIf="authError">
<div class="col-12 alert alert-danger">{{ authError?.message }}</div>
</div>
<span>
<i class="fas fa-user"></i>
<input ngModel #email="ngModel" placeholder="Email" name="email" type="email">
</span><br>
<span>
<i class="fas fa-lock"></i>
<input ngModel #password="ngModel" placeholder="Password" name="password" type="password">
</span><br>
<button type="submit">login</button>
<a style=" text-align:center; display:block;" href="/register">Click here to register</a>
</form>
</div>
</div>
</body>
</html>
This is my screenshot
Try putting the background-image in the .container div. and set the height to 100vh. Since its a login page and users does not need to scroll down. It should look like this:
.container{
background-image: url(assets/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
So I'm just having some fun with HTML and CSS, and I was trying to overlay some text over an image.
The way I was taught was to give the image a div all for itself, and set it as the background image. Then you could type right over it.
However, I want the background-image of the div to comply to some CSS I already wrote, telling the image to scale to the page's width.
Is there a way of applying CSS to the 's background image? Or should I choose another route?
Thanks in advance,
Rain
Code:
body {
background-color: #d0d0d5;
}
#pageWrapper {
margin-left: -10px;
margin-top: -15px;
margin-right: -200px;
background-color: #9b9a9d;
height: 1500px;
width: 100%;
}
#header {
font-family: Lato;
font-weight: bold;
background-color: #ffffff;
height: 70px;
width: 100%;
border-bottom: 2px solid #E8E8F0;
}
.links {
list-style-type: none;
font-size: 14px;
color: #000;
}
.linkLeft {
float: left;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-right: 20px;
color: #000;
text-transform: uppercase;
}
.linkRight {
float: right;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-left: 20px;
color: #000;
text-transform: uppercase;
}
#link5 {
padding-right: 40px;
}
#imageWrapper {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#jumbotron {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
background-image: url(img/Canadian-Rockies-Mountains.jpg);
}
<!DOCTYPE html>
<html lang=en>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="pageWrapper">
<div id="header">
<ul class="links"><li>Home</li>
<li>Browse</li>
<li>Help</li>
<li>Log In</li>
<li>Sign Up</li></ul>
</div> <!--header END-->
<div id="imageWrapper">
<!--<div id="imageText">
<h1>Discover the Canadian Rockies.</h1>
<p>Book a trip to Canada today, guy.</p>
</div>-->
<div id="jumbotron"></div>
<!--Original code used to place image before I wanted text overlay follows-->
<!--<img id="jumbotron"src="img/Canadian-Rockies-Mountains.jpg" />-->
</div>
</div> <!--pageWrapper END-->
</body>
</html>
Look here:
http://www.w3schools.com/css/css3_backgrounds.asp
http://www.w3schools.com/css/css_background.asp
These properties (like background-size) will be in relation to the div who has the background-image set. To make the div itself fill its parent, set width: 100% in the div's class
simple example to apply css for image inside div
CSS
.header-shadow{
background-image: url('../images/header-shade.jpg');
background-color:red;
height:50px;
}
JsFiddle
you can try something like this:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url("http://www.w3schools.com/cssref/paper.gif");
width: 100%;
}
</style>
</head>
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
</html>
If I'm reading your question properly, background-size: cover will force the image to expand the way you want. I've modified your code, is this the effect you're looking for?
body {
background-color: #d0d0d5;
}
#pageWrapper {
margin-left: -10px;
margin-top: -15px;
margin-right: -200px;
background-color: #9b9a9d;
height: 1500px;
width: 100%;
}
#header {
font-family: Lato;
font-weight: bold;
background-color: #ffffff;
height: 70px;
width: 100%;
border-bottom: 2px solid #E8E8F0;
}
.links {
list-style-type: none;
font-size: 14px;
color: #000;
}
.linkLeft {
float: left;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-right: 20px;
color: #000;
text-transform: uppercase;
}
.linkRight {
float: right;
display: inline-block;
line-height: 55px;
text-decoration: none;
padding-left: 20px;
color: #000;
text-transform: uppercase;
}
#link5 {
padding-right: 40px;
}
#imageWrapper {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
background-image: url(http://placekitten.com/g/200/300);
background-size: cover;
height: 200px;
}
<!DOCTYPE html>
<html lang=en>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="pageWrapper">
<div id="header">
<ul class="links"><li>Home</li>
<li>Browse</li>
<li>Help</li>
<li>Log In</li>
<li>Sign Up</li></ul>
</div> <!--header END-->
<div id="imageWrapper">
<div id="imageText">
<h1>Discover the Canadian Rockies.</h1>
<p>Book a trip to Canada today, guy.</p>
</div>
</div>
</div> <!--pageWrapper END-->
</body>
</html>
This is how you cover a complete screen and make it adapt to screen size.
html, body {
position:relative;
height: 100%;
background:url('yoururl')no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem I am having is I am trying to stop the text overflowing from the right, I have tried setting padding-right to try and address the issue but still no luck. How can I go around this?
Here is my html, css file.
.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/testing.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
/* Importing Nomralized CSS */
#import url('css/normalize/normalize.css');
</style>
</head>
<body>
<div id="container">
<div class="header"></div>
<div class="content-main-top" id="dpb">
<p class="para">
Our new website is currently under<br/> development. It won't take long, please
</p>
<span id="clr" class="size" style="margin-top: 60px;"><h1 style="margin-top: 4px; margin-bottom: 3px;">sit tight!</h1></span>
<p class="para" style="margin-bottom: 10px; color: #808285; margin-top: 30px; font-weight:">
Fill in your email address and we<br/>
will let you know when we launch.
</p>
<input type="email" class="bubble_email"><input type="submit" name="sub" value="Notify me!" class="button">
</div>
<div class="chairs" id="dpb"></div>
<!-- end of container -->
</div>
<!-- Begin Footer -->
<div id="footer">
<!-- Start Container -->
<div id="container">
<!-- Footer Content -->
<div class="content-main-bottom">
<p id="clear_footer">
<span style="color: #808285; font-weight: bolder; line-height: 30px; font-size: 17px;">Get in touch</span><br/>
<!-- Tweet Pic -->
<span class="para">Phone: </span><span style="color: #808285; font-weight: bolder">0845 130 8022</span><br/>
info#titanhealthcare.co.uk
</p>
<p style="font-weight: lighter; font-size: 13px; color: #939598">
© Titan Healthcare Limited 2014. All rights reserved.
</p>
</div>
<!-- End of content for footer -->
</div>
<!-- End of Container -->
</div>
<!-- End of footer -->
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
}
.para {
color: #7c7b7b;
font-size: 15px;
margin-bottom: 0px;
margin-top: 6px;
}
.para_b {
color: #808285;
}
/*Misc ID'S */
#clr {
color: #34a4b5;
}
/*Size class*/
.size {
font-size: 43px;
}
.button {
background-color:transparent;
outline: none;
border: 0px solid;
margin-left: 1px;
color: #34a4b5;
font-weight: bold;
}
a:link {
color: #34a4b5;
text-decoration: none;
}
#dpb {
display: inline-block;
float: left;
}
#clear_footer {
clear: both;
padding-top: 30px;
}
#container {
width: 980px;
margin: 0 auto;
}
#footer {
background-image: url('img/bottom_bar.jpg');
width: 100%;
height: 3px;
clear: both;
}
.content-main-bottom {
padding-bottom: 10%;
}
/* Images .classes */
.header {
background-image: url('img/titan_header.jpg');
background-repeat: no-repeat;
padding-top: 40px;
/*Size properties */
width: 980px;
height: 143px;
}
.bubble_email {
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 244px;
height: 49px;
/*Misc Prop*/
background-repeat: none;
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
.chairs {
background-image: url('img/titan_chairs.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 559px;
height: 400px;
margin-left: 50px;
margin-top: 40px;
}
.tweet {
background-image: url('img/tweet_button.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 368px;
height: 72px;
float: right;
}
Thank you
Okay so the issue here is that you need to understand that when you add padding-right:20; and the width is set to 244px then your input field then becomes 264px wide with a right padding of 20px, not 244px with a right padding of 20px as you would assume. So, to fix your issue you need to add a right padding of e.g. 10px and make the width of your input 234px.
Basically as long as your input width + padding-left + padding-right is equal to the width of your background image you will get the desired effect.
Solution (assuming your image is 250px wide):
.bubble_email {
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat;
height: 49px;
background-repeat: none;
border: none;
outline: none;
margin-top: 6px;
width: 238px;
padding: 0 6px;
}
Note the width being 238 + a padding of 6 on the left and 6 on the right = 250px.
Hope this helps.
Put the sppech bubble image in one class, like so:
.speechBubbleImage {
background-image: url('img/speech_bubble.jpg');
}
Then put the rest in another class, and change the width, like so:
.innerSpeechBubble
{
background-repeat: no-repeat; /*Size properties*/
width: 200px; /* This is what you change */
height: 49px; /*Misc Prop*/
background-repeat: none; /* This is redundant and I recommend don't use this */
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
Without the img/speech_bubble.img image, its hard to tell you what width to put.
Now use this in HTML, like so
<div class='.speechBubbleImage">
<input type="email" class="innerSpeechBubble">
</div>
<input type="submit" name="sub" value="Notify me!" class="button">
This should work. Let me know what you get. And give the image if possible, so that i can put the exact width.
.bubble_email
{
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat; /*Size properties*/
width: 244px;
height: 49px; /*Misc Prop*/
background-repeat: none;
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
You just decrease the width to 240 or less in .bubble_email
OR
Add padding-right: 15px; or more in .bubble_email
OR
Stretch the background image like,
background-size:260px 50px;
background-repeat:no-repeat;
Try to Use overflow hidden that may solve this problem.