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.
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 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
My question is:
Is there any possibility to make something like responsive background ?
What I mean is if there is a possibility that if I go to my website from the mobile phone (e.g. 840px width) my background will automatically fit to my screen but other content from my website will have the same size? And other question is if I can stop it on... lets say 1920px width ?
I don't really have any code yet. I'm just asking. Thank you for your responses.
You can use
.class{background-size:auto auto;}
#media screen and (max-width 1920px){
.class{background-size:100% auto;}
}
Its hard to fully understand what you're asking for here, but a general tidbit of advice: try out the css property background-size: cover. This will cause your background image to take up the entire width and height of its container, maintaining aspect ratio and cropping in either direction as necessary.
Its pretty smart, and has pretty good browser support. More info can be found at the link below:
ref: CSS-Tricks: Perfect Full Page Background Image
You can apply a fixed wrapper for the "background" image with 100% width/height. Tha bakground should be used as a normal image, resized according to it's parent wrapper. The content can be inside another wrapper overlaying the previous one.
You can use the css background-cover property as this will automatically re-size your image to fit the browser. If you could even use media query to serve up different sized image so it would take up less bandwidth and look better
html,body{
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover;
}
I'm trying to create a responsive site using Bootstrap that has multiple full-width background images.
Here's a mockup of how it should look:
The idea is for each image to stretch to the width of the browser window, and then the height to be scaled accordingly to preserve the aspect ratio.
I've put up a JSFiddle of what I've got right now:
http://jsfiddle.net/SeFVV/
Currently, I've got multiple <section> tag, and I'm setting a background image with background-size: cover on each:
#first {
background: url(http://placehold.it/1350x890/37FDFC/&text=photo1) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
/*height: 800px;*/
/*padding-bottom: 200px;*/
}
As a hack, I'm setting min-width for each so it's not really responsive.
If I don't set min-height, then each simply shrinks to fit the elements inside, which is not what I want.
In a previous question, the answer suggested using multiple Bootstrap containers - are you meant to have multiple container divs normally? Also, that answer didn't really cover how to make it responsive, so that the width would fit, and the heigh would scale to preserve aspect ratio.
You can use dynamic height of window by adding to your html and body tag height of 100%, and the section tags of the page(where you want to streach the background images).
Example:
html,body,section{height:100%;}
Live Example
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. :)