Ramesh (thecodeisclear)

Can you post the link to your site so that we know what you see right now and what you are expecting?

The grey margin on the right hand side of the screen is because the background image has begun repeating and you can see the initial part of the image.

One thing you can do is to include background-color and limit repeat to one direction in your style defintion

body {
    background-image: url("../../../images/BG.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: repeat-y;
    background-color: #xxxxxx
    width:100%;
}

where xxxxxx is the color of the extreme right of the gradient. background-repeat will make the background repeat only vertically and the remainder of the screen will be covered by background-color

PS: I can see what you mean by the gradient appearing only from halfway. The div with id ‘wrapper’ has a background color of #fff which is overriding the gradient color.

Regarding the background, the background-repeat: no-repeat; is preventing the background from repeating. setting it to repeat or removing it would let the background fill the entire site content.

PS: The image has a white border to the top and right, so when it repeats you get a white border which doesn’t look so good.

You would be better off doing a CSS background for the entire page. Fiddle here – http://jsfiddle.net/er8zLk5a/

If you can get all the logos from a site like freevector.com, you can overlay the entire logo by the same grey color in Photoshop.

From the Art of Charm site, it looks like all logos are of different sizes, so that shouldn’t be an issue.

@shahzadnabeelpk: Can you post a link to the page where you are placing your buttons?

That’s strange, I made the code changes via FF inspector and here is the output
http://www.tiikoni.com/tis/view/?id=4036ee1

style sheet
http://www.tiikoni.com/tis/view/?id=9a53aad

Here is part of the code for one of the images

<a rel="bookmark" href="http://adinnovations.com.au/project/test-projects-kim/">

    <div class="description" style="opacity: 0; display: block;"></div>
    <div class="overlay" style="opacity: 0; display: block;"></div>
    <img class="thumb wp-post-image" width="300" height="225" title="" alt="Retrac Louvres™ ROOFS" src="http://adinnovations.com.au/wp-content/uploads/retract-louvres-300x225.jpg"></img>

</a>

All other images seem to be following the same format. Here are the changes I would do in styles.css

#content .project.small img{
	width: 100%;
	height: auto;
        margin: 5px;
}

and

#content .project.small .overlay {
    position: absolute;
	display: none;
    background: #cdb980;
	width: 100%;
	height: 100%;
	z-index: 9;
        margin: 5px;
}