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.
Related
I have the problem that on my website, when I scroll fast on mobile, the background image moves up a bit and a white space at the bottom appears, and then disappears again when I stop scrolling.
I've tried a bunch of solutions to similar problems to prevent this from happening, but I haven't been able to solve it so far.
Here's the my css for the background image:
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And a screenshot of the issue:
Try adding the background img to the body aswell like this:
html, body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this code for mobile to the background image show all sides clear images but if your image is big then the image is stretched so first, you need to create a div container to fit your image into the div container.
html, body {
background: url(bg.jpg) no-repeat center center fixed;
background-size: 100% 100%;
}
So, I tried to apply a sticky background to a div which worked. The problem I have now is that it doesn't stretch sufficiently during scroll. This is the CSS I used to apply the background. Here I have some screenshots showing the error.
after scroll:
.site-main {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url("http://areca3000.nl/glissenaar/wp-content/uploads/2017/05/bg-content.jpg")
no-repeat center center fixed ;
/* background-repeat: no-repeat;
background-size: 100%;
padding: 0 0 0 0 !important;
/*max-width: 1220px !important; 8? */
}
The url of the page is http://www.areca3000.nl/glissenaar/ if you want to check it out.
If you want the background to fit its container both vertically and horizontally then you need to change your background-size rule to
background-size: 100% 100%;
Note that this technique will distort your image and it may not look as you want
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;
}
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'm not a seasoned web developer and am quickly hacking up something for fun. I have a web page that has an 1024 x 768 background image (I know that's probably a bad idea) that I can correctly centre if the browser width increases. However, when the browser width decreases below 768px, I want the image to be "centered" along with the width rather than just tacking the top left corner so that the centre of the image is always in line with the other elements on the page.
What kind of CSS magic can pull this off?
Here's my CSS:
body
{
background: #000000; /*Black bg for extra space not covered by img*/
font-family: sans-serif;
margin: 0px;
}
.wrap
{
background: url(../images/background.jpg) no-repeat;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
/*Stretch body all the way to edges*/
/*width: 1024px; /*Min width for site*/
}
Thanks.
follow tutorials for responsive :
http://stephen.io/mediaqueries/
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Take a look at this website
The CSS shown here in the "Awesome, Easy, Progressive CSS3 Way" is almost as the code you have. what you need to change to center the image horizontal and vertical is adding "center center" to the background settings:
.wrap{
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
}
Have you tried :
background-size: 100% 100%;
along with all your other css. This will ensure that the background image that you are using will stretch to fit the screen size(height and width-wise)