monkeytooth Posted June 20, 2008 Share Posted June 20, 2008 Alright, lets see.. I'm fairly new to css so bare with me if this is a stupid question. I want to take an image and use it as a background image in a DIV tag. Which that much I can do. However. I can't seem to get it to stop from repeating. After the Height of the DIV exceeds past the images size. Info about the pic. Its a gradient background. Its about 3 pixels wide, and about 550px in height. The concept is to save bandwidth use a smaller image. Problem is that when using background:no-repeat; the image is only the image. What is desired is the image repeat left to right somehow, but not up and down. Anyone know how I can fix this issue? Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 20, 2008 Share Posted June 20, 2008 background-repeat: repeat-x; http://www.w3schools.com/css/pr_background-repeat.asp Quote Link to comment Share on other sites More sharing options...
monkeytooth Posted June 20, 2008 Author Share Posted June 20, 2008 Oh wow, didn't know bout that one, thank you. Im going to assume that "Y" would be for up/down? Also the piece you just helped me with, how cross compatiable is that browser wise as well as how version compatiable is that do you know? Meaning does it work across the board from IE to Safari, and will it work in something like IE 4 (you'd be suprised how many hits a couple sites I am starting to undertake recently get hit with older browsers). Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted June 20, 2008 Share Posted June 20, 2008 background-repeat: repeat-x; http://www.w3schools.com/css/pr_background-repeat.asp Better yet: background: repeat-x #fff; You need to specify the color for the rest of div that doesn't use the gradient, therefore rhodesa's answer isn't complete. Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 20, 2008 Share Posted June 20, 2008 background-repeat: repeat-x; http://www.w3schools.com/css/pr_background-repeat.asp Better yet: background: repeat-x #fff; You need to specify the color for the rest of div that doesn't use the gradient, therefore rhodesa's answer isn't complete. um...i'd like to see where you got that info from??? Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 20, 2008 Share Posted June 20, 2008 Oh wow, didn't know bout that one, thank you. Im going to assume that "Y" would be for up/down? Also the piece you just helped me with, how cross compatiable is that browser wise as well as how version compatiable is that do you know? Meaning does it work across the board from IE to Safari, and will it work in something like IE 4 (you'd be suprised how many hits a couple sites I am starting to undertake recently get hit with older browsers). and background-repeat has been around for a long time. if you want to see the browser compatibilities go here: http://www.w3schools.com/css/css_reference.asp Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted June 20, 2008 Share Posted June 20, 2008 It is true that he may not need to add the color to the background, but I'd like to remind you that it's always good practice to specify one. Sometimes the background image may not load, and by at least specifying a color, the browser can show some color. Otherwise, it will become transparent and potentially create non-contrasting colors. - TheFilmGod Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 20, 2008 Share Posted June 20, 2008 TheFilmGod, I read your post wrong...didn't see that you changed the style attribute to background instead of background-repeat. In that case, I agree and the full background style should look like: background: #FFF url(path/to/background.jpg) repeat-x scroll top left; Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted June 23, 2008 Share Posted June 23, 2008 Shorthand for the "background" property is very cool and I couldn't live without it. Particularly positioning. background: #fff url('myimage.gif') top left no-repeat; background: #fff url('myimage.gif') top center no-repeat; background: #fff url('myimage.gif') top right no-repeat; background: #fff url('myimage.gif') center left no-repeat; background: #fff url('myimage.gif') center center no-repeat; background: #fff url('myimage.gif') center right no-repeat; background: #fff url('myimage.gif') bottom left no-repeat; background: #fff url('myimage.gif') bottom center no-repeat; background: #fff url('myimage.gif') bottom right no-repeat; You can also use percentages and/or pixels (which work great for images as bullets): background: #fff url('myimage.gif') 10px 50% no-repeat fixed; (positions the img 10px left and 50% relative to the text or other element - for bullets or text links with an img this is perfect) background: #fff url('myimage.gif') 30% 0 no-repeat fixed; (positions the img 30% from the left and top relative to the element) I always list color, url, position/position, repeats: background: #fff url('myimage.gif') top left repeat-y; (position starts at the top left of the element and tiles vertically) background: #fff url('myimage.gif') bottom rightrepeat-x; (position starts at the bottom right of the element and tiles horizontally) background: #fff url('myimage.gif') top center repeat; (position starts at the top center of the element and tiles horizontally and vertically) background: #fff url('myimage.gif') center bottom no-repeat; (position starts at the center and bottom of the element once and doesn't tile) Here is a link to the w3c school for the background element: http://www.w3schools.com/css/css_background.asp Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted June 23, 2008 Share Posted June 23, 2008 It is unnecessary to explicitly state, "Top Left" for the background image position. This is the default. Because of this, it is actually quite unusual to ever have to state the background image position. Quote Link to comment Share on other sites More sharing options...
haku Posted June 23, 2008 Share Posted June 23, 2008 Unless you are using CSS sprites for something. Then it's essential. I don't always state top left either, but there is something to be said for it. If you are going to use the shorthand declaration method, then expressly setting each of the variable is a good practice in case the defaults change sometime in the future. I know this is unlikely with the background position, but it can still be considered good practice. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted June 24, 2008 Share Posted June 24, 2008 If you are going to use the shorthand declaration method, then expressly setting each of the variable is a good practice ... Particularly when first teaching someone css. I make it a practice to not rely on defaults whenever it comes to positioning of any element. I personally like to use the top left (or 0 0) because I DO use a lot of other background img positioning within my css for various other purposes (like img bullets). I also prefer using percentages for the vertical alignment of a background img in relation to text. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.