I'm trying to make my paragraph (#home) move to the middle of the greyed box, but it won't move no matter what. I've tried changing the margin to padding, and making the margin up and down, or even making it ridiculously high, like 1000. Please Help. Here's my code:
Html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="BrokenRecordNew.css" />
<title>Broken Record</title>
</head>
<body>
<div id="tabsattop">
<p id="home">Home</p>
<a href="BrokenRecordNew.html"><img id="logo" src="http://www.freevector.com/site_media/preview_images/FreeVector-Antique-Record-Player.jpg"><a>
</div>
</body>
</html>
CSS:
html {
background: url("http://theband.hiof.no/band_pictures/band_mfbp_back.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#tabsattop{
background-color: black;
opacity: .8;
margin-top:-7px;
margin-right: -5px;
margin-left: -5px;
width: 1274px;
height: 75px;
}
#logo{
height: 75px;
margin-left:550px;
display:inline-block;
}
#home{
margin-left: 10px;
display:inline;
color:white;
font-size:25px;
font-family: sans-serif;
}
By using display:inline, you've removed the ability to apply margin or padding to it. Remove display:inline (or use display:inline-block instead) and you should be good to go.
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 1 year ago.
I got a background image for my homepage, but I can't seem to lighten the background image.
My html file looks like this:
<!DOCTYPE html>
<html>
<head>
<title> Homepage </title>
<style>
body {
background: url('static/img/background1.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #000;
font-family: 'Roboto Mono', monospace;
opacity: 0.8;
position: relative;
background-blend-mode:lighten;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> a title </hi>
<p> some text </p>
</body>
</html>
I thought the opacity setting or the background-blend-mode would help, but this doesn't seem to work.
I also tried the following, based on a comment:
body {
font-family: 'Roboto Mono', monospace;
position: relative;
}
body :after {
opacity: 0.9;
background-img: url('static/img/background1.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But in this case, the background image doesn't shows at all...
This is an image of the page when I use the original setting (first set up with only body{}):
But there is some text in it which we cannot see:
How can I lighten my background in this set up?
It's highly unlikely that you want the whole of your body to have opacity 0.8 - this will bring all its content down in opacity.
Instead you can put the background on a before pseudo element on the body and give that a lower opacity.
This snippet assumes you want the background to stay, so gives the before pseudo element position fixed, but you could of course have it just the same size as the body by giving it position absolute instead.
<!DOCTYPE html>
<html>
<head>
<title> Homepage </title>
<style>
body::before {
content: '';
background: url('https://picsum.photos/id/1004/200/300') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.8;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
body {
color: #000;
font-family: 'Roboto Mono', monospace;
opacity: 0.8;
background-blend-mode: lighten;
width: 100vw;
min-height: 100vh;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> a title </hi>
<p> some text </p>
</body>
</html>
Note: you may get a suitable effect by looking into using filter for example.
I see what you are trying to do. I would instead add a div on top of the image add give it a background color (say grey or white) with some opacity.
<body>
<div>
<div class="bg"/>
<div>
<h1> a title </hi>
<p> some text </p>
<div/>
<div/>
</body>
and style would be something like:
<style>
.
.
.
.bg {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
opacity: 0.5;
z-index: -1;
}
</style>
try adjusting opacity and color such that your text has to best contrast to be visible.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>California Road Trip</h1>
<h2>Driving the Coast of California</h2>
</header>
<p>
Highway 1 is the infamous winding stretch of road that follows the pacific coast of the U.S. Visit this sit for a virtual experience. <i>Bon voyage!</i>
<br />
<b>Call for help now!</b>
</p>
<p>
<video controls="controls" autoplay height="300" width="500" loop>
<source src="20160628_110323_64628293200884.mp4" type="video/mp4" />
</video>
</p>
<div>
<img src="columbus-nav-850x637.jpg" alt="Background Image" />
</div>
<footer>
Copyright © 2016.
</footer>
</body>
</html>
CSS:
header{
color: #000;
text-align: center;
border: 500px;
background-color: rgba(255, 190, 0, .5);
border-radius: 20px;
}
p{
text-align: left;
margin-left: 20px;
font-family: sans-serif, Arial, 'Myriad Pro';
}
div{
position: fixed;
top: 20px;
z-index: -1;
opacity: .5;
background-size: cover;
}
footer{
position: fixed;
bottom: 10px;
margin-left: 10px;
}
The background image is not taking up the entire screen. Any help is appreciated.
Here is a JSfiddle
You must set div img rather than just div. Give the element a height and width of 100% and it should cover the viewport.
div img {
position: fixed;
top: 20px;
z-index: -1;
opacity: .5;
background-size: cover;
height: 100%;
width: 100%
}
Background image is a css property, but you're trying to apply it to an image tag. You'll want to do something like this:
HTML:
<div class="myBackground"></div>
CSS:
.myBackground{
background-image: url(columbus-nav-850x637.jpg);
background-size: cover;
/*You can make this background fixed on desktop by adding this:*/
background-attachment: fixed;
}
Add these properties to div section in css file
{
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
The image you wish to serve as background for your page is placed in a div smaller than your page's size. And hence even if the image filled the div, it won't fill the page.
One of the possible solutions is to apply background image directly on body as suggested by Richard.
However, if you want your image to be in a separate div, you will first need to make the div cover your entire page. Minor update to CSS properties should do it.
div{
position: fixed;
top: 20px;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: .5;
background-size: cover;
}
Next thing you need to make the image cover the entire div. You can either do it by setting
width: 100%;
height: 100%;
on img tag, or removing the img tag altogether and adding
background-image: url("columbus-nav-850x637.jpg");
in css for the div itself. You might also need to set proper z-index on your "background" div to layer it behind other contents of the page.
Сheck the "background-attachment" parameter. It should not have the value "fixed"!
I'm trying to create a background image to be displayed on a div. But when called, it doesn't display. But when I call it on the entire body, the image is being displayed. What am I doing wrong? Thanks in advance.
<!DOCTYPE>
<html>
<head>
<title>CSS image placement</title>
<style>
#header{
background-image: url('bg.jpg');
background-size: cover;
padding: 0px;
margin: 0px;
border: 0px;
}
</style>
</head>
<body>
<div id="header"></div>
</body>
</html>
****** EDIT ******
I'm adding the code that I edited and tried again with your help. Still no luck when I call the style on div.
<!DOCTYPE>
<html>
<head>
<title>CSS image placement</title>
<style>
#header{
background-image: url('bg.jpg');
background-size: cover;
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
border: 0px;
width:50px;
heigth:50px;
}
</style>
</head>
<body>
<div id="header" ></div>
</body>
</html>
Your #header is 0px x 0px big. Give it a size (width and height) and you should be good.
you forget to set height and width.,
#header{
background-image: url('bg.jpg');
background-size: cover;
padding: 0px;
margin: 0px;
border: 0px;
width:100%;/* what size you need to add here */
heigth:50%;
}
Give your #header some height. It will work.
Try this -
#header {
background:url(image.jpg) no-repeat;
height:50px;
width:50px;
}
Its because of Height and Width. Specify height and width.
height: auto;
width: 100%;
and also indicate no-repeat.
please give the height like
#header{height: 100px;}
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 ;)