After Adding A background Image there is a white space left.
when bg-size is changed to 'cover' while re sizing to small resolution there is white space left please check yourself
codepen
body {
margin:0;
background-image:url('http://www.fg-a.com/wallpapers/yellow-flowers-green.jpg');
background-repeat: no-repeat;
background-size:auto;
}
You've got right the background-size:cover; but...
you're just missing the background-position property.
The simplest way is like:
html, body{
height:100%; /* Don't forget to set html and body to height 100%! */
}
body {
margin: 0;
background: url('green.jpg') 50%; /* where 50% is our background-position (center) */
background-size: cover;
}
that's really all you need.
http://jsbin.com/bogacad/1/edit?html,css,output
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Related
I am creating a parallax bg but the bg image does not cover the full screen could anyone tell me how to fix it? This is what I have as far as the parallax..
<style>
.parallax {
/* The image used */
background-image: url("rocket-2680282_1920 (1).jpg");
/* Set a specific height */
height: 1078px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: initial;
background-repeat: no-repeat;
background-size: cover;
}
</style>
here is the website if you want to see what I mean link
it look like your body have a margin try adding this to your css :
body{
margin:0px;
}
Please add the following to body element in css:
body {
margin: 0;
padding: 0;
}
This will fix it.
I'd like to add a background-image to my website inside a div that should resizes perfectly on all devices. I tried the simplest way like "height: 100%" but that didn't work at all. I also tried media-queries which of course works but is rather complicated so I wanted to ask if there is an easier way to solve this.
Here's the HTML
<div class="bg"></div>
And that's the CSS
.bg {
background: url('bg.jpg') no-repeat center cover;
}
#Sqnkov has the right answer. An empty div will work with that set up.
Try running the code below and see. (Make it full page and resize the browser).
The center center makes in centered in the Y and X axis. background-size: cover; makes the image cover all available space. If you want to make sure the entire image is in view, use background-size: contain; instead.
body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
}
.bg {
box-sizing: border-box; /*Not necessary in this situation*/
display: block; /*Not necessary, but we do want it this way*/
width: 100vw; /*Not necessary, but we do want it this way*/
height: 100vh; /*Necessary. 100vh = 100% of the viewport height*/
padding: 0; /* No padding */
margin: 0; /* No margins */
background: url('https://images6.alphacoders.com/405/405948.jpg') no-repeat center center;
/* Shorthand: image, repeat, X align, Y align. */
background-size: cover; /* Cover all available space*/
}
<div class="bg"></div>
Alternatively, if you specify that the parent containers' (html, body) height and width as 100% you can use 100% height/width instead of 100vh/vw on the child .bg container as percentages are relative to the parent container.
See the example below:
html, body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
width: 100%; /*Setting parent width -- child width is relative*/
height: 100%; /*Setting parent height -- child height is relative*/
}
.bg {
box-sizing: border-box; /*Not necessary in this situation*/
display: block; /*Not necessary, but we do want it this way*/
width: 100%;
height: 100%; /* Now 100% height will work */
padding: 0; /* No padding */
margin: 0; /* No margins */
background: url('https://images6.alphacoders.com/405/405948.jpg') no-repeat center center;
/* Shorthand: image, repeat, X align, Y align. */
background-size: cover; /* Cover all available space*/
}
<div class="bg"></div>
I'm still learning myself, but have you tried "background-size: cover;" in your CSS?
See more info here: https://www.w3schools.com/cssref/css3_pr_background-size.asp.
Simply apply a size preference to your background property. Here is a shorthand usage:
This is a setting for a big background image that fills its parent to the borders.
background: url('images/image.jpg') no-repeat center center/cover;
Which is equal to:
background-image: url('images/image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
I suggest giving this MDN thread a read.
I just found out that you can use "height" indeed and set it to 100, but not '%' but 'vh'.
height: 100vh;
I am doing a padding for my body tag like this because I am using a nav bar fixed top. I want the nav bar to always stay on top.
body {
padding-top: 70px;
}
Now I want to add a background image to the body and want it to cover the entire screen. So I do this.
body {
background: url(background.jpg);
background-size: cover;
}
But the problem is that the nav bar covers parts of the image, the 70px padding is not working on the background image. Please help fix this.
Position the background 70px down using the offsets available in background-position
Background-Position # MDN
body {
background-image: url(http://www.fillmurray.com/g/200/300);
background-position: top 70px center;
background-size: cover;
background-repeat: no-repeat;
}
By default, background does cover the padding, yes.
So one possible solution would be to use background-origin to tell the browser the background should start in the upper left of the content, rather than the padding area.
html {background:white; height:100%}
body {
box-sizing:border-box; min-height:100%;
padding-top:70px;
background: url(http://www.fillmurray.com/g/200/300);
background-origin: content-box;
background-size: cover;
background-repeat: no-repeat;
}
This one would have the advantage of being dynamic; i.e. you wouldn't need to change its value if changed the value of the padding.
I'm trying to make a GIF fit my whole screen, but so far its just a small square that is on my screen while the rest is white. However, I want it to take up all the space.
Any ideas?
if it's background, use background-size: cover;
body{
background-image: url('http://i.stack.imgur.com/kx8MT.gif');
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
IMG Method
If you want the image to be a stand alone element, use this CSS:
#selector {
width:100%;
height:100%;
}
With this HTML:
<img src='folder/image.gif' id='selector'/>
Fiddle
Please note that the img tag would have to be inside the body tag ONLY. If it were inside anything else, it may not fill the entire screen based on the other elements properties. This method will also not work if the page is taller than the image. It will leave white space. This is where the background method comes in
Background Image Method
If you want it to be the background image of you page, you can use this CSS:
body {
background-image:url('folder/image.gif');
background-size:100%;
background-repeat: repeat-y;
background-attachment: fixed;
height:100%;
width:100%;
}
Fiddle
Or the shorthand version:
body {
background:url('folder/image.gif') repeat-y 100% 100% fixed;
height:100%;
width:100%;
}
Fiddle
You can set up a background with your GIF file and set the body this way:
body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}
Change background image URL with your GIF. With background-position: center you can put the image to the center and with background-size: cover you set the picture to fit all the screen. You can also set background-size: contain if you want to fit the picture at 100% of the screen but without leaving any part of the picture without showing.
Here's more info about the property:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Hope it helps :)
if you're happy using it as a background image and CSS3 then background-size: cover; would do the trick
This should do what you're looking for.
CSS:
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
HTML:
<div class="gif-container"></div>
In your CSS Style tag put this:
body {
background: url('yourgif.gif') no-repeat center center fixed;
background-size: cover;
}
Also make sure that it's parent size is 100%
I want to set height 100% and width overflow to an image, so that on every screen the TOP Menu (Red Buttons) and the Footer Menu can be reached easily.
Left hand side and right hand site can overflow.
I tried
.stretch {
width:100%;
height:auto;
}
Withouth success. And changing values makes the image fullscreen and has not the desired effect.
Any Ideas?
Here's a fiddle: http://jsfiddle.net/H75BT/2/
Edit:
From Bigood's answer, I need this one to be centered : http://jsfiddle.net/H75BT/1/
Apply a 100% height on html & body, and define that your .stretch will adapt its height to the height of the body, and recalculate its width to keep the proportions :
html, body {
margin:0;
padding:0;
height:100%;
overflow-x:hidden; /* Add this to prevent the body to adapt its width if you need */
}
.stretch {
width:auto;
height:100%;
}
Working demo
Edit
You can make it centered by using CSS's background:
.stretch {
background-image: url("http://bockt.de/link/home.jpg");
background-repeat: no-repeat;
background-position: center 0px;
background-size: cover;
height: 100%;
position: relative;
background-origin: padding-box;
}
With a <div class="stretch"></div>.
Centered image demo