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!
Related
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 facing this trouble for quite some time now, have tried n number of options but still no luck.
I have this background image :
Which I want to make as the background of my website. I added it as a full sized background, but I don't know why it always gets resized and becomes something like this.
Here's my css code for the background image.
body
{
background: url('../images/home.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm really unsure how to fix this! Please guide me in the correct way.
The background-size: cover property in CSS3 stretches your images to fit the background of the element you have specified, which in this case your body.
Edit: As others have mentioned, using background-size: contain would give you the most desirable result as it is defined by the following:
contain
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
The link below also has other properties that may give you your desired results:
Source:https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Try to use background-size:contain instead of background-size:cover. Maybe that is more appropriate.
If you want to keep your image in proportion you would want to use
background-size: contain;
However the issue with this is it will keep the background in proportion, so if your window is not the same proportions you will have white space around. Building off #Sebastien 's fiddle I can show you what I mean -
http://jsfiddle.net/j0n19rw5/5/
You could try re-sizing the image itself to work better with contain.
But if you want it to cover the background you would probably be best using cover. One trick is to crop the image to the space (if you know a general sizing).
You can get away without stretching it too much with a method like this one :
https://jsfiddle.net/r3qpe4dm/1/
But it will still cut off your image at smaller sizes.
To be sure, split the background property for each sub-attribute :
body
{
background-image: url('http://i.stack.imgur.com/ZQinh.jpg');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
http://jsfiddle.net/Paf_Sebastien/j0n19rw5/1/
Edit:
Add this to your CSS since your HTML/body seem to have a low height:
html, body {height: 100%;}
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
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;
}
So I am having just a small issue with a site that I am modifying for a client: http://gator3094.hostgator.com/~sunhome/staging/.
As you can see, the background image that I am putting around the <header></header> tags is not stretching the full height of the div.
Here is a link to my CSS file (everything else is just stock Foundation Framework): http://gator3094.hostgator.com/~sunhome/staging/wp-content/themes/sunpower_theme_sunsolar/library/css/custom.css
Here is also the CSS code that I am using for that particular section of the site:
header {
background: url('http://gator3094.hostgator.com/~sunhome/staging/wp-content/uploads/home-bg2.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have done these full-width cover backgrounds with CSS3 a million times, but I have absolutely no idea why this time the image won't cover the entirety of that div.
Hopefully it's just a super simple fix. I would really appreciate any and all help.
Your issue is because of the lack of appropriate cropping of your background image.
Try this with your header tag:
header { background: black;}
You'll see that the background takes up the appropriate dimensions of the div. The reason white space is showing is because your background image has a lot of extra transparent space around the image. So the background is repeating appropriately, you just need to crop it so it will show the part of image you want.
Still dont belive me?
Try replacing it with this:
header { background: url("http://placekitten.com/1800/950");}