I have this html code to create a background to my div:
<div id="secondBigDiv">test</div>
This is my css code :
#secondBigDiv{
background: url(../images/myposts/background.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This code works perfectly as I want but the problem is:
I couldn't fit the height also, when i scroll down I find empty white spaces because my background image didn't fit the height, it fits the width.
Any help?
I would try putting each image property in its own line. background-repeat,background-attachment, etc
May not change anything but seems to work for me.
Related
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.
Right now when you go to this link:http://rawgallery.us/user/login
the background is cut off. It should look like this picture no matter the resolution of the browser window: http://rawgallery.us/CarlisleBackDropWallRoom.png
I am still learning CSS, so I used this code that was suppose to cover the background everywhere, which works :
html {
background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
my #page is setup like this:
#page {
margin-left: auto;
margin-right: auto;
min-height:960px;
min-width:960px;
max-height:1200px;
max-width:1200px;
}
Does the html tag override the page tag?
Can someone tell me how I can view the whole background image if the browser window is 500x700 or 1200x1500 for example?
Thanks!
You may prefer background-size:contain, which fits the background image into its container rather than attempting to cover both width and height of the container.
From the MDN docs:
["contain"] 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.
Here's the CSS:
html {
background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
Here is a working example.
Please note the browser compatibility of background-size.
I would like to display an background image (background.jpg) that covers the whole page, but alongside this image I would like a dotted overlay (dotted-pattern.jpg). I have attempted the following code which theoretically should work but it doesn't, background.jpg only shows the image in correct proportions.
Here is the code:
background-image: url(images/dotted-pattern.png), url(images/background.jpg);
background-position: top left, center center;
background-repeat: repeat, no-repeat;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;
You have a background-position property that includes a background-attachment value where it says "center center fixed". This should just say "center center", and you need an additional property for background-attachment.
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