Client doesn't want his imagery covered by the sticky footer, but wants the background image slideshow to scale with the browser.
Possible?
You should be able to simply replace
background-size: cover;
with
background-size: contain;
There seems to be enough whitespace in the images for the footer not to obscure it in any way by using contain. cover, on the other hand, stretches the image as much as it can in order to cover the entirety of the div, which in turn is stretched to cover the whole page.
Related
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.
The background image I have setup works fine in web browser, it stays static, but on mobile the background is constantly changing depending on the height of content?
When the content is short on mobile the background isnt zoomed in but basically shows the left Third of the photo. When the content is long paragraph it is a much more zoomed portion of the first third of the photo.
I am currently using the current css
background-image: url("/images/midgame.jpg");
background-size: cover;
background-attachment: fixed;
overflow-x: hidden;
If you do not want the background image to zoom in or out, remove the background-size: cover
Also try background-position: center top
Set explicit dimensions so that the background image appears when there is little or no content. Set height:100%. Might have to set width as well.
EDIT:
Remove background-attachment:fixed
Add min-height:500px or whatever number you wish.
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'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. :)