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;
}
Related
This question already has an answer here:
How do i create and link another webpage with Visual Studio Code?
(1 answer)
Closed 2 years ago.
I'm talking specifically about the part that says <p>Questions? Ask them here</p>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 57%;
}
body, html {
margin: 0;
padding: 0:
}
header {
width: 100%;
height: 70px;
background-color: #00264d;
}
h1 {
position: absolute;
padding: 3px;
float: left;
margin-left: 2%;
margin-top: 10px;
font-family: Arial;
color: #ffffff;
}
ul {
width: auto;
float: right;
margin-top: 8px;
}
li {
display: inline-block;
padding: 15px 30px;
}
a {
text-align: center;
color: #ffffff;
text-decoration: none;
font-family: Arial;
font-size: 1.2vw;
}
a:hover {
color: #F0c330;
transition: 0.5s;
}
img {
width: 100;
margin-top: -16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="SitNumber360Styling.css">
<title>Sit Number</title>
<link rel="shortcut icon" href="SitNumberLogo.png">
</head>
<header>
<div class="wrap">
<h1>Sit Number</h1>
<nav>
<ul>
<li>Chairs</li>
<li>Cushions & Pillows</li>
<li>Accessories</li>
<li>Support</li>
</ul>
</nav>
</div>
</header>
<body>
<p>Questions? Ask them here</p>
<div>
<img src="transparentchair.png" alt="Product Picture" class="center">
</div>
</body>
</html>
You might try nesting the elements such as;
<p>Questions? Ask them here</p>
This is my code. It starts off in HTML and the other half is CSS.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>
Home - Hasan's Website
</title>
</head>
<body>
<div class="navigation">
<a class="active" href = "#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<h1>Computer Engineering</h1>
</div>
</body>
</html>
body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight:400;
line-height:1.8em;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
body {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
}
I really need help putting the Computer engineering title in the center of the background image, also I want a bar of colour behind it. Can anyone please help me? This stuff is due tomorrow!
Add bar image address in jumbotron css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>
Home - Hasan's Website
</title>
<style>
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(gg.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 1px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
body {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
</body>
</html>
EDIT#2: Fixed it i have added to my code position: absolute; top 130px; display:block; thanks for all respondes ... code on codepen was fixed too .. :D
EDIT: So i fixed the content-holder problem now i have a new one i cant move him inside my main .... i have been trying vertical align and it doesnt work Codepen: http://codepen.io/anon/pen/VvKdrL
My new code :
header>a
{
font-size: 38px;
font-weight: 500;
border-bottom: 1px solid #888;
text-align: left;
color: #555;
font-family: "Monserat";
}
header
{
border-bottom:1px solid #888;
}
main
{
height: 530px;
display: block;
margin-top: -40px;
}
ul
{
list-style-type: none;
}
li a
{
font-size: 22px;
font-family: Helvetica;
margin: 4px;
font-weight: 500;
font-family: "Roboto";
line-height: 34px;
color: #222;
}
a
{
text-decoration: none;
}
li::before
{
content: "➢";
}
.center
{
width: 960px;
margin: 0 auto;
}
.content-holder
{
position: absolute;
width: 250px;
height: 200px;
top: 130px;
background: #eee;
display: block;
z-index: 2;
}
.background
{
z-index: 1;
background-repeat: no-repeat;
}
.footer
{
border-top: 1px solid #888;
height: 20px;
content:
}
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="center">
Name
</header>
<main class="center sizemain">
<div class="background"></div>
<div class="content-holder">
<ul>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
</ul>
</div>
</main>
<footer class="footer">
</footer>
</body>
</html>
Thanks for respondes
You need to comment out both the margin-top and the margin. Margin applies 50px to every side.
.content-holder {
width: 250px;
height: 190px;
background: #eee;
/* margin: 30px; */
/* margin-top: 50px; */
vertical-align: 50px;
z-index: 2;
}
See: http://www.w3schools.com/css/css_margin.asp
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo
I am EXTREMELY new to CSS and HTML (beginners course at uni) so I'm not sure if this is a super basic issue or not.
I'm using CODA 2 on a mac.
I have 5 HTML pages and a separate stylesheet.css.
In Coda preview the CSS works on the HTML pages. If I manually save the .css the HTML pages don't display any CSS. If I slightly edit anything on the .CSS the HTML pages refresh in preview and display the CSS again.
If I open my HTML pages in the browser (chrome/firefox) they are displayed without any css.
The correct links to the .CSS page are on all my HTML pages (under the title).
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="ms.css" />
Any help would be MUCH appreciated as time is ticking away and I am completely lost.
Cheers
EDIT*
All the files are located within the same folder.
CSS code
`#charset "utf-8";
/* CSS Document */
header {
a:link color:white;
a:visited {color:white;
font-family: sans-serif;
background-color: #004292;
width: 640px;
}
header nav a {
color: white;
text-decoration: none;
font-family: sans-serif;
}
header > h1 > a {
color: white;
text-decoration: none;
font-family: fantasy;
font-size: large;
}
header nav a:hover {
background-color:white;
color: #004292;
border: 1px solid white;
}
body {
width: 1080px;
background-color: #004292;
padding-left: 0px;
border-bottom-left-radius: 0px;
}
nav > ul {
width 1080px;
}
nav > ul > li {
display: inline;
float: right;
}
nav > ul > li > a {
float: right;
padding: 0 15px;
transition: background-color 0.5s, border-color 1s;
}
.onion {
background-color: #004292;
font-family: sans-serif;
color: white;
float: left;
width: 640px;
margin-left: auto;
margin-right: right;
padding-top: 100px;
}
section {
background-color: #004292;
font-family: Arial, sans-serif;
color: white;
float: left;
width: 640px;
}
.lcol {
width: 100px;
float: left;
}
.lcol img {
width 200px;
}
.rcol {
width: 100px;
float: right;
}
.rcol img {
width 200px;
}
#wrap {
width: 640px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-family: Arial, sans-serif;
color: white;
float: left;
}
#beef img{
width: 512px;
height: 306px;
background-image: url(kingswood_text.jpg);
background-position: 0 0;
}
#beef img:hover {
background-position: 0 100%;
opacity: 0.1;
}
#wrap img:hover {
opacity: 0.1;
background-position: 0 0;
}
#wrap img {
margin: 10px;
border:2px solid white;
width: 512px;
height: 306px;
background-image: url(kingswood_text.jpg) bottom;
}
#yelp {
background-color: white;
color: white;
width: 1080px;
margin-top: 100px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
border-bottom-left-radius: 0px;
float: left
}
#yelp img {
margin-left: auto;
margin-right: auto;
}
footer {
width: 640px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
color: white;
background-color: #004292;
font-family: Arial, sans-serif;
clear: both;
display: block;
padding-top: 100px;
padding-left: 50px;
}
HTML for the index.html page.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>GTM Canberra</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="ms.css" />
</head>
<body>
<!-- Header -->
<header>
<div id="corn"
<h1>GTM </h1>
<nav>
<!-- nav links -->
<ul>
<li>About</li>
<li>FAQ</li>
<li>Event Info</li>
<li>Getting There</li>
<li>Lineup</li>
</ul>
</nav>
</div>
</header>
<!-- Logo/Image/PageID -->
<div id="yelp"
<section>
<img src="images/logo.jpg" alt="logo" width="647" height="358">
</section>
</div>
<!-- Content -->
<div id="wrap"
<section>
<div class="rcol">
<a id="beef">
<a href="lineup.html"><img src="images/steptones.jpg" alt="steptones" >
</a>
<a href="lineup.html"><img src="images/stone.jpg" alt="stone" >
</div>
<div class="lcol">
<a href="lineup.html"><img src="images/north.jpg" alt="north" >
<a href="lineup.html"><img src="images/kingswood.jpg" alt="kingswood" >
</div>
</section>
</div>
<!--Footer -->
<footer>
<p> Presented by Cattleyard Promotions and supported by triple j and Channel V </p>
</footer>
</body>
</html>
You have to close your opening div tags, from this
<div id="corn"
to this
<div id="corn">
Same with <div id="yelp"and <div id="wrap"
Also in your css you forgot to put colons in some parts, like
.lcol img {
width 200px;
}
instead of
.lcol img {
width: 200px;
}
In new projects, it's better to start with as little code as you can in both the HTML and CSS files (and js files too) just to see that all files are linked together.
Edit:
a:visited {color:white
In the CSS file, can you please remove the first line or at least remove the accent before #charset "utf-8";
`#charset "utf-8";