I'm using a full sized background via:
background: url(/static/img/background/my_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Q1. When my page expands to show extra content, the bg jumps to get larger, is there a way to stop this?
Q2. What would be a good work around or fallback for cover bg's for IE7-8?
Thanks
Correct me if I am wrong, but I am assuming that you are trying to keep your background image from expanding/moving vertically, right? If that is the case, then maybe this CSS will do what you want it to:
background-image: url('/static/img/background/my_bg.jpg');
background-size: auto 1080px;
background-position: center top;
background-repeat: no-repeat;
The background vertical size is set to 1080px but you can set that to whatever you want just so it is a static value ( The auto* value for width will simply preserve your image aspect ratio ). That should keep the picture from scaling. Using Center Top for positioning instead of Center Center should keep your picture anchored at the top middle so it wont shift downward if the page is expanded vertically.
If you want the image to scale down but only scale up to a certain point I think you will need to use a Div Tag to encompass your whole page and set the image as a background of the Div. From there you should be able to set your image to scale and also set max-width and max-height.
If this doesn't help, more information about the effect you are trying to achieve would be appreciated. :)
Related
all.
I am trying to set an image as the background inside a div container which will always have the dimensions of the screen of the device. For this purpose, I am providing the css as follows
.outer {
height: 100vh;
background-image: url(demo_top.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
<body>
<div class='outer'>
</div>
</body>
The positive of this code:
-Image quality is maintained.
The negatives of this code:
-Background image is not responsive as the focus is only on centre
-The top and the bottom part of the images are cropped because the position is used as the centre.
What I am looking for is my div to display the entire image without any cropping or image stretching or distortion.
The image size I am using is 2000x2000
If you want the image to have the same dimensions as your container, you have to use the same image proportions. In this case, the container must also be square (1x1). If the proportions of both elements are not equal, the only solution is to stretch one side of the image or to cut it.
https://developer.mozilla.org/es/docs/Web/CSS/object-fit
Instead of background-size: cover, you need to use contain. This will allow the image to be as large as possible without cropping outside the div and with no stretching/distoring.
-webkit-background-size:contain;
-moz-background-size:contain;
-o-background-size:contain;
background-size:contain;
I have made a background image, 1366px wide and 768px high, which I want to use as background for the main page of my website.
I have each page of my website divided in sections, using the FullPage plugin.
This is the main page so I'm using just the first section.
What I've tried so far is adding this CSS code to the #first section of my main page:
#first{
width: 500px;
height: 500px;
background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unfortunately the image gets displayed just partially. In fact it's a little shorter than it actually is.
I read the documentation for the background-size attribute, and at the cover attribute it says:
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
So basically how can I make my background-image fit the screen size? Considering the mobile side I think it would be better to fit just the width of it. I'm open for suggestions and help!
Take a look over here: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari
Good luck!
I have a design that I'm converting to be Bootstrap responsive but have run into a couple of problems.
How to make a non full width background image responsive
How to keep the main form content the correct distance away from the top of the image no matter what the viewport size.
Mock up image
Website
I'd be very grateful for any pointers
The following is one simple option, according to your mockup-Website.
Create a parent DIV that is center aligned on the page.
Apply a background image to this DIV and set its max-width to 100%.
Create another div that will sit on top of the parent DIV (and is relative to the parent DIV).
Give its top margin the required %.
It is recommended that you create these styles on media queries for responsive display.
There are a lot of StackOverflow topics the will help you through with the above steps.
HTH.
To fix problem 1: on the body you can use: background-size:contain;
First, for the background image:
div.someclass{
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;
}
This will make your background image responsive, i.e. it will fit according to the size of the display the page is viewed on.
Second, to keep the main form content a proper margin from above on any device is to give the div you just created for the main content a relative margin on top:
div.someclass{
margin-top:5%;
}
change the above 5% according to your requirement.
I have a problem with html and css.
Today, for the first time, I've tried to make a page with a big image for the background.
I'm using foundation framework, and I'm stuck on one thing. As we know foundation is a adaptive framework and when I re-size my browser, I've got a bug.
You can see it on my screenshot: https://imgurhd.ru/i/270a.jpg (also here you can find my css).
I need to make the text and image under menu vertically centered on any screen size.
I'm using position relative with a percent value, as you can see. So please help me to find where is the problem.
You can set the background size to cover.
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.
html {
background: url(/*YOUR IMAGE HERE*/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This is supported in most recent browsers
I am trying to create a full background website. Now i am working with 1920*1080 resolution screen. But i have to fit the background in any resolution. I use the following css
html {
background:#65b5cc url(webbg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But this is not re-size the background when browser re-size, and one more doubt is i use the background as jpg image size is 1627*768 . is that the right size. I want to show vector type drawings as my background, so want to get maximum quality in less size. Guide me.
Thanks
Use this property "background-size:100%"
Try this:
html, body {
background: url(http://placeskull.com/100/100/) no-repeat center center fixed #65b5cc;
// Make sure your SVG image expands to the whole window/page.
background-size: 100% 100%;
}
If you use an SVG image, its actual dimensions doesn't matter since it's a vector file, so it can scale to any size without loosing quality.
See Example