Background image

Hi,

What a funky site! So let me get this clear, you want to be able to see the balloon images as the background and want to get rid of the solid yellow that is currently covering the balloons?

Try adding the following code to the bottom of your style.css file or using a custom css plugin to get rid of the yellow behind “Vala?ské Hry 2013”:

#page {
background: none;
}

At the moment you wont be able to get rid of the yellow behind the sheep as the yellow is added to the image file. What you’ll need to do is create the same image with a transparent background.

Let me know if you need anything else.

Afzaal

Thanks, but that’s not what I meant :-). I want to keep yellow background and everything, but have the balloons regularly located around the center block. That way they aren’t covered by the center field and you can see whole balloons, not only part of them.
I don’t know how to say it. I guess I’ll have to do some divs on the right and left of the main block and fill with balloon images. I don’t want to see parts of balloons stick out from behind the main block.
So, have one block filled with whole image of balloon repeated as many as fits, next to it that center block with menu and sheep image and next to it on the right of the page would be another block same as the left one. Those balloons should not overlap with anything else,they should be simply put in the blocks.
I hope you get what I mean now ??

ok,

You wont be able to do that with the current html structure because the images sit on the body of the page which is the very first layer. I can offer a work around though which I think looks quite nice.

First add the following code after line 102 in your style.css file:

background-size: 150px;

So the code should now be the following between lines 97 and 110:

body,
button,
input,
select,
textarea {
	background:url('images/balonky1.gif') repeat; /*pozadie*/
	background-size: 150px;
	color: #000000; /* celkovy text*/
	font-family: "Times New Roman", serif;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.5;
}

Now you’ll also need to reduce the width of the image of the sheep to (for example) 610px so the new balloon size isn’t covered.

If you’re not happy with this approach then the task will be much more complicated. Let me know if there’s anything else you need help with.

Thanks,

Afzaal

Okay thanks a lot! Gonna try it as soon as I finish my house chores ??