I use:
<style>
body {
background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
background-repeat: no-repeat;
background-size: contain;
}
</style>
in an attempt to have a background image that always stretches to show the whole image but as I test this, the image turns to be way to small... What is the matter of this?
You need to give the body a height.
html, body {
height: 100%;
}
body {
background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
background-repeat: no-repeat;
background-size: contain;
}
Or you can add a "background div".
#bkg {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
background-repeat: no-repeat;
background-size: contain;
}
<div id="bkg"></div>
This will show the full resolution of the image by taking out background-size:contain
Results
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 want to have a full width background, but when I use background-size: cover, part of it gets cut off. With background-size: contain, it repeats on the right side.
Is it possible to have the full size without cropping or resizing or repeating?
CSS:
.home-3 {
background-image: url("https://imgur.com/a/r9JRp");
background-size: contain;
background-attachment: fixed;
background-repeat: no-repeat;
height: 100%;
}
try this
set background-size to cover
.home-3 {
background-image: url("https://imgur.com/a/r9JRp");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
Did you try this ?
body {
background-image: url("https://imgur.com/a/r9JRp");
background-position: center top;
background-size: 100% auto;
}
You need to add the following CSS:
body, html {
height: 100%;
margin: 0;
}
.home-3{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
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 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%;
}
I set the body to:
body { background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;}
and it displays my background but when i set this code:
body {
z-index: -1;
background: #425b77; }
#myBody {
background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;
}
it just would not display the background and instead just displaying the color i set on the body tag.
Any idea how to solve this?
Edit:
When i look at this code on another webpage i have it works correctly and i have written the exakt same thing.
This is my result from code at the second line:
https://www.dropbox.com/s/ioo1cnfszdzh0wu/Skärmavbild%202014-03-07%20kl.%2018.44.33.png?m=
This is the result i get from the code at line 8 and downwards:
http://www.dropbox.com/s/d8wjnwt346gzdv3/Skärmavbild%202014-03-07%20kl.%2018.44.02.png?m=
Edit:
If i add content inside the <div id="myBody"></div> then it will be blurred too because i want a blur filter on it.
try this :
body {
background: #425b77; }
#myBody {
background:url(your picture) no-repeat center center scroll;
background-size: cover;
-moz-background-size: cover;
width:50%; height:50%;
display:block;
position:fixed;
z-index:1001;
}
this is just example... change position width and height as you wish
You forgot to add Height and Width (or add the content do that div).