I have an image that I am showing on a page. Here is my css:
body {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
When I do this, everything shows just fine. I then try to show the same image in a div. Here is my html:
<body>
<div class="background-image"></div>
</body>
And here is my new css:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
But now nothing shows. I look in my network tab and I see that the image is available, but it is not showing on the page. What am I doing wrong?
It's because the div is 0 pixels tall, give it some height, for example:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: 100vh;
}
Since you are only using background you need to set a height/width on the div itself.
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: */Your Value/*;
}
I would suggest remove background-size: 100%; .. instead add height and width as 100%.
body {
background: url(./../imgs/beach.png) no-repeat;
height: 100%;
width: 100%;
}
Related
I am currently positioning a background image that is small in height but large in width to stretch all the way across the browser. I am only able to achieve this when I do background size cover, but not when I set a certain size to the image other than cover. I tried background repeat-x but that does not seem to work either.
<html>
<body>
<div class="background">
<div class=“header”></div>
//some content
</div>
<footer><footer/>
</body>
</html>
CSS
.background {
background-image: url(some image);
background-size: //tried cover and it works but not when I set it to width 100% or something like 2800px
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
Just add background-size: cover code in css will resolve the issue.
.background {
background-image: url(some image);
background-size: cover;
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
It is working with background-size:100%;
.background {
background-image: url("marakele-elephant1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;
}
html, body{
height: 100%;
}
body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
div, body{
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
<div class="wrapper">
<div class="message"></div>
</div>
Not very related to this question but I hope this answer will save someone's time
For the people who are using bootstrap. Keep the image inside a container, check again if it is inside class="container", I had a typo, I wrote classs instead of class and the background image wouldn't fit.
Second, close previous divs.
Third, if you don't use container and start with just <div class='row'></div>, background image won't fit.
Working Example:
<div class="container" style="background-image: url('img'); background-size: cover;">
<div class="row">
</div>
</div>
I'm curious if the CSS unit vw (view width) will accomplish what you are trying to do with width: 100%
Instead of width: 100%, try width: 100vw
https://www.w3schools.com/cssref/css_units.asp
I'm trying to have a HTML image fit a page(the whole body) so that it will auto-stretch if more content is added (overflow). I don't want to have an absolute positioned image. I've been trying this for 3 days, but I can't get it working.
Please use only CSS and HTML.
Thank you!
set height of html to 100%
body {
background-image:url("path/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%;
}
body
{
background-image: url('path/to/image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
html
{
height: 100%;
}
body {
background-image: url("http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg");
background-size: 100%;
}
only this much code is enough
I'm setting up an image that would change when you hover over it. I want the image to be adjustable so that it is full screen on any screen. Instead of putting a pixel size I tried to put a percentage size, but nothing shows up. Is there a better way to get that done?
<style type="text/css">
.urlImg {
display:block;
width: 1000px;
height: 848px;
background-image: url('01.jpg');
background-repeat: no-repeat;
}
.urlImg:hover {
background-image: url('02.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<center></center>
</body>
Use background-size combined with width and height of 100% (make sure the body extends to 100% as well):
.urlImg {
display: block;
width: 1000px;
height: 848px;
background-image: url('http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png');
background-repeat: no-repeat;
}
.urlImg:hover {
width: 100%;
height: 100%;
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
html, body {height: 100%; margin: 0}
(see it on the Full Page as well)
You can also play with absolute or fixed positioning (as #abhishek mention in the comment) to make it behave the similar way.
I've found a similar question here but with no answer, yet I can't find an alternative as a solution.
I have the following code and it works perfectly on Mac and Windows, however I can't figure out why on Android (either Chrome or Firefox) the background does not get updated when the user is scrolling down, it produces the space of about 1/5 of the screen at the bottom while scrolling down.
The background image gets updated after you release the touch.
html{
background-image:url(example.jpg);
background-position:fixed;
background-size:100% 100%;
}
Specify a height for your html and body, i.e.
html {
width: 100%;
height: 100%;
}
And
body {
height: 100%;
min-height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
And add a div that will wrap everything inside body, i.e.
<body>
<div id="wrapmeup">
....your content....
</div>
</body>
And finally add this to your css:
#wrapmeup {
height: 100%;
width: 100%;
background-image: url(image/background.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
I'm trying to give my page a full background in its body but nothing is working and the output I'm getting is rubbish.
I've tried everything I could think of, but nothing is doing right. Can you please tell me where my mistake is? (the .jpg is in the correct place)
<html>
<head>
<style type="text/css">
body {
height: 100px;
width: 100px;
background-image:url(background.jpg) repeat fixed 100% 100%;
}
#container {
width: 979px;
height: 100%;
margin: 0 auto;
background-color: blue;
}
</style>
<title> Baisbook </title>
</head>
<body>
<div id="container">
<p> Just saying Hi! </p>
</div>
<p>This is a Test</p>
</body>
</html>
I think yhe image not exist or the image path is not correct.
or try this
background-image:url('background.jpg');
This statement is enough
Is your image able to show up but not filling all the wanted area? If it is then try this sample codes in your body area to see if it works.
body {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
In background-image remove the image put just background and background position is center top....
body {
height: 100px;
width: 100px;
background:url(background.jpg) no-repeat fixed center top;
}
use below code
body {
background:url(your image path) repeat fixed 100% 100%;
background-attachment:fixed;
background-size:100%;
background:url(your image path) repeat fixed center center \9;
/*IE 9*/
background:url(your image path) repeat fixed top 100% /IE9;
background-attachment:fixed /IE9;
background-size:100% /IE9;
}
if Ok with you to used basic css code to apply background-image
Instead of these
body {
height: 100px;
width: 100px;
background-image:url(background.jpg) no-repeat fixed 100% 100%;
}
try this
body {
height: 100px;
width: 100px;
background-image:url(background.jpg);
background-repeat:no-repeat;
background-position:fixed;
background-size:100%;
}
Working demo