I'm asking exactly what the title says...
#submenu-outer{
height:40px;
background: #F0EFE2 url(/template/img/main/intro12.png) 0px -240px repeat-x;
width:100%;
}
That code makes no sense; Any suggestions?
I want to repeat the first column of this line.
Every other line (of 40px) is null there (0px -240px)
If you use repeat-x as background position it will repeat the whole width of the image file. So if you have transparent pixels in your sprite after 40px, it's actually normal that you get some transparent background every 40px or so.
You could either make your repeating pattern take the whole sprite width, or put it in a seperate file.
Related
I am fairly new to code and taking baby steps with an issue I am having: swapping out background images. I made very slight adjustments to the three images that make up the background of the site. One was a main background image (in a bodywrap container) that loaded just fine. The next was a wrapper image with a repeat-y attribute that is no longer taking since the swap - the image shows up, but is just showing up as a single white line, while it is meant to 'fill' the rest of the page. Finally, the footer image is not showing up at all.
I thought that swapping out the current images with ones that were only slightly adjusted in photoshop (all I did was remove drop-shadows and red margins) would be an easy task - my mistake!
I tried adjusting the code and got nowhere, so I've copied the original code. I believe that the problem lies within my CSS:
#wrapper, footer, .pagetop, .copyright {
width:942px;
margin:0 auto;
padding:0px 37px 0px 37px;
overflow:hidden;
clear:both;
}
.bodywrap {
background: url(images/background.png) 49.9% 0% repeat-x;
width:1016px;
margin:auto;
overflow:hidden;
}
#wrapper {
background: url(images/wrapper.png) 49% repeat-y;
clear:both;
padding-bottom:25px;
min-height:225px;
}
.footer {
background: url(images/footer.png) no-repeat 51% 0%;
overflow:hidden;
min-height:107px;
font-size:1.2em;
padding-top:17px;
font-family: 'Francois One', sans-serif;
}
Thanks in advance for sharing your expertise!
First thing I see that your background instructions are not consistent. Your no-repeat is before and after your alignment values. I would suggest to try keeping it the same everywhere in your code. when your code gets heavy it can be confusing.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
right means align the image on the x axe to the right and
top means align the image on the y axe to the top
Do you understand that your 49.9% values are telling the background image to start repeating at 49% to the left from the edge of the box you as it to be in.
Also your .bodywrap does not have a height. if you only see a small line, this is because your element is only taking up the space the content inside this element is taking. you might have a space or 1 line of code. hard to say without the HTML.
So you need to give the .bodywrap element a min-height or height equal to your image height. The image you provide AS background to an element, does not define that element's height. The <img> tag and an image background don't work the same. an <img> tag will determine its height on its own but you cannot repeat it like a background.
Here you can see more information on background here: http://www.w3schools.com/css/css_background.asp
I need to use a static no-repeating background image on my website, but when the image finishes (vertically), i need to use repeatedly another image. How could this be done?
For the first image should be something like:
background:url(../img/header/main_bg01.jpg) no-repeat top center;
But for the second one, vertically after the first one, should do somehting like:
background:url(../img/header/main_bg02.jpg) repeat top center;
background-repeat: repeat-y;
How could this be done?
Regards,
Use multiple backgrounds on the same element (adjust sizes to your needs):
background:
url(bg1.png) 500px 100px no-repeat,
url(bg2.png) 50px 100px repeat;
What I tried:
#page-text {
background-image:
url(./images/paper-top.png),
url(./images/paper-bottom.png),
url(./images/paper-mid-2.png);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: 0 0, 0 100%, top 10px;
background-size: 100% auto;
}
Unfortunately the repeating part repeats all over #page-text and since paper-top is partly transparent, paper-mid-2 is visible in those transparent parts. For illustration notice the top corners of the paper (or see the live version)
You are probably better off dividing #page-text into three vertical sections. A nice way to do that without extra HTML is to use :before and :after on #page-text, holding the top and bottom background images and placed above and below #page-text respectively. That way, you can let the middle background image repeat as much as needed without interfering with the top and bottom background images. You also then don't need CSS3, thus providing a more backward-compatible solution.
I've got following setup
background-image: url(image1.png) , url(image2.png);
Idea is that image1.png repeats everywhere whereas image2.png should only start 200px from pages top and only repeat-x. I know you can position background like:
background-position: top left, left bot etc...
But how do I position it 200px from top of the page? and make it repeat-x?
You'll want to use the shorthand for background:
{background: url(image1.png) repeat, url(image2.png) 0 200px repeat-x;}
http://www.css3.info/preview/multiple-backgrounds/
I generated a CSS Spritesheet with the help of a Texture packer and its looks like
.pirateSlotSprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(../img/pirateSlotSprite.png);}
.backgroundps {width:800px; height:480px; background-position: -105px -304px}
.balanceBlockps {width:122px; height:61px; background-position: -0px -0px}
...more classes for each frame...
.lineControlps {width:113px; height:65px; background-position: -580px -0px}
.maxBetButtonps {width:115px; height:64px; background-position: -348px -0px}
Then I apply the classes pirateSlotSprite and backgroundps to a div (sav bgDiv) to display the background frame from the sprite sheet. Everything is fine upto this point.
bgDiv will get resized when the browser gets resized, but the background picture remained static without getting shrinked/enlarged to fit bgDiv.
So I added background-size:100% to pirateSlotSprite, but the sprite gets shifted to a different position. I guess the whole image gets shrinked first and then background-position:-105px -304px gets applied without the position values being scaled. If needed I will share the pictures to make the problem easier to understand.
Any ideas on how to fix this?
You misunderstand the way background images work. Positioning for background-images work with either pixels or percentages. But the images themselves are displayed in their true resolution and aspect ratio (unless altered by JavaScript). So they won't 'scale/stretch' when you resize the browser window.