Adding the Background Image

Adding the background image-

For My backgorund image i wanted to use the Gordon tarten that inspired my website. Below is the image i am going to repeat across the backgorund of my webpage. 

The print screen below shows the image inserted into the back ground, however i will need to write a rult to repeat the image across the whole back ground so it covers the whole page. Repeating a smaller image across the page will make the website quicker to load rather than using a large image to fill the whole page.  

The print screen below shows after i have repeated the image across the page to fill the background.

Here i added a rule so the image would only be repeated across the x-axis along the top of the page. I just wanted to experiment with diffrent ways i could manipulate the background of my website just by re-writting the repeat rule with the stylesheet.

And here shows the image just beign repeated across the Y-axis. I just changed the rule so that rather it repeating across the X axis it does along the Y.

After looking at how i could make images transparent to blend into my webpage when designing my footer i wanted to look at diffrent ways I could make the image blend into the back ground.

I faded the image out using a green colour on photoshop.

Below shows how just by making the back ground colour the same as the colour i used to blend out my image it looks like the image simply just blends into the back ground. This is a very simple yet effective technique to use if you want an image to blend into the background colour and look seamless.



Adding the background image/colour to content-

After looking at the main background image i wanted to look at the background i was going to use for the content which is the main body of my website where all of my important infomation will be.

For my content background I did quite like the idea of using a transparent image so that the tarten background could still be seen through.  

The above print screens shows me adding the transparent image into the content container within the style sheet. I do like the idea of using a trasnparent image for the background. However i do think that this particular background image is very strong and distracts away from the actual text quite a bit. So i think i may opt for a solid background in order for the background image not to distract away from the text.