I came across this piece of CSS which a certain website has used for implementing full screen background image :-
html {
background: url(../images/bgrnd.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#ffffff;
}
I looked at all the attributes and went through all the background properties on w3schools.com and understood everything but one. The center paramenter is repeated twice and I don't understand why, nor to which attribute it belongs to. Is it for background-position property ??? But then, only one center would do I guess....umm....so ? what am I missing ?
X and Y coordinates. First "center" is related to "X" and second to "Y". And, yes, it is about background-position
One center for horizontal align and the other for vertical align (in that order)
Related
I have viewed several answers on SO related to this question and have used that to write my css code as such (I was using short-hand before):
#intro {
background-image: url(http://www.trbimg.com/img-5a98709c/turbine/ct-met-illinois-legislature-marijuana-20180301);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
This works fine on my computer and in developer tools on Chrome when I resize the window or change the view to, say, iPhone X.
When I use my actual iPhone to go to the site, only a gray background displays, no image at all. I've tried in both Chrome and Safari.
Does anyone have some insight as to why that might be?
What I have tried:
Viewed similar questions on SO which helped me re-write my CSS without using the shorthand background
Stored the image on my server and shrunk it so it had a width of 1000px (half of its original width)
I plan on actually storing the image on my server in the future but I figured if anyone has the time to help me out a link to the large image online would be best.
Edit:
I have put together a CodePen for the #intro element.
I have a random picture of a moose lying around so I wanted to use it as my ruby on rails website's background. I fumble online for a bit and here is what I got.
html {
background-image: url(images/moose.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The above does not work, my background is still white. What am I doing wrong?
The picture of a moose is located in app/assets/images/moose.jpg
I've tried using html body { } as oppose to html and background as oppose to background-image
<html>
<body style="background-image: url(output.png);">
Hello this is a text line.</body>
</html>
I assume your image to be in same directory of your html page. Otherwise give the relative path to image like C:/images/output.png
You can't use html, you have to use body. It should be:
body {
background:url('images/moose.jpg') no-repeat center center fixed;
}
Open chrome inspector and look at what background-image styles are loading.
url function requires a string, you need to use single quotes to pass in the string file you are trying to load.
background-image:url('images/moose.jpg') no-repeat center center fixed;
Here is what the def of URL says on w3schools. http://www.w3schools.com/cssref/pr_background-image.asp
I have the following css background:#e0e0e0 url(images/bodybg.gif) top center repeat-y;
What I want to do is span the bodybg.gif to 100% but i'm not sure how to do that without losing the effect of that tag.
Thanks!
Change it to:
background:#e0e0e0 url(images/bodybg.gif) top center repeat-y 100%;
The number(s) or label for background size can be placed after the background repeat value in a compound background style. You may also want to change the background size to cover depending on your needs.
More from MDN
The background CSS property is a shorthand for setting the individual
background values in a single place in the style sheet. background can
be used to set the values for one or more of: background-clip,
background-color, background-image, background-origin,
background-position, background-repeat, background-size, and
background-attachment.
And on background-size
The background-size CSS property specifies the size of the background
images. The size of the image can be fully constrained or only
partially in order to preserve its intrinsic ratio.
[...]
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.
You can add background-size:cover; property
background: #e0e0e0 url(images/bodybg.gif) no-repeat center fixed;
-webkit-background-size: cover; /* for Chrome et Safari */
-moz-background-size: cover; /* for Firefox */
-o-background-size: cover; /* for Opera */
background-size: cover;
I was wondering what the easiest and simplest method was to make (3) different clickable areas on a jpg image used as website. But, I'm using the following code to make it dynamically resize on window dimension change
(css)
background: url('backgroundIMG.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
and so I need a solution that would move the clickable areas move/reposition accordingly, because otherwise I found an easy way to make clickable areas using Edge Animate, but I fear this only works for static backgrounds.
Thanks!
I'd make 3 divs with height and width as needed, but that have no content. Then I'd make each div do whatever I needed.
It's important to add that the height and width will be in '%' and not in 'px'. That makes them move according to the background image.
I was wondering how i can make an image across the browser such that even though, my website is viewed in a larger monitor, the image will still span out and extend without showing a white space at the end.
You basically have two choices:
Use a repeating pattern that fills the entire width: you can do this using
width: 100%; background: url(your-image-file) repeat-x
Use a fixed main image and a background filler image that fills the remaining area: the background would use the same code as above and the main image could be an img within the background container.
Well, to start, lets clear your margins with this code.
* {
margin: 0;
padding: 0;
}
By using this in your style sheet or section, it will allow for those images to stretch all the way with no white space.
Next, you'll want to create an image that doesn't look skewed. To do this you will need to create it in a fairly wide format to begin with. If you are looking to fill the entire background, I would suggest 1028X768 px as a good size.
Finally, it's time to place the last bit of code and get it all working.
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;
}
This will work with dang near all current browsers (except IE8 and below).
In order to place an odd size image that you want to span but not entirely cover, I would suggest using a <div> to create a place for the image and add a style to the <div> that says width: 100%;.
This can be done with height as well.
Hope this helps.