I find it quite annoying that pictures resize/get zommed in-out when zooming in/out on a website (Ctrl+Mouse-scroll). I have looked at Call Of Duty (http://bit.ly/1FnXMNA) and Heroes Of The Storm's (http://bit.ly/1BQ4Jdr) website, they seem to have some kind of solution to this, but I simply haven't found any searching.
I am wanting to do this;
Normal size/zoom website
After zooming out
The picture/gif(/maybe video..?) does not get resized, how do I do this?
In your CSS file, where you have have background image, add no-repeat center center fixed to the end.
So it will look something like:
html {
background: url(images/someImage.jpg) no-repeat center center fixed;
}
Related
So, i'm trying to design my first page, and kinda trying to learn as i go.
I'm trying to design a one page website, that contains multiple backgrounds, so i divided each section of the website that will contain a different background into divs.
The background looks fine with a full sized window and 100% zoom on the page, but if i zoom in it gives me the option to scroll the page horizontally and it gets messed up, id like to make it so it just simply scales and it does not give me the scroll option.
I've tried setting the background size to cover the page, messed with the width of both the body and the div that contains the background but i can't seem to get it to work.
So, this is part of the page with 100% zoom:
Fully scaled window 100% zoom
But when i reduce the window: it looks like this:
Gives me scroll option and the background image cuts out
Heres the HTML code:
HTML code
And heres the CSS:
CSS code
Thanks, sorry for noob question.
Alright i think i found a solution while just trying different stuff out:
i put on the html and body css:
overflow: auto;
It seems to have fixed my problem, i was kinda of just randomly trying stuff out.
Thx for the help.
Making a portfolio, I have a very multi-layered parallax homepage and an about section below it. Trying to set it up for one page scrolling so I'm using vh, but for some reason this div just slides under the home page when being resized to the point where the height is very small. It appears as though the home page doesn't appear to push to be below it, as if it has an offset or something. Tried using clear under first div, doesn't work. Here is what it looks like: http://puu.sh/sL8Km/4cf16e2ff7.jpg
I'm assuming it's something to do with the css of the parallax, which looks like this: http://puu.sh/sL8Bb/31cca57cef.png
All of the layers of parallax look like #parabg, #scene and #home are wrappers. Any ideas? Thank you!
The miracle of finding out the problem just after you post the question. If whoever's reading this is also using a very complicated parallax and tried to follow parallax.js' poor documentation, don't use padding-top! I'll make a codepen in a bit for anyone that wants to do a fully responsive multi-layered parallax.
#parabg {
background: url(../assets/parallaximages/home/bg2.png) no-repeat 50%;
background-size: cover;
/* padding-top: 52%; */
width:110%;
height: 100vh;
margin-left:-5%;
Hi can you hlp me solve my problem? I want to do website that is in the middle of webbrowser and when you zoom, it doesn't zoom in left upper corner, but it zooms int the middle where the body of the website is. For example like Blizzard's Starcraft website: http://eu.battle.net/sc2/en/.
THX
That site basically consists of a background image that is centered.
So all you need to do is create the page in your favourite paint program.
html {height:100%}
body {
height:100%;
text-align:center;
background:url(http://lorempixel.com/1500/1500) 50% top no-repeat;
}
What the difference between background: no-repeat center center;
and background-size: cover; ?
Both achieve basically the same effect as a background image on my website. No difference as far as I can tell in results.
background: no-repeat centre centre;
is saying place a background image in the element, but only show one instance of it (no-repeat), try looking at thebackground-repeat property to see other options.
The CSS then says place the image in the vertical centre, and horizontal centre of the element. This is related to the background-position property.
It might be worth you trying to reducing the image size to something small 10px x 10px to see the effect of no-repeat, vs repeat-x, repeat-y and repeat.
background-size: declares how big you want the background image to be (this allows dynamic resizing of the image much like height and width in the html img tag), this is a property introduced in CSS3.
By default this is the background-image's default/native resolution. By using the be cover value you are saying scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I have put links on each of the properties so you can see the possible values for each. I recommend you look at all of the background-* attributes on w3schools. Look on the left hand side and they are all listed ;)
Alternatively if you're new to CSS, I would recommend this free course by Udacity which has plenty of video tutorials and guides you through HTML & CSS web development.
I am trying to get my background to behave the same way as http://www.gamestop.com's background but everything I have read and tried doesn't work right.
Here is the CSS I currently have and I feel like it just needs to be tweaked a little to make it respond the way I want it to:
html{
background: url('../images/fbg.png') no-repeat center center fixed;
background-color:#000;
}
It is supposed to be fixed at the top of the page, centered, and all overflow should be hidden on the image to where if you were to zoom out it would simply show more of the image on the sides but remain fixed at the top in the same spot. I also would like to make it so that this background is click-able like a link and haven't been able to find anything about that either..
The site that it is going on is http://www.hackersarchive.com/beta.
Thank you for all of the replies! I figured it out & it was right in front of my face! Thank you for everyone who did answer the question for me as well!
Here is the correct code I was looking for:
html{
background: url('../images/fbg.png') no-repeat center top;
background-color:#000;
}
Simple issue that was more of a hassle than it should have been.