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;
}
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.
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
The best example of what I need would be the picture behind the search bar on http://shutterstock.com. Try to unzoom (ctrl and - on Chrome) ; the rest of the website will size down; the image itself will remain the same size, it will only be cropped as its height decreases.
Basically, I need the background image to be responsive and full width on an otherwise unresponsive and 960px theme.
It's giving me a bad headache so far; I can't figure out how to do it.
Any ideas?
I think you're looking for background-size. FYI, this doesn't work in IE8 and below I believe.
.your-class {
background:url('images/yourimage.jpg');
background-size:cover;
}
body {
background-image: url(blah.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
'cover' will make the background image rescale based on the container's size
'fix' will make the background image positton stay fixed when u scroll down
See my example here - http://jsbin.com/kutobedo/1/edit
When you shrink the browser window, the image resizes correctly and maintains it's aspect ratio. However I want the image to always stretch to fill the screen, but in this case it never stretches beyond it's native resolution.
If I set width:100% instead of max-width. It will stretch the image to fit the width but if you shrink the window vertically, it will start to distort the image.
If I set height: 100% instead of max-height I get overflow/scrollbars instead.
So I'm a bit stuck! Please note the images will be of different aspect ratios and resolutions.
I suppose in the long run, this might not be a good idea as a 1024x768 image blown up on a 4k screen may look a little nasty. Still would like a solution for now though.
Set image as background of a div & use background-size:cover;. This will stretch it to fill screen without losing aspect ratio, no matter what are image dimentions are.
With the property »cover« the image is scaled up to the entire background until the whole background is covered therewith. More at http://en.aufdemdach.org/css-en/css-center-background-images/
Example:
body{
background: url("http://lorempixel.com/g/1000/1000/") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}