This is the code that I am using in my html. I know i have linked my style sheet properly because the rest of the styling works. So I have no idea why this specific background image just does not work in my code. It does not display anywhere on the webpage when I try to load it up so i honestly have no idea what is wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="showcase">`
</header>
</body>
</html>
This is in my css. I have triple checked that the name of the image correlates and it is definitely in a images folder in my main folder but I just do not understand why this is not working. I am a bit new but I am still confused.
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url('../images/background.png') no-repeat center center/cover;
}
The answer is that you are putting the values no-repeat center center/cover under the background-image property, instead of the background property. It should actually look like so:
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url('.../images/background.png');
background: no-repeat center center/cover;
}
That should work. If not, try changing the position to absolute or auto. If all that doesn't work, try changing the center/cover to just center or cover.
Thank you for the help I managed to sort it out and it is working fine now. I removed the ../ from my background-image: url('../images/background.png'); and I changed my center/cover to just cover as the second center was causing it to not work. My new code now looks like this and is working perfectly.
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url('images/background.png');
background: no-repeat center cover;
}
the answer is i had to put one more / in the path and dont know why,example
background-image: url(/destinationfolder/imagename.jpg) not
background-image: url(destinationfolder/imagename.jpg)
i wanna make a full screen background and the code is so simple however it didnt work can any body catch the problem ?
here is the HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg">this is our div</div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
and thats the css code
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
}
.bg {
/* the proper height for the image */
height: 100%;
background-image: url('cover.jpg'); /* the use image location */
background-repeat: no-repeat;
background-size: cover;
}
You almost certainly need background-size.
Keep in mind that a user with a 4K monitor is going to be rare compared to someone on a mobile phone. So be sure to use CSS Media Queries once you get to the last step of adding mobile support. You're the one looking at the screen to judge how you need to use background-size so be sure to tinker with the options in the developer tools; just resize the browser window down until the mobile effect takes effect. You can also use units such as percentages (background-size: 100% 100%;). Good luck!
.bg
{
background-image: url(images/bg-desktop.png);
background-size: contain;
}
#media (max-width: 1024px)
{
.bg
{
background-image: url(images/bg-mobile.png);
background-size: cover;
}
}
Try with setting min-height of body or div element to 100vh
body{min-height:100vh;}
Possible problem: The image should be in same directory as your css file since u are using relative path.
I am trying to place an image in the centre of the screen (a cell phone) and I also have a large logo image that I want to be anchored to the bottom right of the page. I am very new to CSS and HTML. So far I have this:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="content">
<p class="centeredImage"><img src="image1.png"></p>
</div>
</body>
</html>
and this in the CSS:
#content {
width: 99%;
height:100%;
margin: auto;
background-color: white;
background-image: url('logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
}
.centeredImage
{
text-align:center;
display:block;
}
However I achieve this:
The phone is centred fine however if I resize the window the logo wont stick to the bottom right of the screen. I have played around with using a footer a little bit but when I do this the logo image is below the cell phone image. I just want it to be in the background bottom right no matter how big the window is with the cell phone image centred. Could someone give me some pointers on how to do this please? Thanks!
EDIT so I have wrapped the logo image in a separate div:
.logo {
position: fixed;
bottom: 0;
right: 0;
}
however this now overlaps the centered image slightly ie is not in the background
Why don't you add this in your CSS file and remove div from HTML.
body {
background-image: url('file_location.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
Example: FIDDLE
Background position can be anything like left bottom or right center.
Perhaps attempting to use the logo as a background image isn't the best approach. Why not stick the image in absolute positioned div at the bottom right?
I have an image which i need to stretch whole body so i don't know what is best way to do this
html{
/*background image properties*/
}
or
body{
/*background image properties*/
}
body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
This would be the best way, you could apply it to the HTML, it really depends on what you prefer...
background-image:url('../images/background.jpg');
Assuming your css file is in a different map, you do ../ to go to the map in which your css folder is placed, then you go into the images file and select the image.
background-attachment:fixed;
When setting a background-image I personally like to use this, it makes it so that when a user scrolls, the background-image maintains it's current position.
background-repeat: no-repeat;
When using this setting, it makes it so that the image won't repeat, in case it is too small or just won't cover the whole background.
background-size: cover;
When you apply this you will set the background-size to cover, combined with no-repeat and attachment: fixed it makes for a good way to style your background image
As per the CSS 2.1 Specs here: http://www.w3.org/TR/CSS2/colors.html#background
For HTML documents, however, we recommend that authors specify the
background for the BODY element rather than the HTML element. For
documents whose root element is an HTML "HTML" element or an XHTML
"html" element that has computed values of 'transparent' for
'background-color' and 'none' for 'background-image', user agents must
instead use the computed value of the background properties from that
element's first HTML "BODY" element or XHTML "body" element child when
painting backgrounds for the canvas, and must not paint a background
for that child element....
Hence, it is recommended to use a background on body (rather than on html).
If you want a background-image to stretch the whole container (i.e. body), then you could use the style:
background-size: 100% 100%;
If you want to preserve the aspect ratio, then you could use cover to make it cover the full container, or use contain to keep it within the container boundary. When you use contain, then depending on the aspect ratio of the background image, you could end up with white-space below or after the image ends (letterbox).
background-image: url('...');
background-size: cover;
background-repeat: no-repeat;
...
.
body{
/*background image properties*/
}
this would be the best way, since body is the immediate parent of all elements which are visible on the webpage.
http://jsfiddle.net/hxyz2evq/
You can use background-size:contain; to cover all the area with background image
body{
width:500px;
height:500px;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-cover;
background-repeat:no-repeat;
}
Note: Also there is a case I think of:
<html>
<head>
some free data
</head>
<body>
</body>
</html>
here the some free data will get displayed inside the webpage, i.e inside body, so we wouldnt care about giving the background property to html tag,
just using body{//background properties } is fine
Edit:
Though this is not the question for what property should be used here. There can be various things like:
background-size:cover;
OR
background-contain;
OR
background-100% 100%;
The best property which suits your question would be background-100% 100%;
body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
Semantically, I would use in body.
body{
background-image: url(path.jpg);/*wearing a cloth in body instead of heart*/
}
Seems to be applied in whole body semantically.
You should target the body tag and apply the background-size property to it.
Like so
body{
background-size: 100%;
}
You can use
body{
background: url("http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg") no-repeat scroll 0 0 #fff;
}
Try this code :
<!DOCTYPE HTML>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>
<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>
Example : Check this
The CSS3 background-size:cover property handles full screen background images, including responsivity, quite well. The below works well for me on all desktop and mobile devices I've tested.
body {
background-image: url(/assets/img/yourimage.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
width:100%;
}
background:no-repeat url(' ') #154454 bottom center ;
background-size:contain;
body {
background-image: url(/_assets/img/zoom-17536689-3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.bk
{
background: url('../assets/imgs/img.jpg') no-repeat center center fixed;
}
put it between the body tags, sample code below
Set two background images for the element:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
The full manual can be read here CSS background-image Property
I am trying to create an full width image above my nav bar, but I cant even get the image to show on screen. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
And the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
I see the jpg made it to my browser and can click on it in my resources, so there is no problem with the path. The screen is still blank and showing nothing. Any help would be awesome.
This is because height:100% is functionally useless, and your div resultingly has no height.
If you give the div a fixed height, the image should appear as expected.
Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.
html {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
http://jsfiddle.net/dolours/JcxLm/2/ Give a specific height, Height 100% is meaningless
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 50px;
}
try this <div class="wrapper"></div>
It is possible that the image isn't showing because there is no content within the div and therefore it's size is 0. Try setting the width and height to a set size, something like 200px to test out this theory. Also I would change your code to:
<div class="wrapper"> </div>
you can use css for body tag, the css of body will be like this:
body{
background: url(../assets/bridge.jpg) center top no-repeat;
}
i think it will work for you, if you want just background image.