I am new to html and css, i have started to make a website so i started with placing the logo and the background correctly, now the problem is that i cannot vertically center my logo image.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
</head>
<body>
<div class="bg">
<div class="menu">
<div class="logo"></div>
</div>
</div>
</body>
</html>
CSS:
body {
background:url(../img/bg.png) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:1000;
}
body {
margin:0 ;
padding:0;
height: 100%;
width: 100%;
}
.menu {
background:url(../img/MenuBar.png) ;
height:150px;
width:1242px;
position:relative;
}
.logo {
background:url(../img/Untitled-1.png) no-repeat center;
width:262px;
height:80px;
margin:0 auto;
}
This schould do the trick.
.menu {
background:url(../img/MenuBar.png) ;
height:150px;
width:1242px;
position:relative;
display: table;
}
.logo{
background:url(../img/Untitled-1.png) no-repeat center;
width:262px;
height:80px;
margin:0 auto;
display: table-cell;
vertical-align: middle;
}
Create a containing div using the same "margin-left: auto; margin-right: auto" or "margin: 0 auto" trick you were using. Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
<style>
body{
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:1000;
}
#container {
}
#bg {
margin: 0 auto;
width: 25%;
}
#menu{
background-color: green;
height:150px;
width:600px;
}
#logo{
background-color: blue;
width:262px;
height:80px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="bg">
<div id="menu">
<div id="logo"></div>
</div>
</div>
</div>
</body>
</html>
What's Going On
Given that you want it work be centered vertically, the only answer here so far is to give .menu styling of vertical-align:middle. That won't work. To center vertically, you need to use a position trick. You give the item a position:absolute, then you tell it to be top:50%, which will place the top of that item at 50% down.
We want the center of the item to be in the center of the container though, not the top to be at the center. So we finally add margin-top of a negative value. That negative value is half the object's height, in this case, 80px / 2 = 40px. To center horizontally, we'll need to do the same. margin:0 auto won't work now given that it's positioned absolutely.
Code
In the end, you will change this:
.logo {
background:url(../img/Untitled-1.png) no-repeat center;
width:262px;
height:80px;
margin:0 auto;
}
To this:
.logo {
background:url(../img/Untitled-1.png) no-repeat center;
width:262px;
height:80px;
position:absolute;
top:50%;
margin-top:-40px;
left:50%;
margin-left:-131px;
}
Working Fiddle
Related
How do I make my image stay at the same spot even when I make my browser window smaller?
Below is my current HTML:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;
}
</style>
<body>
<img id="ZY" style="position:absolute; top:535px; left:770px; border-radius: 50%; width:50px; height:50px" src="zhi yi face.PNG">
<img id="Nehemiah" style="position:absolute; top:435px; left:570px; border-radius: 50%; width:50px; height:60px" src="nehemiah face.PNG">
</body>
</html>
I don't need scroll-bar. How to remove scroll bar from the display?
<!DOCTYPE html>
<html>
<style>
body{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<body>
<img src="flamingo.JPG" usemap="#flamingo-map" />
</body>
</html>
Use the following CSS that will help you, put image path in background-image property. Following code will help you.
<style>
body{
background-image:url('flamingo.JPG');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<style>
<body>
</body>
body {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://i.pinimg.com/originals/be/26/a5/be26a57beb694df3cb91916cafb2d3b1.jpg);
overflow: hidden;
}
.img{ max-width: 100%;
max-height: 100%;
min-width: 100%;
object-fit: cover;
}
<body>
<img class="img" src="https://i.pinimg.com/originals/be/26/a5/be26a57beb694df3cb91916cafb2d3b1.jpg" usemap="#flamingo-map" />
</body>
If u need an image as a featured image then u use this code. If u need an image as a background then use the previous answer. Hope this code will useful for u.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.image{
width: 100vw;
height: 100vh;
overflow: hidden;
}
img{
max-width: 100%;
max-height: 100%;
min-width: 100%;
}
</style>
</head>
<body class="image">
<img src="path">
</body>
</html>
When I resized the "logo" as I wanted it, it does not longer align in center of the page, now it's in the left when I added those 2 last .logga.
So this is my code:
body {
background-image: url(http://i.stack.imgur.com/iOkRy.png);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.logga {
width: 200px;
height: 120px;
}
.logga img {
width: 100%;
height: auto;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="logga" align="center">
<img src="http://i.stack.imgur.com/iOkRy.png" alt="Hello">
</div>
</body>
</html>
It aligns to the center of the containing div. If you need the div to center. The parent element needs to have a width property and then the child element would need margin-left: auto and margin-right: auto;.
Example fiddle here:
https://jsfiddle.net/8yhsr5ba/
You can solve this with CSS by specifying margin:0 auto; for the .logga class.
.logga{
width: 200px;
height: 120px;
margin:0 auto;
}
That lets the browser calculate even spacing on each side of the element automatically. Note: although deprecated, it could also be centered with HTML by using <center></center>
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div class="logga" align="center">
<img src="logga.png" alt="Hello">
</div>
</center>
</body>
</html>
Try this. You'll get your image centered.
body {
background-image: url("bg2.jpg");
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.logga {
width: 200px;
height: 120px;
margin-left: auto;
margin-right: auto;
background-color:white;
}
.logga a{
display:block;
}
.logga img {
display:block;
width: 100%;
height: auto;
}
<div class="logga">
<img src="http://7-themes.com/data_images/out/62/6983929-fall-nature-photography.jpg" alt="Hello">
</div>
The align attribute is not supported in HTML5. Use CSS instead, like this:
.logga {
width: 200px;
height: 120px;
margin: 0 auto; /* this places .logga in the center of the body */
text-align: center; /* this centers inline elements inside .logga, you don't necessarily need it */
}
just use margin:auto; in style.
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;
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.