CSS:
.footer {
background-image: url("./images/footer.png");
height: 45px;
background-position: center center;
background-repeat: no-repeat;
position: relative;
bottom: 0;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>My title</title>
</head>
<body>
.. some header divs..
.. some content divs..
<div class="footer">FOOTER</div>
</body>
</html>
Footer is about 10 pixels before bootom. How I can add it to the very bottom of the page?
add this css
body {
margin:0;
}
Related
I am trying to put a background picture with medium opacity but unable to do so, here's my html:-
<body style="margin:auto;width:100%;height:100%;opacity:0.1;background-image:url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg')">
</body>
Use div instead of body tag. And give a particular height to that div.
<!DOCTYPE html>
<head>
<title>Your favourite travle partner</title>
</head>
<body>
<div style="margin:auto;width:100%;height:400px;opacity:0.1;background-image:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg')">
</div>
</body>
</html>`
Instead of adjusting the body elemet, add an extra div to hold the background, better to separate the style into a css file.
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://i40.tinypic.com/3531bba.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.4;
}
<!DOCTYPE html>
<head>
<title>Your favourite travle partner</title>
</head>
<body>
<div id="background"></div>
</body>
When I place a div with a background-image property and use position: relative I end up with a white frame around the edge of the image which I do not want.
I cannot use absolute as I need an element to follow directly below the background image and scale on different resolutions (so no setting height/width in px).
Here's the CSS:
#pagehead{
position: relative;
background-position: center, center;
background-image: url("Header.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
top: 0;
bottom: 0px;
left: 0;
right: 0;
}
section{
position: relative;
}
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="animate.js"></script>
<link rel="stylesheet" type="text/css" href="page.css">
</head>
<body>
<div id="pagehead"></div>
<section>
<div id="content">
blahblahblah
</div>
</section>
</body>
</html>
Setting the body's margin to 0 might fix the problem:
body { margin: 0px; }
I am having an issue with my background image of a container being zoomed in on the browser. The picture is 1200px wide and my container is also 1200px wide. I have it set as the background-image for my .container selector. When I load it in the browser it is only showing a small portion of the image because it is zoomed in so far. Why is this happening?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<main role="main">
<article role="article">
<section>
<header>
<div class="container">
</div>
</header>
</section>
</article>
</main>
</body>
</html>
CSS:
#font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf")
format("opentype");
}
html, body {
padding:0;
margin: 0;
background-color:#222222;
}
body {
font-family:"Brandon Grotesque";
width: 1200px;
margin: 0 auto;
}
.container {
width: 1200px;
height:600px;
background-image:url("img/background.jpg");
text-align:center;
margin:auto;
padding:0;
}
Am I missing anything?
You need to specify a few more properties for your background-image like this:
.container {
width: 1200px;
height:600px;
background-image: url("img/background.jpg");
background-size: cover; /* or "contain" depending on what you want */
background-position: center center;
background-repeat: no-repeat;
text-align:center;
margin:auto;
padding:0;
}
A detailed explanation of the background property is available in the official MDN Web Docs.
This works fine!
background:rgb(37, 16, 13) url("images/bc02.jpg");
background-repeat: no-repeat;
width: 100%;
height:100%;
background-position: center center;
text-align:center;
margin:auto;
padding:0;
How would one ensure that certain content is always fitted inside a particular area of a web page?
As an example, I would like the sentence "Fit this inside" to appear inside of the background image. Here is my test.html file:
<!DOCTYPE html>
<html lang="en">
<link href="test.css" rel="stylesheet" type="text/css">
<body>Fit this inside</body>
</html>
Here is my test.css file:
body
{
background-image: url('bg_img.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
overflow: scroll;
}
This results in the text "Fit this inside" appearing at the very top of the page, and not inside the background image area.
What is the correct method to do this?
JSFiddle: http://jsfiddle.net/u3TAF/
Look at my comment higher.
You've set the background image to be 68% height. set the text into container with same properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bla! </title>
<style type='text/css'>
body
{
background-image: url('image.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
}
div.container {
position:absolute;
top:16%;
height: 68%;
left: 0%;
overflow:auto;
}
</style>
</head>
<body>
<div class='container'>
Now it's fit!
</div>
</body>
</html>
I think the best option would be to put the text within a DIV and then apply the styles to that element. Somewhere along the lines of:
<html>
<head>
<style type="text/css">
#test{
background-image: url('bg_img.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
overflow: scroll;
}
</style>
</head>
<body>
<div id="test">
Fit This Inside
</div>
</body>
</html>
The background image should be given to the parent element. In your case, in the CSS, attach the background image property to the <html> element. So this image would act as a background to all the content of this page.
If that is what your aim is, then:
html{
background: url('bg_img.png') no-repeat center center fixed;
}
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>