A friend of mine has set up a little landing page and is asking me about an issue on mobile (Chrome). The background image (on the body) is set to cover
body {
background-image: linear-gradient(135deg, rgba(14, 113, 184, 0.8) 0%, rgba(28, 22, 53, 0.6) 100%), url("../img/bgvid.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
The background image will render within the full viewport, but if I scroll down, it is kind of cut of, check the images down below to see what I mean (the gray block). He is asking for my help but I really don't know what could be causing this. I tried to remove the footer (and set the body height to 100%), but it did not change anything.
Solved
Fix: Looks like fixed background do not work on mobile browsers. This fixed it:
background-attachment: scroll;
CSS background image to fit width, height should auto-scale in proportion
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I have this element as given below:
<div class="container-fluid main-body" [ngStyle]="{'background-image': 'linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url('+contentService.backgroundUrl+')'}">
<router-outlet></router-outlet>
</div>
In this, the background image is fetched from a RESTful api asynchronously and rendered dynamically, hence the contentService.backgroundUrl.
The CSS for this is as given below:
.main-body {
height: stretch;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
overflow-y: scroll;
}
This works as intended on Google Chrome and Safari. The intended effect is for this container to fill the viewport's full height in which the background image fits. However, Firefox and Microsoft Edge doesn't fill the full height of the viewport hence leaving a very large white section below the image.
this is my first question on here so I'm sorry if I don't quite get the terminology.
I have a background image that is serving as a logo divider for the footer information, which I made 2,400px wide so it would display fully across multiple screen sizes. Only problem is that there is a large bottom scroll to the webpage and I would just like it to constrain to the window width, and show more as someone may adjust the webpage width to be larger, or less and it constrains down to be smaller. The closest I got to achieving this was when it was constrained to the width of the window, but it distorted the image.
This is the CSS I'm using currently, it may contain quite a bit of excess elements that are not helping me, I had scoured google for solutions but resorted to coming here.
footer {
overflow: hidden;
background: url(../img/aperture_labs_bot.png) no-repeat fixed;
background-image: url(../img/aperture_labs_bot.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
background-size: 2400px 68px;
background-size: cover;
background-position: 50% 50%;
}
Have you tried changing the background-size to contain?
footer {
background: url(../img/aperture_labs_bot.png) no-repeat fixed;
background-image: url(../img/aperture_labs_bot.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
I hope this helps...
Try this:
background: url(../img/aperture_labs_bot.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
This way it has the width of the entire screen, and scales when you make the screen smaller.
edit;
HTML:
<footer>
<div class="footer-test">
This text will be placed in the footer div. The div class footer-test will have a full-size background image no mather what width it has.
</div>
</footer>
CSS:
.footer-test {
background: url("http://www.cossumswimschools.co.uk/images/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100px;
}
Let me know!
I have this css code, that creates an triangle and an background image fixed:
.post-wrapper_pic2 {
position: absolute;
width: 922px;
height: 1550px;
-webkit-clip-path: polygon(0 50%, 100% 50%, 50% 100%, 0 50%);
background: url("http://krishnaeverson.com/wp-content/uploads/2014/01/universe.png") center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10px;
}
But the problem is that the image is beeing resized and even though i put a hight quality image as background it appears pixelated. Can you figure what's wrong in what I'm doing?
You were apparently wondering that a CSS property named background-size leads to resizing of the image … so you should’ve just looked up what it does.
background-size:
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
I have to fix by HTML page's background for full width, but the height of the background is not as per my design. How can I fix it?
CSS Code:
html {
background: url(images/body_bg.jpg') no-repeat top left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You're missing a ' in the url
background: url('images/body_bg.jpg') no-repeat top left fixed;
Demo
Use background-size like the one used below,
body {
background-image: url(image1.jpg) no-repeat;
background-size: 100%;
}
Some useful links :
Scale background image style
Stretch and Scale a CSS image Background - With CSS only
I would like to add a background-image (circles in image below) to the body of a website i am working on, I need the image to stay flush against the container(white center with green and red banners in image below) so that even when the browser is maximized or minimized the image will stay flush to the container.
I'm not sure if i'm am saying this correctly so i've placed a visual as reference (below) along with my CSS code(below).
html, body{height: 100%;}
body{
background: #e5e5e5 url('../img/body_bck_lrg.gif') no-repeat -290px 190px fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*background-size: contain;
background-origin: border-box;*/
}
Try this:
body{
background: #e5e5e5 url('../img/body_bck_lrg.gif') center top no-repeat;
}
This should stick the background to the center top of the screen and will fill with #e5e5e5 for the rest of the space if screen resolution it too big.