For the life of me I absolutely CANNOT figure out why my background image is not working. Any help to solve this would be GREATLY appreciated. In the CSS portion, you will find "Backg.jpg". For whatever reason, it refuses to show up even when put as a png, named differently, put in a different folder, or even put into the html (Background image for the body). It's currently structured into a folder called "img". If needed, I can provide screenshots to better show how the folders are. But I can near 95% guarantee folder structure isn't the issue unless i'm just missing something critical.
<!doctype html>
<html lang="">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="socialmediaicons">
<img src="img/fb.png">
<img src="img/twitter.png">
<img src="img/g+.png">
</div>
<h1>COMPUTER</h1>
<h3>Services for both home, and business</h3>
</div>
</div>
</body>
</html>
And
#import url(https://fonts.googleapis.com/css?family=Martel+Sans);
* {
padding: 0;
border: 0;
margin: 0;
font-family: 'Martel Sans', sans-serif;
}
body {
background-image: url(img/backg.jpg);
}
#wrapper {
background-color: #ffffff;
background-position-x: center;
background-position-y: top;
background-position: center top;
background-repeat: no-repeat;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#socialmediaicons {
width: 12%;
margin: 0 auto;
}
#socialmediaicons img {
width: 35px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
}
#header {
border: 2px solid red;
}
#header h1 {
text-align: center;
font-size: 120px;
padding-top: 25px;
letter-spacing: 5px;
}
#header h3 {
text-align: center;
padding-top: 10px;
font-size: 18px;
padding-bottom: 10px;
}
File structure can be found
here
URLs in CSS files are relative to the CSS file that contains them.
In other words, the file you're trying to load from your CSS is:
/css/img/backg.jpg
Change the url to either be absolute (the FQDN and path) or navigate relative to the CSS file:
url( ../img/backg.jpg );
Please remove background-color from #wrapper
#wrapper {
/*background-color: #ffffff;*/Remove or comment this line
}
#import url(https://fonts.googleapis.com/css?family=Martel+Sans);
* {
padding: 0;
border: 0;
margin: 0;
font-family: 'Martel Sans', sans-serif;
}
body {
background-image: url(https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-17.jpg);
}
#wrapper {
/*background-color: #ffffff;*/
background-position-x: center;
background-position-y: top;
background-position: center top;
background-repeat: no-repeat;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#socialmediaicons {
width: 12%;
margin: 0 auto;
}
#socialmediaicons img {
width: 35px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
}
#header {
border: 2px solid red;
}
#header h1 {
text-align: center;
font-size: 120px;
padding-top: 25px;
letter-spacing: 5px;
}
#header h3 {
text-align: center;
padding-top: 10px;
font-size: 18px;
padding-bottom: 10px;
}
<html lang="">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="socialmediaicons">
<img src="img/fb.png">
<img src="img/twitter.png">
<img src="img/g+.png">
</div>
<h1>COMPUTER</h1>
<h3>Services for both home, and business</h3>
</div>
</div>
</body>
</html>
Both Matt and Moishe have a point, so first check filenames and positions.
After that you'll notice that it still won't work because of your wrapper id:
#wrapper
it has 100% width/height and it's overlaying over your body with position: fixed and top:0; left:0.
If you remove that wrapper you'll notice that it's showing image correctly.
Could be a misspelling... try to add it manually in your <div> to see if it reads accordingly. ie: <img src="img/back.jpg"> Because you'll get intellisense aid, that should be the right route to copy and paste in your CSS.
Another try.. just convert your png file to jpg.... maybe is inheriting transparency or white background which melt with your body css... Let me know if helps.
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've hit a wall here...
I have a title that I want to align centrally on the page. I've done this by using #landingAreaContent {position: relative; margin: auto; text-align: center; background-color: blue;.
The title is wrapped in a div that is, in turn, sitting inside a full-screen div.
I then wanted to increase the title div's top margin to bring the title down. Simple, yes?
Except when I add in margin: 50px into the style for the div containing the title, the full-screen div moves down with it.
Even more annoyingly, when I try to do exactly the same thing with divs further down the page, everything works fine.
Why is this happening? See code and screen shots for context.
body {
margin: 0;
padding: 0;
}
#landingArea {
width: 100vw;
height: 100vh;
background-color: #6fc9ff;
}
#landingAreaContent {
position: relative;
margin: auto;
text-align: center;
background-color: blue;
}#belowFold {
width: 100%;
height: 100%;
background-color: white;
}
#belowFoldContent {
position: relative;
margin: auto;
margin-top: 50px;
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-family: 'Dancing Script', cursive;
font-size: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Becky's Pet Services</title>
<link rel="stylesheet" type="text/css" href="bps2CSS.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Raleway" rel="stylesheet">
</head>
<body>
<div id="landingArea">
<div id="landingAreaContent">
<img id="langingAreaLogo" src="">
<h1>Becky's Pet Services</h1>
</div>
</div>
<div id="belowFold">
<div id="belowFoldContent">
<h1>Welcome!</h1>
<p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
</div>
</body>
</html>
P.S. The garish colours are only there for visibility of the divs. :D
You have to force parent elements to contain their children (or their childrens' margins) in some cases:
#landingArea {
...
overflow: hidden; /* or auto */
}
html,
body {
margin: 0;
padding: 0;
}
#landingArea {
height: 100vh;
overflow: hidden;
background-color: #6fc9ff;
}
#landingAreaContent {
position: relative;
margin: auto;
text-align: center;
background-color: blue;
margin-top: 50px;
}
#belowFold {
width: 100%;
height: 100%;
background-color: white;
}
#belowFoldContent {
position: relative;
margin: auto;
margin-top: 50px;
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-family: 'Dancing Script', cursive;
font-size: 60px;
}
<div id="landingArea">
<div id="landingAreaContent">
<img id="langingAreaLogo" src="">
<h1>Becky's Pet Services</h1>
</div>
</div>
<div id="belowFold">
<div id="belowFoldContent">
<h1>Welcome!</h1>
<p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
</div>
I am using separate header.php and footer.php files which I include in the pages I want to place them in. now my header works well but my footer doesn't stick to bottom of page and when I tried to fix it by setting position: fixed; it takes in some portion of my content means covers some of content.
*{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #eeeeee;
}
.logo img {
background-image: url(../img/menu_bg.png);
width: 150px;
height: 38px;
padding-top: 5px;
}
.search_box {
color: #198C9E;
background-color: #198C9E;
position: absolute;
top: 6px;
margin-left: 155px;
}
.headerMenu{
background-color:#5DBEDE;
}
#wrapper {
background-color:#5DBEDE;
}
.footer {
position: absolute;
bottom: 0;
width:100%;
height: 80px;
background-color:#5DBEDE;
}
For test purposes, my footer.php is empty
<?php
include ( "./inc/connect.inc.php" ); ?>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="js/main.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
<div class="footer">
</div>
</body>
</html>
add padding-bottom: 80px; to content block, while position fixed.
If think globally, and content height more than screen height:
.content {
min-height: 100vh;
padding-bottom: 80px;
}
body {
position: relative;
}
.footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
height: 80px;
}
I found a very good way to put the footer at the bottom of the screen.
<div class="Content class">
content will go here.
</div>
<div class="footer">Footer</div>
The Stylesheet
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
Note: The main logic to add the footer at the end and add the style mentioned to it. For HTML and body add the style.
If you want the footer to stick to the bottom, no matter if the content is tall enough, you should use:
.footer{
position:fixed;
bottom:0;
width:100%;
height: 80px;
}
Since your footer has a fixed height, you can use for body:
body{
padding-bottom:80px
}
This way you make sure the content does not get cut of.
See example here https://jsfiddle.net/05zh0j6u/
my code is all jumbled up I believe. I have a ton of white space down at the bottom of my page and I don't know why. I've basically just been going with whatever works thus far but I also want my page to be responsive and it scales really weird atm. This is probably a really hard question to help with but if anyone can I would be super grateful. Any suggestions on what to do are extremely appreciated.
Heres the code:
http://jsbin.com/rugidepebe/1/edit?html,css,output
HTML
<!Doctype html>
<html>
<head>
<title>Application</title>
<link rel="stylesheet" type="text/css" href="standard.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="margin-right">
</div>
<div id="margin-left">
</div>
<div id="navbar">
</div>
<div id="contenthead">
<h1 id="AppHead">Application</h1>
</div>
<div id="appbike">
<h2>Walk/Bike</h2>
<img src="images/bike.png" id="bike"/>
</div>
<div id="appmotor">
<h2>Motor</h2>
<img src="images/car.png" id="car"/>
</div>
</body>
</html>
CSS
body {
margin: 0px;
}
#navbar {
position: fixed;
width: 100%;
height: 50px;
background-color: #0C4564;
z-index: 3;
}
#margin-right {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
right: 0;
z-index: 1;
}
#margin-left {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
z-index: 2;
}
#AppHead {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-size: 3.5em;
font-weight: 600;
color: #575757;
}
#contenthead {
display: inline-block;
width: 100%;
margin-top: 50px;
margin-bottom: 10px;
}
#appbike {
position: relative;
width: 15%;
height: 500px;
background-color: #53A78F;
text-align: center;
margin-left: 25%;
margin-top: 5%;
}
#bike {
width: 70%;
position: relative;
margin-top: 50%;
}
#appmotor {
position: relative;
bottom: 10;
float: right;
width: 15%;
height: 500px;
background-color: #53A78F;
bottom: 498px;
margin-right: 25%;
}
h2 {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 2 em;
}
#car {
width: 70%;
position: relative;
margin-top: 50%;
text-align: center;
margin-left: 15%;
}
You still have to treat the hmtl & body as wrappers sometimes, you're setting the height to 150%, of which it's parent height is auto so it is a bit confused. Just change your first rule to the following:
body, html {
margin: 0px;
padding:0;
height:100%;
}
Adding in height 100% should fix your issue, also added in padding:0; and the html doc to the css selector.
I can't get the img element to move to the left hand side. The left: 0px attribute isn't doing anything. In fact, I can't seem to move anything inside the #top div to move.
The img tag is inside top. I omitted rest of the webpage but I hope this is enough.
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="topBorder"> </div>
<div id="top">
<img src="logo.png" style="width:50%; height: 20%; left: 2em"/>
</div>
</body>
</html>
CSS code:
body {
max-width: 60em;
margin: auto;
position: relative;
}
div {
border: solid;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
#topBorder {
background-color:#255FAA;
height: .7em;
width: 100%;
border: transparent;
}
#top {
background-color: white;
border: transparent;
height: 13%;
width: 100%;
font-family: Georgia, Palatino Linotype;
}
#top img{
border: solid black;
position: relative;
left: 0px;
}
It looks like the text-align:center from your div element is the problem. Try overriding that in #top and I think it will start behaving as you expect. See this fiddle:
http://jsfiddle.net/3KyrW/
Your #top should have positive: relative, then your #top img should have position: absolute ... that will move the image around in your header.
I am not 100% sure about what how are trying to position. But adding a display: block; and a float: left; to #top img seems to float the image to the left. The left: 0px; is not needed when using position: relative; so I removed it. Also added a position: relative; to the #top <div>.
Also you seem to have inline styles in your <img> tag? That seems off.
<img src="logo.png" style="width:50%; height: 20%; left: 2em"/>
So I took that out & added it to the CSS as well. New <img> tag looks like this:
Revised CSS is here:
#top {
position: relative;
background-color: white;
border: transparent;
height: 13%;
width: 100%;
font-family: Georgia, Palatino Linotype;
}
#top img{
border: solid black;
position: relative;
display: block;
float: left;
width: 50%;
height: 20%;
left: 2em;
}