The image needs to be wider than the space available otherwise it will of course repeat because the image is only 300px wide and the layout is about 700px width.
You should have used three images as I said above with one for the left and one for the right and then a repeating section without ends on it. You still could have used one image as a sprite anyway.
You seem to never quite utilise the code I give you properly and change other things at the same time. The background position on your h1 is wrong anyway as it should be a negative number if you are trying to hide the start.
If you are setting a width then there’s no point in doing any of the above as you could just paste the whole image as it is. the only reason to cap the ends is if you are having a repeating section.
They’re still spaced out incorrectly, and I’ve tried to reset the padding and margin to 0 to correct this display issue. The h1 body is taking up nearly the whole 700px of the layout.
Though I now see the images on the screen now with this code:
The cloud images aren’t loading and I get a warning from mcaffee that it’s a dodgy site!
You’ll have to make a drawing of what you want it to look like as all the code I have given you so far will produce a working version of something or other but you seemed to keep changing your mind and messing the code up on the way
I thought you wanted a full width header with a repeating cloud image and then capped either end with a start and finish image for the cloud. If you are not going to use sprites for this then you may as well use one long image rather than the three small images which will probably incur more overheads than a single whole image.
Well, I did change my mind there a couple of times by going to 1 full image. I really tried to copy your code correctly, but I guess I did mess something up there. The things I added were the text-shadow that I still want in the header (and nowhere else on the page).
Mcafee alerted you? That’s got to be totally bogus…
Here’s a picture with the idea with everything that was the original plan (3 images w/ 1 repeating body image)
Your images are still not loading apart form the right hand image. The urls are incorrect or the image have not been uploaded where you think.
If you want a shrink to fit then the code we have given will do that but you will need to float the h1 so that it isn’t full width. The repeat won’t match up exactly of course but shouldn’t really notice with that design.
I would have used one image longer than you will ever want and then just manipulate the background position to show each part as required.
I’m not sure where you are having problems now as I think we have covered all bases.
I saw that one or two of the cloud image pieces were not uploaded to my domain. I corrected that. I also saw how the before and after pieces were positioned absolutely. I added the float to the h1 and adjusted the positioning on the before and after to achieve the desired effect. Hopefully you’ll be able to see it soon as I have uploaded all my files.
It came together with this, the code I was given here before I changed my mind 6 times:
You don’t need the background position offset any more because you have changed to a repeating image and the positioning is different. Just set it to 0 0.
Previously you were using a different image I believe (I forget now) and the 29px offset would have made the image start 29px to the right to allow room for the end image.
You can move the whole thing with margins now as you no longer need the offset that was in place for the previous versions.
Your page link isn’t loading but was it an example of the above or just an example of the previous method?
Anyway with the graphic you posted above you won;t be able to make a full width repeating inage because your image is only 200px wide. You can use it on text up to 200px wide but to make a repeating middle section the ends should be moved below the repeating section so that a sprite is created and you can then repeat the middle section without the ends appearing.
I’m not sure if this is what you were asking but we went through this already I believe and there is already code in one of these posts to more or less do that anyway.
Now, on this page, I want to utilize the same technique over the bottom link which is an h2 element; however, the body is repeating all the way across the container. The current styles I have been utilizing for this is as follows:
Headings are block level elements, so will stretch across the whole width of the container unless you do something like floating them (as this “shrink wraps” the element).
Another option would be display: inline-block; but you might as well do what you did for the h1.
but I guess I did mess something up there. The things I added were the text-shadow that I still want in the header (and nowhere else on the page).