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>
Related
I would like to have a full screen, fixed, responsive background image in the header for a website. I have some css which works fine on desktop browsers, but on chrome on android, scrolling through the website results in the image moving/resizing when the browser address bar is shown/hidden.
Currently I'm using 100vh for the height of the header, with background-attachment: fixed and background-size: cover. Based on what I read at the following link, 100vh should always be sized as if the address bar is hidden. https://developers.google.com/web/updates/2016/12/url-bar-resizing
I've also tried using javascript to get the initial viewport height, and setting the header height to this value. It doesn't seem to work either.
Here is a very simple example, which I've also uploaded to an S3 bucket for ease of viewing on mobile:
<html>
<head>
<style>
html,
body {
margin: 0;
}
.background {
background-image: url(./image.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
</style>
</head>
<body>
<header class="background"></header>
<h1>Should not resize on mobile scroll</h1>
</body>
</html>
Give your .background element an absolute position and add a margin to the <h1>:
<html>
<head>
<style>
html,
body {
margin: 0;
}
.background {
background-image: url(./image.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
h1 {
margin-top: 100vh;
}
</style>
</head>
<body>
<header class="background"></header>
<h1>Should not resize on mobile scroll</h1>
</body>
</html>
I am making a website and I stumbled upon a little problem.
I have the image set to be to height: 100% and width; and background-size: cover;
Is there any way I can make the footer appear so that you scroll UNDER the image?
.bg {
/* The image used */
background-image: url("./Resources/home_bg.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML code looks like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg"></div>
</body>
</html>
It sounds like you only need to add a z-index to your divs.
The footer would have the smaller number z-index, while .bg is the larger one.
Also, I added a container and gave the footer a background color to just show the effect that I think you're going for.
.bg {
/* The image used */
background-image: url("http://placehold.it/400x400");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 10;
}
footer {
background: #ff0000;
position: fixed;
bottom: 0;
width: 100%;
z-index: 8;
}
.container {
height: 105vh;
}
<div class="container">
<div class="bg">BG</div>
<footer>footer</footer>
</div>
i was put .svg file as background image.
in small screen it was ok, but when i show in large screen it was cut from top and bottom
i want to show background image in full height/width as original size in large and all screen
demo image
-here is my code
.bg {
width: 100%;
height: 540px;
background-image: url(http://inheritxdev.net/Design-Projects/perfit_home/images/OnePager-Header.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
float: left;
width: 100%;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
</body>
</html>
You have to make the div height = pageHeight(header height and appropriate margins should be minus).
.bg{
width: 100%;
height: calc(100vh - (2em + 18px)); /* p tag margin = 2em(1em top, 1em bottom ; p tag height = 18px) */
background-image: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80); /* I changed an image because your image not showing in the playground */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
border: 1px solid red;
box-sizing: border-box;
}
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
Think it has to do with the background-size.
Maybe this works better for you? (practically the same, btw if contain isn't what you want try cover.
background-size: contain;
background-repeat: no-repeat;
background-position: center;
could you prehaps show what you want with an image.
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 saw quite a few similar questions but could not find a fix.
Open this sample and resize the browser to make its height shorter
than the main div height, ~400 pixels.
When scrolling down, the background image attached to the body is cut off:
The code:
html { height: 100%; color: white; }
body { height:100%; padding: 0; margin: 0; background:url(bg.jpg) repeat-x; background-position: bottom; background-size: contain; }
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page { height:100%; }
#divHeader { width:100%; height:115px; }
#divMain { width:600px; height:400px; border: solid 1px brown; }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pageWrap">
<div id="page">
<div id="divHeader">Header</div>
<div id="divMain">Main</div>
<div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div>
</div>
</div>
</body>
</html>
I tried to move the background image to the pageWrap div as someone suggested.
It solves the vertical scroll problem, but creates a similar problem horizontally:
when the window is too narrow and you scroll left, the image is cut off on the right.
Any real solution?
You've got repeat-x value defined, then the background only repeats in the X axis (horizontally).
To solve this you've got two different solutions for two different purposes.
You can put repeat value to repeat in X and Y axis, but this have a problem because your background is a gradient, and if you repeat it in Y axis the visual effect will be bad.
The other solution (in my opinion the best solution) is to define that background covers the whole element. This can be achieved with the property background-size: cover.
The change will be that:
body {
background:url(bg.jpg) repeat-x;
background-size: cover;
}
Tell me if this solves your problem.
Exists another solution with the background-attachment property. It can be defined as fixed value and the scroll doesn't move the background.
body {
background:url(bg.jpg) repeat-x;
background-attachment: fixed;
}
Try these background styles:
background: url(bg.jpg);
background-position: 100% 100%;
background-size: cover;
Since repeating a gradient doesn't look that good, I guess you just want that background alwas cover your whole viewport and not scroll with it? That would be done with no-repeat and cover, like this:
body {
height:100%;
padding: 0;
margin: 0;
background:url(bg.jpg) no-repeat fixed;
background-position: bottom;
background-size: cover;
}
Use background-attachment: fixed on the body, like so:
html {
height: 100%;
color: white;
}
body {
height: 100%;
padding: 0;
margin: 0;
background: url(https://glaring-inferno-4496.firebaseapp.com/bg.jpg) repeat-x;
background-position: bottom;
background-size: contain;
}
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page {
height: 100%;
}
#divHeader {
width: 100%;
height: 115px;
}
#divMain {
width: 600px;
height: 400px;
border: solid 1px brown;
}
/*new code from here:*/
body {
background-attachment: fixed;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pageWrap">
<div id="page">
<div id="divHeader">Header</div>
<div id="divMain">Main</div>
<div id="divFooter">
<p>All Rights Reserved. Blabla® 2015</p>
</div>
</div>
</div>
</body>
</html>
You can use un a CSS property called overflow-y:auto and asign to the father component, of this way is puts a scroll bar when the viewport height reduce him size and your background image don´t cuts anymore.
Try something like this:
.father {
height: 100vh;
background-image: url(https://static.vecteezy.com/system/resources/previews/001/331/268/original/happy-halloween-from-the-spooky-castle-free-vector.jpg);
background-size: 100% 100vh;
background-position: center;
background-repeat: repeat;
overflow-y: auto;
}
.child {
height: 1500px;
}
<div class="father">
<div class="child">
<h1 style="color: white">¡Hello World!</h1>
</div>
</div>