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

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