I am trying to make by background image fit to the screen, but I'm not sure what to add to my code.
<body background= "b.png">
If anyone could suggest what to put and where that would be great.
Apply the following CSS to your body tag in your stylesheet. You can change the value of the properties to match how you want you background to look.
body {
margin:0;
padding:0;
background-image: url(b.png);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: top center;
background-size: cover;
-webkit-background-size:cover;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
position:relative;
}
As mentioned in one of the comments, put this into the CSS:
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
Related
I have a banner div:
<div class="background" style="background: url(<%= #banner.image.url(:big) %>) no-repeat"></div>
and corresponding css:
#banner {
width: 100%;
height: 275px;
}
#banner .background {
width: 100%;
height: 275px;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
uploader.rb:
version :big do
process resize_to_fill: [1920, 280]
end
On smaller devices, the background-image is cropped, here are the screenshots. Full width:
And a resized window:
Is there any way to make the image be resizable when the screen width becomes narrow? Thanks.
Just use background-size: contain for this
#banner .background {
background-size: contain;
}
try background-size: 100% auto;
I try to set background image for body like as:
body {
background: url("http://beerhold.it/1024/800") center bottom;
z-index: 10;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
But It displays image only partially
html {
height: 100%;
}
add this as well. by default the height of html is set to auto so body height can't be 100% unless you set the height of html
Do u use height: 100%. This height based on height of inner content. Not a parrent block.
body {
background: url("http://beerhold.it/1024/800") center bottom;
z-index: 10;
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
Add this to your code
background: url("http://3ksks.com/pic.jpg");
background-size: 100% auto;
body {
background: url("http://beerhold.it/1024/800") center bottom;
background-size: 100% 100%;
background-repeat: no-repeat;
background-size: cover;
}
What I need (and failed) to do is website like in this picture:
Website need to be full screen and no scroll.
I'm not satisfied with results, because:
-when website is opened on vertical screens (smartphones) the bottom border is too big
-I also tried to make this background image to show fully top and bottom (I want to faces at top and bottom to be seen in full, not just partly), but I don't really know how to do it.
My CSS code:
html
{
background: #f36d32;
width: 98%;
height: 95.9%;
padding: 1%;
}
body
{
background: url(http://web-industry.eu/landing/img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
Ok, the border problem is solved by #imGaurav with such a code:
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
But I still can't figure out how to make both top and bottom faces to be visible.
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
So you just want the full size image to scale with different with different screen sizes?
In your css on the image div try:
background-size: contain;
If that is not what you are after, here is a link to all the property values you can use and test out.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Add below CSS to your HTML body
position: absolute;left: 0;top: 0;
Did you mean somethink like that?
<div class="vertical-container">
<div class="vertical-middle">
<img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png">
</div>
</div>
html,body {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
.vertical-container {
background-color: green;
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.vertical-middle {
height: 100%;
vertical-align: middle;
display: table-cell;
}
https://jsfiddle.net/org72bfb/1/
You can use the following css to solve the problem. Reference CSS-trick
html {
background: url(http://i.stack.imgur.com/zRKcX.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body
{
background-image: url('../Media/bg3.jpg') ;
background-repeat: no-repeat;
background-size: 100%;
}
bottom of the image is not fit into the screen. I have added background image in css body tag. Width is perfect.But height is not fit into the screen. I saw many examples.but it is not coming.
These two lines are enough to fix and stretch a background image !
body{
background:url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat fixed;
background-size:cover;
}
JSFIDDLE : -FIDDLE DEMO HERE
U may use following code
body
{
background-image: url('../Media/bg3.jpg') ;
background-repeat: no-repeat;
background-size: 100%;
height:100%;
}
try background-size: cover, it should fit screen
You can set following properties,
Check this Demo jsFiddle
CSS
body {
background: url('../Media/bg3.jpg') no-repeat center center fixed;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
CSS
Check this Demo jsFiddle
background-image: url('../Media/bg3.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
background-attachment: fixed;
Add your background image as
background: url(../images/your_image.jpg) fixed no-repeat center center;
background: url(../images/your_image.jpg) no-repeat center center; /* if you don't want it fixed */
for divs inside it use this for complete center
width:100px;
height:100px;
position: absolute;
text-align: center;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;
Now it is working.
body
{
background-image: url('../Media/bg3.jpg') ;
background-repeat: no-repeat;
background-size: 100%;
height:870px;
background-image: url('../Media/bg3.jpg');
}
footer
{
position: absolute;
bottom: 0;
}
Now it fit the full screen.Thank you
remove body tag css class
and add html class to do that
this is the code
`html {
background: url('../Media/bg3.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
`
I'm trying to have a large background image stretch to the size of the browser window when a user first goes on the site. From this they navigate down through the rest of the site but you don't see it regardless of the size of the browser window without scrolling ( http://whiteboard.is is a good example of this ).
I'm using the code below and while it stretches horizontally it won't stretch vertically past the min-height. Any ideas?
HTML
<body>
<section id="first-section">
</section>
</body>
CSS
body, html {
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
#first-section {
background: url(1.jpg) no-repeat center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 1024px;
min-height: 768px;
}
May be you can write height:100% also.
#first-section {
background: url(1.jpg) no-repeat center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 1024px;
min-height: 768px;
height:100%;
}