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.
Related
I have a background image that I need to be at the bottom of the entire page is the following:
.background-div {
top: 0px;
left: 0px;
width: 100vw;
height: 100%;
background-image: url('./assets/pattern.png');
background-repeat: repeat;
background-position: center;
background-size: 40%;
}
but in a view there is a moment that a data fetch is made that occupies half of the view and the background is left in half I do not know how to solve it when I place 100vh if the content is a lot it is cut, and if I put 100% it is cut in half while fetching the data
You can make full page image like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.background-div {
/* The image used */
background-image: url("assets/pattern.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="background-div"></div>
</body>
</html>
(source: https://www.w3schools.com/howto/howto_css_full_page.asp)
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;
}
this is pretty basic question I'm stuck on. I'm designing my first page with my artistic portfolio and have a problem. I set background to be full screen on any device and wanted to add an image that would appear on the left corner. But I don't know how to code it correctly, it's either image above the background with a white frame or under the background.
It must be something with the divclass line because whether it's above or under the background is dependent putting the image before or after that
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("https://78.media.tumblr.com/9eda2a03998298df51259dc81b0dc0ad/tumblr_p49iilKTmk1x5vw3ao1_1280.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
<img src="<img src="example" alt="example" width="42" height="42">" alt="example" width="42" height="42">
</body>
</html>
Thanks for your help!
You can simply consider multiple background and pay attention to order. The first image is the top layer.
body,
html {
height: 100%;
margin: 0;
}
body {
background-image:url("https://lorempixel.com/100/100/"), url("https://78.media.tumblr.com/9eda2a03998298df51259dc81b0dc0ad/tumblr_p49iilKTmk1x5vw3ao1_1280.jpg");
height: 100%;
background-position: top left,center;
background-repeat: no-repeat;
background-size: auto,cover;
}
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
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 :)