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.
Related
I am creating a picture gallery using Bootstrap. At full screen, it looks good
At minimum size, it looks good
But while re-sizing, it does this
I would like the first image (the trees) to be as wide as the second image (the lake), and I've tried adjusting width/max-width, but the problem is the image doesn't scale back down when the second image is ready to be in-line with the first image.
Is it possible to have an image be a certain width when it's col-sm-#, and a different width when it sets to col-md-#?
Consider setting both as background image covers on the divs. This will allow you to resize the divs while retaining the proper aspect ratios of the images.
.yourdiv1{
background: url(images/yourimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.yourdiv2{
background: url(images/yourotherimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I've placed an image in the background of my div with this code:
background: url(../images/cover-image.jpg) no-repeat 50% 100% fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 30rem;
But my problem now is, that I want to move the visible part of the image in the div. The Bottom of the picture should be at the bottom of the div, but I can change everything in the background: (center bottom, 50% 100% etc.) statement, nothing happens.
Can anybody give me a hint?
Try using
background-position: center bottom;
You need to remove the other styling in you 'background' deceleration and just put:
background-position:bottom;
see the fiddle here: https://jsfiddle.net/xerf3z5j/
As one line, this would be:
background: transparent url(../images/cover-image.jpg) center bottom / cover no-repeat fixed;
background-size: cover means that the background image will always take the full width and height of your div.
Should work if you remove those parts:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
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.
The background image gets under the"bookmark bar" of the chrome browser, due to which the top portion of the image is not seen. Is there a way, we can ensure the image fits exactly to the screen of the browser display ?
My CSS code:
body {
background: url("http://localhost/img/BackgroundImage.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Thank you for the suggestion squeamish ossifrage and Vibhor Dube.
I increased the background image size to 1600 X 703. It fits in perfect..
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.