On a website where a non-tileable background image is used, what is the best way to make this look good across all devices/all zooms?
The CSS is
background: #aaa url(//url);
So a background colour is used where the image ends.
My initial thoughts are to give the background image a size of 100%, so regardless of the zoom or the viewport size, the background image will never be lose quality.
Is this a good way to do it or is there another, better way to manage background images in responsive design?
Thanks
I recommend this
html {
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;
}
Source: CSS-Tricks: Perfect Full Page Background Image
Related
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
I'am trying to design a website with a background image that should stretch in height and width
accordingly when the browser window is resizing. It is complicated to explain what exact behaviour I would like to achieve, for this reason here is the website that does it perfectly:
http://de.wix.com/website-template/view/html/709?originUrl=http%3A%2F%2Fde.wix.com%26number-of-page%3D1%26position-in-page%3D4
I used background-size set to everything possible as well as background-width set to 100%, but
I could not achieve such a behaviour.
Have you tried using the below CSS? This fills the page background with the image.
html {
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;
}
Without any HTML or CSS of your own, it's impossible for us to truly help you, but generally this behavior can be achieved with the following property: background-size: cover
background-image: url('URLGOESHERE');
height: ???;
background-size: cover;
As long as you specify an explicit height (pixels) and do not specify a width, this property should cause the background-image to resize while maintaining aspect ratio.
JSFiddle Example.
I hope somebody can help me here.
I set a background-image, which I want to cover the whole site.
Which is why I used:
html {
background: url('../img/bg/girl_on_sunny_day.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Although I want the background-image to cover the view, I don't want it fixed. That means, if you scroll down, the image shouldn't be visible anymore. I guess this isn't possible and the only possible way would be, to have a big div-tag, with 100% width and its own background-image. Right? Now that I am writing about it... I guess I am going to test it out. Please forgive me for simultaneously hitting the "Post your Question" button.
http://jsfiddle.net/6L9uH/
Also I have an h1-Tag, exactly under the navigation bar, but it doesn't show up as an h1 Title and I have no clue, why.
Instead of background-size: cover use background-size: 100% auto. Adjust the height property according to taste.
Is there a way to make the background image move when you scroll the page up and down, whenever i scroll up and down the background image stays still but I want it to move with the page, is that possible?
Simply set the attachment to fixed.
background-attachment:fixed;
If you have a large image, you can use background-size.
For example:
html {
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;
}-
background-size does what it tells you. Using cover as the attribute, the background image is scaled to fill the entire background, thus getting rid of the scrollbars when using an image larger than your screen.
background-attachment?
Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment