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;
}
Related
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.
I have a bar at the bottom of the website for certain content. The problem is that it's currently not extending (width) to cover the entire screen despite the code to do so.
HTML is rather basic
<div class="bottom-ulity">
other content goes here
</div>
CSS:
.bottom-ulity {
height : 57px;
width : 100%;
right : 0;
position : fixed;
bottom : 0;
background : url('../images/inner-show-text.png') repeat-x left top;
z-index : 1000;
}
I have tried giving a min-width: 100%, tried adding the 2046px as min-width. I looked at some other pages and saw recommendations with "background-size: 100%" and "background-size: cover". Both of these lines of code give the same result, it makes the image itself extend properly however it loses all its effects such as the gradient and instead gives me a basic gray color.
I tried deleting all the divs inside to see if the code inside was causing this, but that wasn't the case either. When I added "background-repeat: no-repeat;", I noticed that the image would only show up once and it wasn't extending at all, leaving a massive gaping hole on where the bar is supposed to be (zoomed out far enough obviously).
Here's an image showing the issue:
I found a hack for the problem, at least one that will be good enough temporarily. I decided to add background-size: 100%
to the css which seemed to fix the problem until I started to zoom in. While the image itself was one and extended 100% in width as it should have, it would start to move up the screen despite being a fixed position with bottom and right set at 0. What I decided was to add
background-size: 200%;
This fixed the issue though that border that is part of the image obviously is twice as big at the moment, which means while it works perfectly, the border being twice as thick it doesn't quite as elegant.
UPDATE: A fix to that solution is simply lowering the px that will be duplicated if the img allows in half. Since the background-size is at 200%, it means everything is multiplied. So if you have a different % to fix a similar issue, keep in mind how many pixels you had before making changes.
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.
I'm creating a pop-up with a background image from CSS as below
#gui-01-Qa {
background-image:url(path/to//file.jpg);
background-repeat: no-repeat;
background-position: top left;
}
This all works fine apart from (what looks like) a boarder of approx 5px being added. It's not coming from my code, but both IE and Firefox are adding it. So whet's it coming from ????
Any ideas would help
Many thanks
Giles
That border is most likely a padding or margin on the body element. Just add html, body { margin:0; padding:0;}, or use a CSS reset.
If you're wondering how to stretch a background image to fill the entire window regardless of resolution while preserving the aspect-ratio A List Apart recently published a very good article on the subject.
Maybe the element with your CSS ID "gui-01-Qa" is causing the border. Try to set margin and/or padding to 0.
I know there are several other questions about the sticky footer, but none have seemed to help me get to a solution for my problem. Here is the template in question:
http://blog.campquiet.com/stack/
Basically I would like the background with the transparent side bars to extend to the bottom of the browser window. The footer (copyright info) should always be at the bottom of the screen as well, even if there isn't enough content to push it that far).
Any suggestions??
Update
Maybe I wasn't as clear as I needed to be. Basically I'm trying to accomplish what is seen here: hxxp://www.cssstickyfooter.com/
I haven't been able to get that working in my template.
You need to set the body and outer container to 100% height. This answer may help you: CSS 100% height with padding/margin
I'm not really sure I understand what you're asking, but to keep the footer always at the bottom, perhaps try something like this
#footer{
position: fixed;
bottom: 0; /* Keeps the footer glued to the bottom of the page */
z-index: 9999; /* Keeps the footer on top of all other elements */
}
For the background, try to apply the CSS to the body tag?
body{
background: url(assets/images/bg_clouds.jpg) fixed 0 0;
}
You can apply extra settings for the background (like position & repeat) to get it to look like it is currently. Anyway, if this doesn't answer your question, please help me out with a more detailed explanation of your question.
Hope that helps.
UPDATE
I played around with Firebug to edit your CSS. I think if you get rid of the background css under html, body {} and add this to your body {}
body {
background: url("assets/images/bg_clouds.jpg") repeat-x fixed 0 0 #F0F4F7;
}
... it will keep the background static even if you scroll. It will always be there. Make sure you have fixed instead of scroll