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;
Related
The desktop version looks good, but the mobile version is clipping the background. What I mean by this is that when I scroll it has the effect of two backgrounds.
I don't know if the problem is in the css or the html file.
body, html{
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">
</script>
<link href="https://fonts.googleapis.com/css family=Montserrat:300,600,700i" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
Because you set background-image for two element (html and body). A simple webpage layout like this:
<html>
<head>
</head>
<body>
</body>
</html>
You can change the height value for the body, but not the html! The height value of HTML is always automatic. Therefore, after scrolling down 1080px, the body background ends and the html background is displayed. To solve the problem, just add the background to the body and remove height value.
body{
margin: 0;
padding: 0;
background-image: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
add this media code
#media screen and (max-width:500px){
body, html {
background-size:100% 100%;
}
}
You don't need to set bckgound for html and body. Only set the background for body.
body{ /* Remove html from this lie */
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
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 trying to get a background on my website BJBGaming1.com, and i have this
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet"
href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
</head>
<body>
and if you look i have the css/main.css part which has this for code
html {
min-height:100%;
min-width:100%;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
body {
background-image:url('../img/background.png');
background-repeat:no-repeat;
background-size:cover;
}
and i have an image that matches the name background.png that is 1 folder back and into the img folder so i have the ../img/background.png but the background still wont show, somebody please help.
You can try to use !important to the background-image because foundation.css is already override your background image to #fefefe
html {
min-height:100%;
min-width:100%;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
body {
background-image:url('../img/background.png') !important;
background-repeat:no-repeat;
background-size:cover;
}
OR
You can also load your main.css file after foundation.css
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
Using Chrome developer tools, I can get your image to display using
body { background-image: url('../img/background.png') !important; }
and
body { background-size: 100% !important;} will work
or body { background-size: cover !important; } worked as well.
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 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