Background position center and 1900px at the same time - javascript

Hello I'm trying to make a rullete game and I have a problem with my background image. I want to change its position and make it center at the same time.
body {
background-image: url(rulette.png);
background-repeat: repeat-x;
background-position: 1900px center;
}
<body>body</body>
This doesn't so I tried to make that in two rows instead like this:
background-image: url(rulette.png);
background-repeat: repeat-x;
background-position: 1900px;
background-position: center;
What happens is that the pixel position is working just fine but the position center doesn't work. So I tried to change the position like this:
background-image: url(rulette.png);
background-repeat: repeat-x;
background-position: 1900px;
background-position: center;
Now the center position work just fine but it skips the pixel position.
Am I trying to do something impossible? I really need to make it work. Do you have any Idea how I can change the backgrounds pixel position and center the image. Note that the background is repeatable.
When I'm resizing the browser window the background is moving. I want it to stay in the same position.

The background position is filled first with the X axis and Y axis last.
You should try something like:
background-position: 50% 1900px;

You should type like following:
background-position: 1900px center;
Because your code background-position: 1900px; and background-position: center; is just applying only one value at a time and overriding one by another.

Since some ambiguity in your question exists, I am going to just take a wild stab at what my current interpretation of that is, give it and x position and center with a 100% size. Simply my guess so you get what you get.
body {
background-size: 100%;
background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg");
background-repeat: repeat-x;
background-position-x: 1900px;
background-position: center;
}
<body>body</body>

Related

Image background-position in CSS

I am currently going through a website's banner via chrome developer tools(Inspect). I noticed that a particular banner has the following ruleset in its CSS:
banner{
background-position:bottom;
background-position-x: center;
background-position-y: center;
}
Is this just a formality?. Because, when I removed the three background properties and set background-position: center, the banner wasn't affected in any way.
From a developer wannabe. Thanks
That banner just has bad CSS.
background-position is a shorthand for, background-position-x and background-position-y.
So,
banner {
background-position: bottom;
background-position-x: center; /* This is not doing anything, because x became 'center' when it was omitted above. */
background-position-y: center; /* This will override the previously set 'bottom' */
}
As you mentioned, background-position: center does the same job, since both x and y will be 'center'.
There's nothing wrong with using keywords, but if you're just starting with CSS, I strongly recommend you to get used to using percentages.
(You'll thank me later when you need more specific positioning using calc().
background: 0% 100% = background: left bottom
background: 100% 0% = background: right top
background: 50% 50% = background: center center
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

In javascript, is there a way to put a background image on a div, but make it start from the left?

I'm writing a thing and I have a nice theme going and I have one div with image on the right, with:
#header {
background-image: url(https://placeholder.png);
background-size: contain;
background-repeat: no-repeat;
}
<div id='header'></div>
but for another div I really want the image to be on the left, does anyone know how to do that?
Try defining background-position: left.

How to make background-image responsive after resize windows with specific width?

I want to make background-image responsive after resize windows with specific width, like this main img http://preview.oklerthemes.com/porto/5.4.0/demo-construction.html.
This is what you can find in the construction site example using the developer tools:
You can set the background-size to cover.
.element {
background-image: url('*');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
Where * in the url() is the path to your image.
Or simply use the shorthand version:
.element {
background: url('*') no-repeat center center/cover;
}

Setting background size (of image) for a "scrolling" page

So i'm having the trouble that if I have a "long" webpage (where you make your window as big as you can but still need to scroll) the image doesn't "behave" correctly.
I thought that setting the background-size property to cover would do this but is the image isn't big enough (Which would have to be pretty big) I just get white space once I scroll down the page a little bit. Is there a property that would, say, set the height of the background to 100% then properly scale the image so it has the correct width proportional to the original height?
My solution as of now is having a background color that the image "eases" into, just to make it look smooth.
Try to use
html,body {
background: url(yourImg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Or if image isn't big enough, use a background color as well`
background: #6DB3F2 url('yourImg.jpg');
Try using background-size: 100% 100%; property.
But that will stretch your image.
If you want to add background to the full webpage then you can add background-image:(''); property to body.
e.g.
body{
background-image:url('http://backgrounds-free.com/highresolution/l_086.png');
background-repeat:none;
background-size: 100% 100%;
}

CSS - Show Entire Image as Background Without Cropping

I'm trying to setup a div with a background image with some text on top of it. The background image needs to stretch the entire width of the viewport, which I've been able to do successfully. This is my CSS:
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem I'm having is that it isn't showing the full height of the image. The image is being cropped at the top and bottom. I want the image to show it's full height and the user needs to be able to scroll down to see more content below the image.
Is there a way I can show the full image without cutting the top and bottom off?
Thanks!
Remove the fixed and instead of cover use contain. If you want a specific size though I would define a height in my css.
You can use background-size: auto 100%;
I updated an example in fiddle to see how its looks.
http://jsfiddle.net/4ozmn00t/2/
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://);
background-size: 100% 100%;
}
setting the width and height of background-size to 100% will fill the div
Remove the fixed from the background.
url() no-repeat center center

Categories

Resources