Image background-position in CSS - javascript

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

Related

Background position center and 1900px at the same time

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>

How to resize background image with CSS/JS

I have fullscreen website with background-image: no-repeat and background-size: cover style on it. I want to make animation that the background image will resize in 10 second to the right side of the page to 350px width and 175px height. It's even possible to do it?
body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}
I saw some webkit animation but there was problem with the background-size: cover style, so the animation doesn't work.
I tried :
$(function(){
$('body').one("mouseover", function() {
$('body').addClass('hover');
});
});
But it will resize the image instantly and move it to the right, I want to resize them linear.
Thank you very much guys! :-)
You could add something like this to your css:
body {
background-position: center center;
transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}
body.hover {
background-size: 350px 170px;
background-position: right center;
}
https://codepen.io/anon/pen/oPbqPm
The problem with this, is however, that it won't animate the sizing.
I would suggest you don't set the image as background. Instead, position the image behind all other elements using position and z-index properties. Once set, you can add the animation. For more details on using z-index and position attributes see the link below and "try it yourself" example:-
https://www.w3schools.com/cssref/pr_pos_z-index.aspenter link description here
You can then use css animation for resizing of the imgae.
TO learn how to add animation see this link:-
https://www.w3schools.com/css/css3_animations.asp

Scrolling/loading issues Google Chrome/Opera

I've been working on my website and it works flawlessly in Firefox and Safari (also no scrolling issues with IE), but it's opened in both Opera and Chrome the site keeps reloading every area every time you scroll a little bit so when you've loaded an area, you scroll to a new one (which loads strangely) and back again to the first location it reloads everything again. I found that the problems come from the background that I use, but once again, in half of the browsers it works flawlessly. Does anybody know how to get this code to work? I've tried changing the absolute attachment property to both fixed and relative but fixed only makes the site work more terrible and relative does the same as absolute.
Or... is it possible to add css specific for Firefox, IE and Safari to make sure it works there and delete the background image in the other browsers?
.div-1{
background: url(../images/blue1.png), url(../images/background.jpg);
background-attachment: absolute, absolute;
background-position: left bottom, right top;
background-repeat: no-repeat, no-repeat;
background-size: cover, cover;
background-color:#000;
color: #fff;
text-align: center;
padding: 10% 10% 30% 10%;
border-bottom: 5px #000;
}
.div-2{
background: url(../images/blue1.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: absolute;
background-position: left bottom;
background-color:#000;
color: #95C8D1;
text-align: center;
padding: 10% 10% 30% 10%;
border-bottom: 5px #95C8D1;
margin-top: -2px;
}
.div-3{
background: url(../images/black1.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: absolute;
background-position: right bottom;
background-color:#95C8D1;
color: #fff;
text-align: center;
padding: 10% 10% 30% 10%;
border-bottom: 5px #000;
margin-top: -1px;
}
It's about the site: http://cdmolenaar.nl/en/
The main problem you're facing is that your page (images, video) is massive (24MB). Chrome is redrawing the images when they enter the viewable area. I'd recommend:
I see you are loading a bunch of images that are not visible on the page.
None of your images are optimized/resized. When saving your images, try not to make them so much larger than they appear in the page.
The angled color pngs could probably be achieved with CSS or SVG. (Take a look at: http://apps.eky.hk/css-triangle-generator/)
I can't tell you why Firefox and Safari are so much better (except they render differently). The images aren't technically reloading, but they do need to be decoded and painted to the page on scroll. Some general info about scroll Jank can be found here: http://jankfree.org/

background-attachment: fixed is not working on mobile devices

I am building a personal site . But I have a big problem ,background-attachment: fixed is not working on mobile devices . I have 4 sections, with bg fixed, + javascript effect .
The last section is very important ...
Can someone help me please to fix these probleme ? I will realy apreciate .
The site is here : my site
.hello
background-image: url("../img/hello.jpg")
background-repeat: no-repeat
background-size: cover
background-position: center
background-attachment: fixed
height: 100vh
min-height: 600px
display: flex
flex-direction: column
justify-content: center
align-item: center
text-align: center
// Sorry for my bad english ,
It's unsupported on mobile unfortunately...browsers have to completely re-render the image each time you scroll and in the past it was too much of a performance hit, although it does look like support for it is starting to trickle out https://css-tricks.com/almanac/properties/b/background-attachment/. The only way to get a comparable effect at the moment is to have your backgrounds as separate elements with position: fixed, like...
.background{
position: fixed;
background-image: url(image source);
top: 0;
left: 0;
width: 100%;
height: 100%:
z-index: 0;
}
and everything that scrolls over it should have either position: relative or position: absolute with a z-index higher than 0.

How to implement multiple background-images for an id / class with the same CSS code?

so I have a banner id for my website that goes like this for one of my pages
#photo-banner {
background-attachment: scroll, fixed;
background-color: #645862;
background-image: url("images/overlay.png"), url("../images/banner3.jpg");
background-position: top left, bottom center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: white;
padding: 7em 4.5em 3em 4.5em;
text-align: center;
}
The id attributes to a element in the HTML.
However, this only works for one page. If I wanted to make another page with a different background image with the same other settings, as far as I know, I would need to make another id for that.
I'm thinking there's a way with JS / jQuery to change out the background-image in the HTML file rather than the CSS file to save a lot of code writing.
Or if there's another more optimal way, I would greatly appreciate that too, thanks!
On page two give the element a class and use this to override your current CSS. All the rest of your CSS can stay the same and will be re-used :
#photo-banner { /* this will apply to page 1 and page 2 */
background-attachment: scroll, fixed;
background-color: #645862;
background-image: url("images/overlay.png"), url("../images/banner3.jpg");
background-position: top left, bottom center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: white;
padding: 7em 4.5em 3em 4.5em;
text-align: center;
}
#photo-banner.page-two { /* this will apply to page two only */
background-image: url(some-other-image.png), url(some-other-image.png");
}

Categories

Resources