Menu
I'm trying to get a background that remains stationary while the text scrolls over it and also centering the image and keeping it from tiling or repeating. As it stands now I can get it to either but not both. Currently my style sheet handles it this way.
{
background: url(LOCATION OF PIC FILE) repeat fixed;
height: 610px;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
As far as I can tell the height: 610px; limits how far the text can scroll up, which I would like to remain. I have tried to change the "repeat fixed" part and am not getting the results I'd like. I have tried this...
{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 610px;
}
... with this in the HTML..
<div id="intro">
<img src="IMAGE SOURCE" width="100%" height="100%">
</div>
but this doesn't keep the background fixed...
any help would be appreciated.
237
To make a background image not repeat in HTML, specify no-repeat in the background-repeat property or the background shorthand property. The background image is set to 'no-repeat' using the 'background-repeat' property.
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
The CSS background-repeat is what you're looking for. If you want the background image not to repeat at all, use background-repeat: no-repeat; .
To avoid the background image from repeating itself, set the background-repeat property to no-repeat .
After taking a look at your CSS, I've noticed a number of conflicts that can be fixed with a little tweaking. First off, I definitely suggest that you use a browser web development tool (ex. Firebug) to make the changes and tweaks. I find it saves your patience and frustration.
The solution I came upon is, as follows:
.body{
background-image: url('../images/go_here.png');
background-repeat:repeat-x;
background-attachment:fixed;
background-position: left top;
position:absolute;
height:610px
width: ?px;
margin:0;
}
If you want the background to repeat horizontally, then use background-repeat: x-axis; vertically, background-repeat: y-axis;. In order to make sure the background doesn't scroll,use background-attachment: fixed;. The background-position should either use two words or two numeric measurements (ex.center center/left top/ right top/right center/left center/bottom right or 0px 0px). Since you want the background to have a height, and I'm assuming a width; the position of the element needs to be absolute. If you decide to work with floats, the main container or background needs to be absolute.
My suggestion is if you would like keep the text attached to the background, that's up to you. I've found in my experience that it's best to separate the text from the background. It just leads to less headaches in the long run. I would code the text as follows:
.text{
text-align: center;
overflow: hidden;
height: 610?px;
width: ?px;
}
As for the usage of img src and background-image, in my experience, I've found that they conflict. For some weird reason, the img src tag will not work unless there is a word or a phrase outside of the tags. By using both, the img src will override the background css element. I've found that img tags are harder to manipulate in CSS. It's doable, but a nightmare to execute.
Example:
<div><img src="http://www.example.com">Example</div>
In my experience, I've found that img src works hand in hand with text-indent: -9999px; or display:none;. The tag won't work unless it has a word or element to attach itself to. Text-indent causes the word (ie. Example) to be pushed off screen. Display: none; causes the word to appear invisible but it appears over the image if highlighted. (I apologize if that doesn't make sense. I can always clarify.)
As for the HTML markup, I would either use the img tag or just the div tag. The HTML markup:
<html>
<body>
<div class="text">I put my text here.</text>
</body>
</html>
Let me know if this works. I apologize that this became so long. I didn't intend for that. If you run into any problems or if you need more clarification, let me know. I don't mind helping out.
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
