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;
}
Related
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;
}
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.
Problem occur on Sambungs tables. I have background image set on body.
Css look like
html, body{
background: url('img/background.jpg') no-repeat;
background-position: top; // i tried also cover, fixed etc
}
Webpage is quite high, like over 2000px , where background image takes first 600px, and it could be fine for me, but when i click to hide some box on the bottom of the page, background will automatically appear at the visible part of a screen and it will be eareased from the top of the page. Page isn't realoading during hiding boxes on page, that's why I don't really know how to solve this problem.
Any suggestions ?
Problem solved. I had to input background into div#wrapper. It solved my problem with rendering of background image
I am using SiteBuilder to make my website marsya.com, and I inserted a code snippet into the header & body of my page (I didn't know where it should go so I put it in both places) that allows me to have a fixed background image. Hooray!
The problem is, while my navigation bar & location info are where I want them when I am zoomed at 100%, if the zoom or screen size are different my nav bar & the rest of that table row get lost in background image.
I would like them to either stay static are relative to the background (my first choice) or to just stay at the top of the page and not scroll along with the rest of my content (second choice) (I tried to post images of what I am describing, but I don't have enough reputation points)
Help! Oh, and in case you hadn't guessed by my use of SiteBuilder (and the fact that I don't know if the background image goes in the header or body), I am not a programmer. So, if you could make your advice as clear and 101 as possible, I'd appreciate it :)
marsya.com
To make an element not move along with rest of the page you need to add below styling to your .css file-
#ELEMENT-ID{
position:fixed;
}
If you look at this section below (I assume you added this code for the background image):
<style>
body
{
background-image:url('http://www.marsya.com/images/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
Change where it says:
background-position:center;
Change to
background-position:left top;
This will make the position fixed to the top left and the image won't resize when the browser is changed in size.
I am trying to add this 3D image as background to the content of a wordpress website
This is the theme demo I'm using
I would like the header part to stay the same size on all pages, the same goes for the footer. But as the body changes from page to page, I would like it to change accordingly but still fit properly to the header and footer part of the whole image.
The problem with this background is the fact that it not symmetrical, so the top & the bottom of the body image suppose to include the top & the bottom of the canvas (the middle part of the image)
I tried different techniques to implement this solution, but couldn't figure it out. The issue is that the body part of the image doesn't repeat-y so well, as it changes throughout the height of the image,
I would appreciate a solution, and it doesn't matter for me if I have to cut the images to a several parts.
Thanks
If you are lucky, you can do something with border-image.
This CSS, for instance,
body {
width:100%; height:100%;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
margin:0;
border-width:63px 40px 133px 40px;
border-style:solid;
border-color:brown;
border-image-source:url(http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back1.jpg);
border-image-slice:189 120 399 120 fill;
}
sets the borders to a fixed width (in this case 1/3 of the width of the sides in the image) and distributes the rest of the image over the body background.
Then all you need to do is position the header and footer on top of the border of the body...
Fiddle.
Disclaimer: I've tested in Firefox and Chrome. MDN says it won't work on any other browser.