I want a image to fill the browsers and these are html side code
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
</body>
</html>
since I want the image to be occupied fully in screen i declared it inside the body in css like this but sadly image is not appearing in the screen
body{
background-image:url('../img/bgmapsimage.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
yes the image name is correct and location is correct as well.This is the link i refered link
Check out this link: https://css-tricks.com/perfect-full-page-background-image/
body{
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;
}
You can also use vh to have full height image no matter the screen size.
To test your CSS, try to change the URL in this line
background-image:url('../img/bgmapsimage.png');
to an absolute URL of which you know it will work, like
background-image:url('http://placehold.it/400x300');
If this image is shown, your original image path is the problem (the folder structure which your HTML, CSS and image files are in). If it's not shown, most likely your CSS code itself is the reason.
Your body element is empty and therefore has no height.
if you add a minimum height, you'll see the image:
body{
background-image:url('../img/bgmapsimage.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
min-height: 200px;
}
Update your CSS as like below
body{
background: url('../img/bgmapsimage.png') no-repeat center center fixed;
-webkit-background-size: center;
-moz-background-size: center;
-o-background-size: center;
background-size: center;
}
OR
body{
background: url('../img/bgmapsimage.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can also add css for html tag
Example
html{
/*Your CSS*/
}
Here is some CSS tricks for full screen background image CSS Tricks
body{
//backround image and all
background-size: cover;
}
Though it depends on the size of the image you are working with.
Related
How am I able to put a background image in my header on my website. I'm having trouble sizing it the correct way and making it a background image.
An example would be this website:
http://crossfitweightlifting.com/
Thanks!
I would have been good if you could share what you have currently but try to apply some css to the image in header as below
.header img {
position:absolute;
top:0;
left:0;
min-width:100%;
}
this will try to make the image occupy the entire space.
just add this into your css:
header{
background: url("yourImage.jpg") center center fixed;
/*OPTIONAL*/
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
html {
background : url(../images/20141105_183642.jpg) left top no-repeat fixed;
background-size : cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<style type="text/css">
body {
background:url (../images/20141105_183642.jpg) #000000 no-repeat left top;
background-size: 100%;
}
The text and links are all right so far, so I will only include the background CSS section. Before I moved my html and css into organised folders (and the above is just a part of my University assignment, in which I'm having trouble with.) Could I receive some enlightenment for where I went wrong? As my Index page is not fully loading, and I'm starting to pull my hair out on this one. Many thanks!
CSS rules must be enclosed in the <style> tag (which should be closed with a </style>) if they are not in external files..
<style type="text/css">
html {
background : url(../images/20141105_183642.jpg) left top no-repeat fixed;
background-size : cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background:url (../images/20141105_183642.jpg) #000000 no-repeat left top;
background-size: 100%;
}
</style>
You should remove <style type="text/css"> from your snippet; you say you moved your css and html into organised folders, I assume you moved it into a .css file?
If so, you can import it, assuming it's in the same directory, into your .html file with:
<link href="styles.css" rel="stylesheet" type="text/css">
You should place that line in between the <head> and </head> tags in your html document.
I have a background image for my website, and when I sourced the image in Html it tiles across the page and stops in the same place. How can I resize the image to fill the window and scroll down the page so that the text and stuff just appears to be travelling up the page?
I've used the code in your answer and the image shows and isnt tiled but it repeats down the page instead of scrolling down?
<body background="D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg" background style="fixed">
<style type="text/css">
html{
background-image: url(D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg) no-repeat center center fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
There's the script I'm using.
*Updated with jsFiddle: http://jsfiddle.net/q5WKg/1/
To stop the background from repeating you want to do in your CSS:
background-repeat:no-repeat;
To have the background always fill use the css3 property:
background-size: cover;
Because its not been widely implemented you will probably need to use vendor prefixes:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
In addition to your comments - in full it would look something like this:
<style type="text/css">
html
{
background-image: url('path/to/imagefile.jpg');
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
If your background image was on the html element.
*Update 2
I would correct your code above, move your style declaration in to the head of the document (although where you put it will work fine in most browsers) and remove any info regarding the background image from the body tag.
Also the url you are providing is an absolute path to the file on your computer - you need to be using relative paths really, and not paths that are dependant on your computers file structure, I'm assuming that the HTML document is in the same folder as "Background copy.jpg". Therefore your code should read as follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{
background: url('Background copy.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
}
</style>
</head>
<body>
CONTENT
</body>
</html>
In addition to the updates to your code, I would change the name of any images you use to all be lowercase and to contain no spaces in their filenames - this will save you a lot of headache further down the line...
If you want to better understand how HTML/CSS works, and how to structure them properly I would read up at w3cschools, they have the option to "try it yourself" on a lot of pages which means you can see how the code should be structured and test out different things with CSS & HTML.
w3schools css tutorials - http://www.w3schools.com/css/default.asp
Probably this:
html {
background: url(images/your_file.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
For IE - IE9+ only, other browsers - should work.
Much more info here: http://css-tricks.com/perfect-full-page-background-image/
P.S. You might also be interested in parallax.
Set a few options for your background-image:
html,body{
background-image: url('your/image/path');
background-repeat: no-repeat;
background-size: cover; // this fills up the complete page.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Hope it helps!
https://css-tricks.com/perfect-full-page-background-image/
In this site's version, it works perfectly. here's the code:
html {
background: url("image.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
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;
}
I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.
Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?
My current css is:
body {
background-position: left top;
background-image: url(_images/home.jpg);
background-repeat: no-repeat;
}
Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.
<style>
{ margin: 0; padding: 0; }
html {
background: url('images/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Use the background-size property: http://www.w3.org/TR/css3-background/#the-background-size
In short you can try this....
<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >
Where I have used few css and js...
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
And it is working fine for me.
Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.
Let us know what you end up doing.
Edit: What I suggested is basically what's in gabriel's link. So try that :)
To expand on #PhiLho answer, you can center a very large image (or any size image) on a page with:
{
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.
{
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:
body {
background-image: url('../images/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
background-image: url('myimage.jpg');
background-position-x: center;
background-position-y: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (orientation:portrait) {
body {
background-position-y: top;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
}
The following code I use mostly for achieving the asked effect:
body {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
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;
It works for me
.page-bg {
background: url("res://background");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.
image{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0 3em 0 3em;
margin: -1.5em -0.5em -0.5em -1em;
width: absolute;
max-width: 100%;
Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:
.bg {
background-image: url('_images/home.jpg');//Put your appropriate image URL here
background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}
Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp
Scroll down to the part that says:
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area
There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.