This question already has answers here:
Stretch background image css?
(6 answers)
Closed 9 years ago.
I recieved this code looking for how to stretch background image in HTML for the part of my page, but it does not work. What am I doing wrong?
< style type="text/css">
<!--
body {
background-image: url(at4.jpg);
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
-->
</style>
Use background-size: 100%;
This will stretch your background image.
WORKING DEMO
The Code:
body {
background-image: url(http://www.google.co.in/images/srpr/logo4w.png);
background-repeat: no-repeat;
height: 100%;
width: 100%;
background-size: 100%;
}
Hope this helps.
You can use (CSS3):
background-size:cover (will crop) or background-size: 100%; (will stretch)
Cross browser solution (< IE9)
http://jsfiddle.net/4gBXS/
#background {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}
.stretch {
width:100%;
height:100%;
}
In CSS3, you can set the background-size :
body {
background-size: 100%;
}
It will work on Chrome >= 3.0, Firefox >= 3.6, IE >= 9.0 and Opera >= 10.
Here's a JSFiddle some examples of the property.
Related
I need some help regarding CSS, I've been trying for hours to make a background be fullscreen.
This is my CSS:
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
html{
height: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url(../assets/background.jpg);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
And this is my html:
<html>
<div class ="mainContainer">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
</html>
This semi-works the problem is the background stops as soon as my content stops, it does not continue until the end of the browser window.
Example:
I'm trying to make the background go way down there and dynamically resize with my browser.
Your HTML code is missing the body tag. Add that, and also add body { min-height: 100%; } to your CSS - this will also stretch the body height to at least the window's height.
In CSS, 100% is broken when it comes to vertical things. Try 100vh, which is the percentage of the viewing height. Also, 100vw is 100% of the viewing width. There are also vmin and vmax. Hope this helps!!!
A few things:
Like another person said, use a <body> tag.
Add a width of 100%
in background-image rule, you should have single quotes around the URL, so it looks like: background-image: url('../assets/background.jpg');
Lastly, you should be using a DOCTYPE. https://en.wikipedia.org/wiki/Document_type_declaration
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
body{
height: 100%;
width: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<body>
<div class ="mainContainer">
</div>
</body>
</html>
Also...in the Stack Overflow code embed, I don't think you can use custom elements.
Thanks everyone for the help, the issue was from angular material style that was overriding my background-image tag and adding borders to it for some reason.
I fixed it by adding ::ng-deep in front of html css, like this:
::ng-deep html{
background-image: url('../assets/background.jpg');
background-position: center center !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
Also the issue with the background not going full screen was because I was missing the body tag and body { min-height: 100%; }
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'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 have this in my CSS:
.cover .cover-image {
z-index: -1;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-size:100%;
background-size: cover;
background-position: center;
}
I also have this in my HTML:
<div class="cover-image" style="background-image : url('./bkg.jpg');">
bkg.jpg is a 1939x1131 image - bigger than any of my monitors. On my smallest (1280x1024) monitor, it displays fine:
On my medium (1440x900) and large (1920x1080) monitor - both of which are smaller than the image - it shows a bit of white between the image and the scrollbar:
Why does this show, and how do I fix it?
Check your image source
https://chipperyman.com/dota/bkg.jpg
You have a white bar on your image.
double on background-size your code, please fix background-size:100%, otherwise you will get issue.. And i mean you not need using background-size because your image already bigger than your screen..
you need normalize html, body
html, body {
padding: 0;
margin: 0;
}
there.
Basically you are having an absolute positioning bug here. Just add 'left: 0px;' to your .cover .cover-image selector as per following:
.cover .cover-image {
z-index: -1;
position: absolute;
left: 0;
top: 0px;
width: 100%;
height: 100%;
background-size:100%; /* old browser fallback, but I'd delete it */
background-size: cover; /* duplicate of background-size */
background-position: center;
}
Here is also a jsfiddle example of fixing it: http://jsfiddle.net/webyourway/868L6hhg/
In my website and in this page I have a background image for my page. This background image must be fixed. This page works correctly in Firefox, but doesn't work in Google Chrome . the background image css is like this :
.aboutBG {
position: fixed;
width: 100%;
height: 100%;
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: 10;
}
I searched around the web and find some answers like this for using code like below :
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
but it doesn't work
You can not apply background image to div make some good logic
Your css should be looks like
html, body{
height: 100%;
width: 100%;
background-image: url(http://justbeecosmetics.com/img/headImage.jpg);
background-attachment: fixed;
}
#blank{
height:80%;
}
#top{
height: 70%;
background-color:blue;
}
#bottom{
height:50%;
background-color:red;
}
Please check the fiddle here
http://jsfiddle.net/jdmitz/V8WqE/
You have added to wrong position
Easier would be to add:
#container {
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}