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.
Related
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%;
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;
}
Currently I am trying to give a class a background image and make it repeat vertically.
Im using the following code for the image:
background: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y;
I have also tried
background-image: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y;
But I got nothing from this. The page in question can be seen here: http://ponyterrance.co.uk/gmod-loadingscreen/arkonn.html if you want a better idea of what I mean
Its rather irritating because I used the exact same code on the background of a div on a page I made 4 hours ago. I can't see anything wrong though. I've looked over it for a while now looking for anything being missing but it appears all there. You lot will probably see it straight away but I'm blind as hell.
Also I have tried http linking the file as well as just 'main.png' as its in the same directory.
JSFIDDLE : http://jsfiddle.net/tejashsoni111/U5CLS/
Add background size to the image you are using else reduce the size of the image to the container dimension.
Your div is small and part of image that covers div is white hence not visible. Use colored image or change size of div to see full image.
is the div empty ? if so have you tried putting a non-zero value to width and height?
width: /* != 0 value here */ ;
height: /* != 0 value here */ ;
maybe try moving the repeat as seperatly
background-repeat:repeat-y;
if any more ideas will pop-up into my head i'll update the answer
Use the below style, it will work
#main .content {
background-image: url("http://ponyterrance.co.uk/gmod-loadingscreen/main.png");
background-position: center center;
background-repeat: repeat;
}
try this without height and width,
#main .content {
background: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y 0 0;
overflow:hidden;
}
I am using a wordpress theme and have changed my background image.
I now want to display an image on top of the white background (where the content is displayed).
I have done this by using the following code:
img style="position: absolute; top:244px; left: 220px;" src="http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png"
This looks exactly how I want it to, but it has a problem. The site has a drop down menu, when you scroll down the menu it will disappear when your mouse moves over the image which is displayed behind.
Can anyone help me to move the image back to overlay the background on every page?
I have tried using z-index without any success.
This is the site that I want to apply the image to: http://www.tgon.co.uk/
Here is an example of the problem I am having: http://www.tgon.co.uk/info/languages/french/
Any help you could give would be greatly appreciated.
Basically, what you need to do is to:
Remove the 'position:absolute' from the image. - this is what cause you the overlapping problem.
Add 'margin-top: -107px;' to the image. - this will push the image up to where you want it.
Anyhow, I didn't understand why didn't you use 'background' css property for this.
You could have just do this:
#primary {
background: #fff url('http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png') no-repeat;
}
You have to remove this image:
And add this css:
#content {
background-image:url("http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png");
background-repeat:no-repeat }
Here's the solution:
#branding { z-index: 1001;}
#inner-wrapper { z-index: 1000;}
Since the header is created before the #inner-wrapper div, you will need to apply a higher z-index to header compared to div#inner-wrapper`.
EDIT
Check the screenshot of the developer console view of your markup:
Just setting the z-index right for header & div#inner-wrapper did it for me.
Let's fix this then I'll be glad to help you set the image right.
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.