How to make an image as background for web page, regardless of the screen size displaying this web page? I want to display it properly. How?
its very simple
use this css (replace image.jpg with your background image)
body{height:100%;
width:100%;
background-image:url(image.jpg);/*your background image*/
background-repeat:no-repeat;/*we want to have one single image not a repeated one*/
background-size:cover;/*this sets the image to fullscreen covering the whole screen*/
/*css hack for ie*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}
um why not just set an image to the bottom layer and forgo all the annoyances
<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
Via jQuery plugins ;)
http://srobbin.com/jquery-plugins/backstretch/
http://buildinternet.com/project/supersized/
Use this CSS to make full screen backgound in a web page.
body {
margin:0;
padding:0;
background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use the following code in your CSS
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
here's the link where i found it:
Make a div 100% wide and 100% high. Then set a background image.
A quick search for keywords background generator shows this CSS3 produced background pattern that's dynamically created.
By keeping the image small and repeatable, you won't have problems with it loading on mobile devices and the small image file-size takes care of memory concerns.
Here's the markup for the head section:
<style type="text/css">
body {
background-image:url('path/to/your/image/background.png');
width: 100%;
height: 100%;
}
</style>
If your going to use an image of something that should preserve aspect ratio, such as people or objects, then you don't want 100% for width and height since that will stretch the image out of proportion. Instead check out this quick tutorial that shows different methods for applying background images using CSS.
CSS
.bbg {
/* The image used */
background-image: url('...');
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML
<!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>
I have followed this tutorial: https://css-tricks.com/perfect-full-page-background-image/
Specifically, the first Demo was the one that helped me out a lot!
CSS
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
this might help!
I found the reason why there is always a white boder of the background image, if I put the image in a 'div' element inside 'body'.
But the image can be full screen, if I put it as background image of 'body'.
Because the default 'margin' of 'body' is not zero.
After add this css, the background image can be full screen even I put it in 'div'.
body {
margin: 0px;
}
Related
I am trying to make a background image of the particles JS responsible. Thus I used this code:
#particles-js {
margin: 0;
padding: 0;
width:100% ;
height: 100%;
background-image: image-url("rub.jpg");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
but when I resize my browser I get this result:
Which in my opinion is too small in height. I used the image background-size: cover because it is what is recommended to make the background image responsive but it does not fit well.
My question is if it depends on the original size of the image or I am doing something wrong? and if there is any specific way to make the background really responsive? In other words to make the image background fit the maximum height and width of the screen of the the different mobile devices?
See if this helps: http://codepen.io/panchroma/pen/ggMYBQ
The key detail is to apply the background image to an element that covers the full height of the screen, eg html
CSS
html{
background:url(https://images.unsplash.com/photo-1440804518589-c0bbe09a8103) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I need help to make my background fit properly.
I want the whole image to show and be stretched if i use full-screen window.
The image is smaller than my monitor, so when I try to stretch it, it only zooms-in.
I'll show you the image.
Image can be seen here:
http://i.imgur.com/DDsTag7.jpg
My code so far (CSS):
body {
background-image:url(Ranger_with_Tusks_of_Killed_Elephant.jpg);
background-size:100%;
background-repeat:no-repeat;
height: 100%;
width: 100%;
}
It completely ruins the background image on my size of screen: 1920x1080
How can I make it show the WHOLE image no matter what size?
Only using CSS preferably.
My code works great AS LONG AS the window size doesn't exceed the width/height of the image. Try my code and see for yourself, it doesn't show the full image. It's like it zooms-in.
just use code below
html{
background: url(Ranger_with_Tusks_of_Killed_Elephant.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
I think what you are looking for for is background-size: cover;
Right now when you go to this link:http://rawgallery.us/user/login
the background is cut off. It should look like this picture no matter the resolution of the browser window: http://rawgallery.us/CarlisleBackDropWallRoom.png
I am still learning CSS, so I used this code that was suppose to cover the background everywhere, which works :
html {
background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
my #page is setup like this:
#page {
margin-left: auto;
margin-right: auto;
min-height:960px;
min-width:960px;
max-height:1200px;
max-width:1200px;
}
Does the html tag override the page tag?
Can someone tell me how I can view the whole background image if the browser window is 500x700 or 1200x1500 for example?
Thanks!
You may prefer background-size:contain, which fits the background image into its container rather than attempting to cover both width and height of the container.
From the MDN docs:
["contain"] specifies that the background image should be scaled to be
as large as possible while ensuring both its dimensions are less than
or equal to the corresponding dimensions of the background positioning
area.
Here's the CSS:
html {
background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
Here is a working example.
Please note the browser compatibility of background-size.
I'm not a seasoned web developer and am quickly hacking up something for fun. I have a web page that has an 1024 x 768 background image (I know that's probably a bad idea) that I can correctly centre if the browser width increases. However, when the browser width decreases below 768px, I want the image to be "centered" along with the width rather than just tacking the top left corner so that the centre of the image is always in line with the other elements on the page.
What kind of CSS magic can pull this off?
Here's my CSS:
body
{
background: #000000; /*Black bg for extra space not covered by img*/
font-family: sans-serif;
margin: 0px;
}
.wrap
{
background: url(../images/background.jpg) no-repeat;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
/*Stretch body all the way to edges*/
/*width: 1024px; /*Min width for site*/
}
Thanks.
follow tutorials for responsive :
http://stephen.io/mediaqueries/
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Take a look at this website
The CSS shown here in the "Awesome, Easy, Progressive CSS3 Way" is almost as the code you have. what you need to change to center the image horizontal and vertical is adding "center center" to the background settings:
.wrap{
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
}
Have you tried :
background-size: 100% 100%;
along with all your other css. This will ensure that the background image that you are using will stretch to fit the screen size(height and width-wise)
I am just trying to set my background but this image will not work. It is between 15 to 20MB in size so I tried to turn it into 5MB. Still no luck. I made a really small image, 25KB size, and that worked but just repeated. My localhost will not show big images either. Is there some limit? What do I need to do to get a full image page?
body {
background-image:url(background.jpg);
}
Do this to avoid repeating the image:
body
{
background-image:url(background.jpg);
background-repeat:no-repeat;
}
You can also experiment with background-size: cover like this:
body
{
background-image: url("http://www.google.com/doodle4google/images/carousel-winner2012.jpg");
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
Here's a demo at JS Bin with a beautiful Doodle 4 Google as the background image to test the behavior:
http://jsbin.com/ivexah/2
you need to assign a width and height to body.
for example:
html, body {
width: 100%;
height: 100%;
}
You can use the shorthand background css property:
background: url(background.jpg) no-repeat;
Also your body might not have a height of 100% because there's no content on your page. Either give your html and body a height of 100% or add more content to your page.
To make a background image cover its entire container use background-size:
background-size: cover;
IE8 and lower don't support this. For those browsers you need a javascript fallback. There's an excellent article on css-tricks.com that shows different techniques.
You shouldn't have any "size" limitation on your background image. More than likely, you're file is so large that you are not waiting long enough for it to load OR you have not set a width and height. Without the dimensions, the element tahat you are trying to load the background image will essentially have a size of 0px x 0px. See the following jsfiddle example:
http://jsfiddle.net/GymxW/1/
The HTML:
<div class="container"></div>
The CSS:
.container {
width: 400px;
height: 100px;
background-image: url(http://dummyimage.com/400x100/4d494d/686a82.gif&text=background+image);
background-repeat: none;
background-position: 0 0;
}
IMPORTANT: If you are wanting to have an image that is "stretched" to the full size of the viewport, a simple solution is to use a plugin, such as Backstretch.