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.
Related
I've been trying to create a landing page for my website. I'm stuck in putting the background since it doesn't cover the whole page even if I set the width to 100%.
It looks like this, even if it's not zoomed out or in.
Notice the huge white part on the right side
So far, this is the only code that I have
CSS
*{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.container {
width: 100%;
height: 100vh;
background: linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../../assets/images/background.png);
background-position: center;
background-size: cover;
}
HTML
<HTML>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEQR</title>
<link rel="stylesheet" href="dashboard.component.css">
</head>
<div class="container">
</div>
</html>
width: 100%;
height: 23vw;
background: url('srcimgs/topsvg.svg') no-repeat;
this may help you adjust the height
Try this solution that i have used for my Homepage
.heroImage{
background-image: url('./assets/wallpaper.jpg');
background-attachment: fixed;
background-size: cover;
}
use these CSS properties in your background img tag. I hope this helps.
I have problem making my banners up and down my webpage scale to always fit the user's screen so I don't have horizontal scroll bars which is bad experience on mobile phones as desktops as well. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<style type="text/css">
body {
background-image: url("TBG_02.jpg");
background-color: #cccccc;
background-size: cover;
background-repeat: no-repeat;
}
#top,#bottom{width:100%;}
#top,#bottom{height:155px;}
#top{position: fixed;left:0;top:0;}
#bottom{position: fixed;right:0;bottom:0;}
.topp{background-image: url("BG_02.png");background-repeat: no-repeat;background-size: cover;}
.bottomm{background-image:url("BG_03.png");background-repeat: no-repeat;position:fixed;background-size: cover;}
</style>
</head>
<body>
<div id="top" class="topp">
</div>
<div id="bottom" class="bottomm">
</div>
</body>
And this is how the problem looks like:
https://imgur.com/a/WscYr3D
You may notice the bad gray/white space in the photo as well. To note: I will add some images as buttons above the banners. Any ideas?
Your approach is basically sound in using:
background-size: cover;
to ensure that the browser resizes the image to cover the whole of the <body>.
What you are missing though, is that the height of the body does not cover the whole height of the viewport.
To fix this, you can add:
body {min-height: 100vh;}
ie. the height of the body must never be less than 100% the height of the viewport (or 100 viewport-height units).
Working Example:
body, .top, .bottom {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
body {
min-height: 100vh;
background-color: rgb(204, 204, 204);
background-image: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg');
}
.top, .bottom{
position: fixed;
width: 100%;
height: 45px;
background-color: rgb(0, 0, 0);
}
.top{
top: 0;
left: 0;
}
.bottom{
bottom: 0;
right: 0;
}
<div class="top"></div>
<div class="bottom"></div>
The answer from Rounin was cool but it made some troubles; the only thing it missed is that there is no image to put in the divs so they can appear on the banners, then I had to set their width and height and playing with them a bit until it fixed :D
<body>
<div class="top">
<img src="BG_02.png" class="top"/>
</div<
</body>
I want to make a page,which by scroll down ,the content div ,cover the back ground image.so I put a background image for body and create 2 divs, it works in big window size, but when I change the size of window, and make it smaller (to test the responsive), there is a white gap between image and content div.
Would you please help me to remove it?
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>first</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="css/first.css" rel="stylesheet">
<style>
body{
background: url("https://kalamarie123.files.wordpress.com/2012/03/img_7815-2.jpg") no-repeat top center fixed;
background-size:100%;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="content">Lorem Ipsum is simply dummy text of </div>
</body>
</html>
.cover{
height: 1232px;
width: 100%;
margin: 0;
padding: 0;
color: white;
text-align: center;
}
.content{
width: 100%;
height: 100%;
background: gray;
margin: 0;
padding: 0;
}
You need to make the body and the html go to the bottom of the page:
body, html {
min-height: 100%;
}
and then set the background to background-size: cover;: https://css-tricks.com/perfect-full-page-background-image/
You could do something like this:
<div id="yourdiv"></div>
#yourdiv {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hope it helps!
Sounds like it's probably due to your background image not filling the full space available.
Try adding this to the body (the element with the BG image);
background-size:cover;
Note that this will not work well on old browsers
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've checked everywhere that I can think of, no luck. I have a page I'm trying to make responsive. Pretty much one div on top of the other with a css background image inside. When I change the browser window size the image seems to scale pretty well but the div height doesn't so you can see the background of the div. I need the div height to change in proportion to the image size. I'm trying to use CSS only without javascript since I'm brand new to web design. Any help would be great.
Here is the code I've got.
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The Home Page</title>
<meta name="description" content="The best toy out there">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--<h1> Body Text</h1>-->
<div id ="top_pic">
<hgroup> </hgroup>
<h1> top_pic; SOME TEXT WILL GO HERE</h1>
<!-- A logo image will also be placed on top of background image in this div probably in the hgroup -->
</div>
<div id = "middle_pose">
<h1 class = "midposetext"> MIDDLE pose div, some text goes hereAAA</h1>
</div>
<div id = "content">
<h1> Content div...some text goes here</h1>
</div>
<div class = "footer">
<h1> Footer div</h1>
</div>
</body>
</html>
The CSS:
body {
background-color : #e8e821;
width: 85%;
height: 100%;
margin: 0 auto;
border: dotted black;
position: relative;
padding: 1%;
}
#top_pic {
background-image: url('images/eyeforheader1.jpg');
background-size: cover;
background-repeat: no-repeat;
border: solid #3fa85f;
margin: 0 0 20% 0;
width: 100%;
height: 100%;
display: block;
}
#middle_pose {
/*background-image: url('images/girl on back grasping sheets brunette.png');*/
background-image: url('images/Screen Shot 2014-02-10 at 11.47.48 PM.png');
background-size: 100%;
background-repeat: no-repeat;
background-color: #7547dd;
width: 100%;
height: 450px;
border: solid #f05858;
margin: auto;
}
#content {
background-image: url('images/Screen Shot 2014-05-28 at 5.52.03 PM.png');
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 500px;
border: solid orange;
}
.midposetext { color: #de4b8f;
}
#middle_pose h1{
color: yellow;
z-index: 10;
font-size; 1.4em;
}
In your CSS file, you can change the #middle_pose background-size property:
from:
background-size:100%;
to:
background-size:cover;
This will scale the background image to be as large as possible so that the container's background is covered. However, this may force portions of the image to be out of the viewable area (at certain dimensions). In this case, you may find that you want to use media-queries to adjust the container's dimensions and/or swap the image for one with more appropriate dimensions/aspect-ratio.
Hope this helps :)