My hero image isn't appearing, but the text is. All my files are in the same folder and I'm using the relative path VS Code gave me.
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am Matthew Moyes</h1>
<h3>And I'm a Motivational Speaker</h3>
<button>BOOK ME</button>
</div>
</div>
<h3>Page content..</h3>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>
</body>
</html>
This is the CSS:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background: url("/city.jpg");
background-color:#cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
h3 {
text-align:center;
}
p {
text-align:center;
}
The part I'm having issues with is the .hero-image tag.
I tried putting it in another folder and making a new path as well as re-downloading the image. I also added and removed dots and slashes in the code.
Remove slash from your path like this:
background: url("city.jpg");
And not like this:
background: url("/city.jpg");
Related
No matter what I do, I cannot get my image in the .container div to show up properly when formatting with CSS. Only the top ~10% of the image is showing. If I put the img tag in HTML it will work perfectly. But I want to format in CSS, not HTML, and in such away that it is mobile-first compatible. What I want is for the image to be centered and larger than it's currently displaying. Here is my HTML:
<!DOCTYPE html>
<html lang="en-US">
<link rel="stylesheet" type="text/css" href="RABstyle.css">
<title>Home</title>
<meta charset = "UTF-8">
<meta name="author" content="Beth Bennett">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>
<div class="icons"><p>Icons</p></div>
<ul class = "buttons">
<button id="LogIn" type="button">Log In</button>
<button id="SignUp" type="button">Sign Up</button>
</ul>
</header>
<div class="container">
<h2 class="intro">America's source for....</h2>
<ul class="selector">
<li class="active">Ds</li>
<li>Cs</li>
<li>Or</li>
</ul>
</div>
</body>
</html>
And here is my CSS:
* {
box-sizing: border-box;
margin: 0px;
padding:0px;
font-family: Calibri, Helvetica, sans-serif;
}
body {
background-color:#ffffE0;
}
header {
background-color: #AA0000;
height: 75px;
padding: 15px;
}
.icons{
float: left;
margin-left: 100px;
}
.buttons {
text-align: right;
margin-right: 300px;
}
.container {
background: url("HomePageImageFinal.svg") no-repeat;
background-position: center top;
background-size: 1500px 1000px;
}
Add px - it doesn't have any measurement unit now - or 100% to your width and height attributes (depending on your needs)
I added a background-size:cover to your code and it worked, with another image, because you didn't provide the SVG:
.container {
background: url("http://lorempixel.com/200/200/") no-repeat;
background-size:cover;
background-position: center top;
height: 2000px;
width: 2000px;
}
Here's the fiddle
You can try
background-size: 100% 100%; or
background-size: contain; or
background-size: cover;
depending on what you are trying to achieve.
Also, if you have floats inside your container than you need to clear these. The container won't have any height with floating elements inside. Unless you specify a fixed height of course.
I'm currently making my personal website and I struggling when it comes to images and smaller screens. I basically want to position a portrait image of me in the middle of the screen above the header text and make it stay there when using a smaller screen size. I've tried position: relative and similar solutions but I just can't get it to work.
I basically want to position it above the header text and make it automatically scale when using different screen sizes. I also want it to have a fixed width and height.
Here's the code:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Oskar Yildiz</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="main.css"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="wrapper">
<div id="bg" class="background-div">
</div>
<div id="header" class="container">
<div class="row">
<div class="col-xs-12">
<img class="img-circle" src="files/portraitcrop.jpg" />
<h1 id="main-title" class="page-title">Oskar Yildiz</h1>
<h2 class="page-description" style="font-style: normal;">
Welcome
</h2>
<h2 class="page-description">
Young tech enthusiant, web developer and content creator.
</h2>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#main-title").fadeIn();
</script>
CSS:
body {
margin: 0;
padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
/*background-image: url("./files/bg.jpg");*/
}
.background-div {
background-image: url("./files/background.jpg");
width: 100%;
min-height: 100%;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
left: 0;
display: table;
background-position: center;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
#header {
display: table;
position: relative;
}
.page-title {
text-align: center;
text-transform: uppercase;
color: white;
margin-top: 330px;
font-size: 2em;
margin-bottom: 0px;
}
#header h2 {
margin: 0;
}
.page-description {
text-align: center;
color: white;
padding-top: 8px;
font-style: italic;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 150%;
}
.portrait {
}
img {
padding: 0;
margin: 0;
min-height: 30%;
min-width: 30%;
}
.oskar {
width:100%;
height:100%;
background-size: cover;
display: table;
background: #222 no-repeat center center;
background-color: #222;
background-image: url("./files/bg.jpg");
}
You can use the class img-responsive on your images. So, for instance
<img class="img-responsive" src="path to image" alt="image of me"/>
however in the comments you mentioned you don't want it to take up the entire screen from left to right, so a solution to fix that issue is to use the already included, grid system.
lets say you wanted the image to take up 50% of the page on all devices. You would use code like this.
<div class="col-xs-6 col-xs-offset-3">
<img class="img-responsive" src="path to image" alt="image of me"/>
</div>
What this code does is simple, it makes a div that on extra small (xs) devices is 6 columns. 6 columns is half of the grid since the grid consists of 12 columns, and is thus 50% when you use 6 columns. Then we added the offset class to xs that pushes the content over 3 columns to the right, which centers the image and makes it so that the other 50% of the page is in the spacing 25% on the left, and 25% on the right.
Using the grid system as I have done here will let you control the spacing around the image, but having a fixed width and height is not possible to accomplish what you want.
I hope this helps you with your issue, if you need any more assistance, i'll be here to help. :)
I've checked everywhere that I can think of, no luck. I have a page I'm trying to make responsive. Pretty much one div on top of the other with a css background image inside. When I change the browser window size the image seems to scale pretty well but the div height doesn't so you can see the background of the div. I need the div height to change in proportion to the image size. I'm trying to use CSS only without javascript since I'm brand new to web design. Any help would be great.
Here is the code I've got.
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The Home Page</title>
<meta name="description" content="The best toy out there">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--<h1> Body Text</h1>-->
<div id ="top_pic">
<hgroup> </hgroup>
<h1> top_pic; SOME TEXT WILL GO HERE</h1>
<!-- A logo image will also be placed on top of background image in this div probably in the hgroup -->
</div>
<div id = "middle_pose">
<h1 class = "midposetext"> MIDDLE pose div, some text goes hereAAA</h1>
</div>
<div id = "content">
<h1> Content div...some text goes here</h1>
</div>
<div class = "footer">
<h1> Footer div</h1>
</div>
</body>
</html>
The CSS:
body {
background-color : #e8e821;
width: 85%;
height: 100%;
margin: 0 auto;
border: dotted black;
position: relative;
padding: 1%;
}
#top_pic {
background-image: url('images/eyeforheader1.jpg');
background-size: cover;
background-repeat: no-repeat;
border: solid #3fa85f;
margin: 0 0 20% 0;
width: 100%;
height: 100%;
display: block;
}
#middle_pose {
/*background-image: url('images/girl on back grasping sheets brunette.png');*/
background-image: url('images/Screen Shot 2014-02-10 at 11.47.48 PM.png');
background-size: 100%;
background-repeat: no-repeat;
background-color: #7547dd;
width: 100%;
height: 450px;
border: solid #f05858;
margin: auto;
}
#content {
background-image: url('images/Screen Shot 2014-05-28 at 5.52.03 PM.png');
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 500px;
border: solid orange;
}
.midposetext { color: #de4b8f;
}
#middle_pose h1{
color: yellow;
z-index: 10;
font-size; 1.4em;
}
In your CSS file, you can change the #middle_pose background-size property:
from:
background-size:100%;
to:
background-size:cover;
This will scale the background image to be as large as possible so that the container's background is covered. However, this may force portions of the image to be out of the viewable area (at certain dimensions). In this case, you may find that you want to use media-queries to adjust the container's dimensions and/or swap the image for one with more appropriate dimensions/aspect-ratio.
Hope this helps :)
I am trying to get this div to be all the way to the right side of the screen. here is the html:
<html>
<head>
title></title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<h1> </h1>
<body>
<div id="bannerR">
<a href="yahoo.com" target=_blank>
<img src="yahoo.com" border=0></a>
</div>
and here is the style.css
#header{background-color: #fff; width: 1000px; position: relative; }
#bannerL{ position: relative; top: 500px; left: 500px; }
#bannerR{ position: relative; float: right; }
body {
background-image: url("beach.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
margin-top:100px;
margin-right:180px;
margin-bottom:10px;
margin-left:200px;
}
please help, Im very new at code and bought a book but that hasnt helped. I have spent few hours trying to get this and to no avail.
Your body styles contain margin-right:180px. Because of that the #bannerR will never float all the way to the right. Remove that style and it'll work. Here is some code:
body
{
background-image: url("beach.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Here's a fiddle to show it in proof: http://jsfiddle.net/rzKaz/1/
Make sure your DIV isn't contained within an element with restricted space (doesn't span the entire width of the page)
Make sure you link the css file to the HTML so the browser knows what css files you are using.
<html>
<head>
<link rel="stylesheet" type="text/css" href="your_style.css">
</head>
<body>
<!-- YOUR HTML -->
</body>
</html>
So I'm also a total noob with CSS, and I'm getting confused on how to center my logo. It worked on my footer but not on my text / logo.
Also, how to fix that small bit on the left of my footer, I already set the .footer width to 100%.
Thanks!
Screenshot:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Konvoy</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<!-- <link rel='stylesheet' href="/css/normalize.css"> -->
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container">
<header> <!--<div id="logo">--> <h1><img src="/assets/Konvoy Logo.png" width="350"/> <!--</div>--> </h1>
<div class="description" style="margin-top: 0px;">See each other in any situation. Geolocation App For Everyone.</div>
</header>
<div class="content">
</div>
<!-- <div class="app">
<div id="infobox" class="infobox"></div> -->
<!-- <div id="map">To get this app to work you need to share your geolocation.</div>
</div> -->
</div>
<div class="footer" style="padding-top: 30px;"><center> 2013 All Rights Reserved. Team Konvoy </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="/js/lib/leaflet.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/application.js"></script>
</body>
</html>
CSS:
html, body {
height: 100%;
background: url('../assets/landing_page_bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #666;
#font: 14px/18px 'Bariol', Arial, sans-serif;
}
.container{
}
header {
text-align: center;
position: center;
width: 100%;
padding-top: 150px;
}
.description {
font-weight: 300;
font: 24px 'Bariol', Arial, sans-serif;
color: #006794;
text-align: center;
}
.content {
}
.footer {
clear: both;
position: fixed;
height: 80px;
width: 100%;
background-color: #039686;
font: 16px 'Helvetica', Arial, sans-serif;
color: #FFFFFF;
font-weight: 100;
}
Use this,
HTML
<h1 id="logo"><img src="/assets/Konvoy Logo.png" width="350"/>
CSS
h1#logo {
width:350px;
margin:10px auto;
}
Try this:
<img src="/assets/Konvoy Logo.png" width="350" style="position:absolute;left:50%;top:100px;margin-left:-175px;"/>
Also, adding a CSS Reset sheet to your page will help solve many problems, such as default page margins.
http://www.cssreset.com/
try this
html, body {
height: 100%;
background: url('../assets/landing_page_bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #666;
#font: 14px/18px 'Bariol', Arial, sans-serif;
margin:0;
padding:0;
}
.footer {
clear: both;
position: fixed;
height: 80px;
width: 100%;
background-color: #039686;
font: 16px 'Helvetica', Arial, sans-serif;
color: #FFFFFF;
font-weight: 100;
bottom:0;
}
This may help you to keep footers at the bottom of the page.
.footer {
position:absolute;
bottom:0;
width:100%;
}
Reference: How to keep footers at the bottom of the page
Demo
There are several ways one can center an element in css.
If the element's width is known we may center it using margin: auto;
If there is a need to use absolute or fixed positioning and the width of the element is known then we can center it like so:.logo {
width: 350;
position: absolute;
left: 50%;
margin: 0 0 0 -175px; // width/2
}
Using text-align: center; on the parent container.
In this case - make sure the parent container and its children are in the normal flow (not floated and not positioned). And the child element needs to be inline or inline-block.
Edit:
And one more thing: in your header tag you first open a div, then an h1 tag, but the closing order is not correct. You need to close the h1 first and only then the div ;)